#skp-home{position:relative;isolation:isolate;clip-path:inset(0);width:100%;text-align:left} #skp-home :where(h1,h2,h3,h4,h5,h6,p,a,ul,ol,li,img,button,input,select,textarea,label,blockquote,figure,small,strong,em,b,i,span,nav,header,section,article){all:revert} #skp-home *,#skp-home *::before,#skp-home *::after{box-sizing:inherit} /* ===== Skipso brand tokens (Brand Guidelines 2022) ===== */ #skp-home{ --navy:#26325E; /* Space Cadet */ --navy-deep:#1E284F; --navy-up:#2E3B6D; --white:#FFFFFF; --cultured:#F6F8F9; --platinum:#EDEBEA; --orange:#FFB266; /* Rajah */ --pink:#FCA5FC; /* Plum Web */ --green:#6CE573; /* Light Green */ --blue:#869FFF; /* Cornflower Blue */ --yellow:#FFDB3A; /* School Bus Yellow */ --sky:#9ADAF2; /* Non Photo Blue */ --orange-t:#FFEEDD; --pink-t:#FEDFFE; --green-t:#D0F5D2; --blue-t:#E7ECFF; --yellow-t:#FFF6CE; --sky-t:#E4F1F7; --paper:#FFFFFF; --paper-2:#F6F8F9; --ink:#26325E; --body:#4B5476; --line:#E2E6EF; --card:#FFFFFF; --card-line:#E5E8F0; --icon-ink:#26325E; --font:'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; --wrap:1240px; --gutter:clamp(20px,4vw,48px); --r-l:28px; --r-m:20px; --ease:cubic-bezier(.2,.8,.2,1); color-scheme:light; box-sizing:border-box; } #skp-home .dark{ --ink:#FFFFFF; --body:rgba(255,255,255,.76); --line:rgba(255,255,255,.14); --card:rgba(255,255,255,.06); --card-line:rgba(255,255,255,.12); --icon-ink:#FFFFFF; --orange-t:rgba(255,178,102,.16); --pink-t:rgba(252,165,252,.16); --green-t:rgba(108,229,115,.15); --blue-t:rgba(134,159,255,.2); --yellow-t:rgba(255,219,58,.14); --sky-t:rgba(154,218,242,.16); color:var(--ink); } #skp-home *,#skp-home *::before,#skp-home *::after{box-sizing:border-box} #skp-home{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px);-webkit-text-size-adjust:100%} #skp-home{margin:0;background:var(--navy);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;font-feature-settings:"cv11","ss01"} #skp-home a{color:inherit} #skp-home svg{max-width:100%} #skp-home :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px} #skp-home .skip{position:absolute;left:16px;top:-80px;z-index:100;background:#fff;color:var(--navy);padding:12px 18px;border-radius:999px;font-weight:600;text-decoration:none} #skp-home .skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)} #skp-home .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)} #skp-home .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ===== 3D layer ===== */ #skp-home #gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none} #skp-home .node-labels{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden} #skp-home .nlabel{position:absolute;left:0;top:0;opacity:0;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 6px;border-radius:999px;background:#fff;color:var(--navy);font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 10px 30px -12px rgba(0,0,0,.45);will-change:transform,opacity} #skp-home .nlabel i{width:22px;height:22px;border-radius:999px;background:var(--c)} #skp-home .skp-main,#skp-home footer{position:relative;z-index:2} #skp-home section{position:relative} #skp-home .light{background:var(--paper);color:var(--ink)} #skp-home .light.alt{background:var(--paper-2)} /* ===== progress + nav ===== */ #skp-home .progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;z-index:80;display:flex;transform-origin:0 50%;transform:scaleX(0)} #skp-home .progress i{flex:1} #skp-home .progress i:nth-child(1){background:var(--orange)} #skp-home .progress i:nth-child(2){background:var(--green)} #skp-home .progress i:nth-child(3){background:var(--pink)} #skp-home .progress i:nth-child(4){background:var(--blue)} #skp-home .nav{position:fixed;top:0;left:0;right:0;z-index:70;padding-top:env(safe-area-inset-top,0px);color:#fff;border-bottom:1px solid transparent;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s} #skp-home .nav.scrolled{background:rgba(38,50,94,.72);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom-color:rgba(255,255,255,.08)} #skp-home .nav.on-light{color:var(--ink);background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line)} .menu-open #skp-home .nav{background:var(--paper);color:var(--ink)} #skp-home .nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px} #skp-home .logo{display:inline-flex;align-items:center;text-decoration:none;color:inherit} #skp-home .logo svg{height:32px;width:auto;display:block} #skp-home .links{display:flex;gap:2px} #skp-home .links a{padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:15px;opacity:.82;transition:opacity .25s,background .25s} #skp-home .links a:hover{opacity:1;background:color-mix(in srgb,currentColor 9%,transparent)} #skp-home .nav-cta{display:flex;align-items:center;gap:10px} #skp-home .menu-btn{display:none;width:48px;height:48px;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 30%,transparent);background:transparent;color:inherit;align-items:center;justify-content:center;cursor:pointer} #skp-home .menu-btn svg{width:22px;height:22px} #skp-home .mnav{position:fixed;left:0;right:0;top:calc(78px + env(safe-area-inset-top,0px));z-index:69;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);padding:12px var(--gutter) 28px;max-height:calc(100% - 78px);overflow:auto} #skp-home .mnav a:not(.btn){display:block;padding:14px 0;font-size:24px;font-weight:700;letter-spacing:-.03em;text-decoration:none;border-bottom:1px solid var(--line)} #skp-home .mnav .btn{margin-top:22px;width:100%;justify-content:center} @media (max-width:1060px){#skp-home .links,#skp-home .nav-cta .btn-ghost{display:none}#skp-home .menu-btn{display:inline-flex}} @media (max-width:520px){#skp-home .nav-cta .btn-primary{display:none}} /* ===== buttons ===== */ #skp-home .btn{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:600 15.5px/1 var(--font);text-decoration:none;border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .4s var(--ease),background .3s,border-color .3s,color .3s;will-change:transform} #skp-home .btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:-1;transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease);background:linear-gradient(90deg,var(--orange) 0 25%,var(--green) 25% 50%,var(--pink) 50% 75%,var(--blue) 75%)} #skp-home .btn:hover::after{transform:scaleX(1)} #skp-home .btn-primary{background:var(--navy);color:#fff} #skp-home .dark .btn-primary,#skp-home .nav:not(.on-light) .btn-primary{background:#fff;color:var(--navy)} #skp-home .btn-ghost{color:inherit;border-color:color-mix(in srgb,currentColor 32%,transparent);background:transparent} #skp-home .btn-ghost:hover{border-color:currentColor} #skp-home .btn .arr{width:16px;height:16px;transition:transform .4s var(--ease)} #skp-home .btn:hover .arr{transform:translateX(3px)} #skp-home .tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:none;padding-bottom:4px;background:linear-gradient(90deg,var(--orange) 0 25%,var(--green) 25% 50%,var(--pink) 50% 75%,var(--blue) 75%) 0 100%/0% 2px no-repeat,linear-gradient(color-mix(in srgb,var(--ink) 25%,transparent),color-mix(in srgb,var(--ink) 25%,transparent)) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease),gap .3s} #skp-home .tlink:hover{background-size:100% 2px,100% 1px;gap:12px} #skp-home .tlink svg{width:15px;height:15px} /* ===== tag ===== */ #skp-home .tag{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 15px 0 11px;border-radius:999px;background:var(--t,var(--blue-t));color:var(--ink);font-size:14px;font-weight:600} #skp-home .tag svg{width:16px;height:15px;flex:none} #skp-home .dark .tag{background:rgba(255,255,255,.08);color:#fff} /* ===== coloured duotone icons ===== */ #skp-home .ic{--c:var(--orange);--t:var(--orange-t);width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--t);flex:none} #skp-home .ic svg{width:28px;height:28px} #skp-home .ic .f{fill:var(--c)} #skp-home .ic .s{fill:none;stroke:var(--icon-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #skp-home .ic.sm{width:44px;height:44px;border-radius:13px} #skp-home .ic.sm svg{width:23px;height:23px} #skp-home .k-orange{--c:var(--orange);--t:var(--orange-t)} #skp-home .k-pink{--c:var(--pink);--t:var(--pink-t)} #skp-home .k-green{--c:var(--green);--t:var(--green-t)} #skp-home .k-blue{--c:var(--blue);--t:var(--blue-t)} #skp-home .k-yellow{--c:var(--yellow);--t:var(--yellow-t)} #skp-home .k-sky{--c:var(--sky);--t:var(--sky-t)} #skp-home .chk{width:20px;height:20px;flex:none;margin-top:2px} #skp-home .chk rect{fill:var(--c,var(--blue));transform-box:fill-box;transform-origin:center;transform:rotate(0deg) scale(0);transition:transform .7s var(--ease) calc(var(--i,0) * 70ms)} #skp-home .chk path{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12;stroke-dashoffset:12;transition:stroke-dashoffset .45s var(--ease) calc(var(--i,0) * 70ms + 380ms)} #skp-home .drawn .chk rect,.no-anim #skp-home .chk rect{transform:rotate(45deg) scale(1)} #skp-home .drawn .chk path,.no-anim #skp-home .chk path{stroke-dashoffset:0} #skp-home .checks li{position:relative;transition:transform .45s var(--ease),color .3s} #skp-home .checks li:hover{transform:translateX(4px);color:var(--ink)} #skp-home .drawn .checks li:hover .chk rect,#skp-home .drawn li:hover .chk rect{transform:rotate(135deg) scale(1.15);transition-delay:0s} /* ===== headings + brand stripe lettering ===== */ #skp-home h1,#skp-home h2,#skp-home h3,#skp-home h4{margin:0;font-family:var(--font);color:var(--ink)} #skp-home h1,#skp-home h2{--tc:var(--ink)} #skp-home h2{font-weight:700;font-size:clamp(34px,4.5vw,62px);line-height:1.04;letter-spacing:-.042em;margin:22px 0 22px;text-wrap:balance} #skp-home .intro{color:var(--body);font-size:clamp(17px,1.35vw,19px);max-width:62ch;margin:0} #skp-home .sh{max-width:840px;margin-bottom:64px} #skp-home .wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .2em;margin:-.04em -.02em -.2em} #skp-home .wi{display:inline-block;will-change:transform} /* ===== HERO ===== */ #skp-home .hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:150px 0 120px} #skp-home .hero>.wrap{width:100%} #skp-home .hero-copy{max-width:min(620px,46vw)} #skp-home .hero h1{--tc:#fff;font-weight:700;font-size:clamp(40px,min(5.5vw,9.4vh),88px);line-height:1.02;letter-spacing:-.05em;margin:26px 0 26px} #skp-home .hero h1 .line{display:block;overflow:hidden;padding:.04em .03em .2em;margin:-.04em -.03em -.2em} #skp-home .hero h1 .w{display:inline-block;will-change:transform} #skp-home .lead{font-size:clamp(17px,1.45vw,20px);color:var(--body);max-width:54ch;margin:0} #skp-home .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px} #skp-home .used-by{display:flex;gap:16px;align-items:flex-start;margin-top:54px;font-size:14.5px;color:var(--body);max-width:58ch} #skp-home .used-by svg{width:30px;height:28px;flex:none;margin-top:2px} #skp-home .scroll-cue{position:absolute;left:var(--gutter);bottom:30px;display:flex;align-items:center;gap:14px;font-size:13px;font-weight:500;color:var(--body)} #skp-home .scroll-cue span{position:relative;width:54px;height:6px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden} #skp-home .scroll-cue span::after{content:"";position:absolute;inset:0;border-radius:999px;background:var(--green);transform:translateX(-100%);animation:cue 2.2s var(--ease) infinite} @keyframes cue{60%,100%{transform:translateX(100%)}} .preload #skp-home .hero-reveal{opacity:0} .preload #skp-home .hero h1 .w{visibility:hidden} /* ===== logo bars (exact geometry of the Skipso mark, scalable with --s) ===== */ #skp-home .bars{position:relative;width:calc(166px * var(--s,1));height:calc(154px * var(--s,1))} #skp-home .bars i{position:absolute;display:block;height:calc(33.5px * var(--s,1));width:calc(142.4px * var(--s,1));will-change:transform} #skp-home .bars .ba{left:calc(22.6px * var(--s,1));top:calc(.2px * var(--s,1));background:var(--orange);border-radius:calc(33.5px * var(--s,1)) calc(16.75px * var(--s,1)) calc(16.75px * var(--s,1)) 0} #skp-home .bars .bc{left:calc(.1px * var(--s,1));top:calc(39.9px * var(--s,1));background:var(--green);border-radius:calc(16.75px * var(--s,1)) calc(33.5px * var(--s,1)) 0 calc(16.75px * var(--s,1))} #skp-home .bars .bb{left:calc(22.6px * var(--s,1));top:calc(79.7px * var(--s,1));background:var(--pink);border-radius:0 calc(16.75px * var(--s,1)) calc(16.75px * var(--s,1)) calc(33.5px * var(--s,1))} #skp-home .bars .bd{left:calc(.1px * var(--s,1));top:calc(119.4px * var(--s,1));background:var(--blue);border-radius:calc(16.75px * var(--s,1)) 0 calc(33.5px * var(--s,1)) calc(16.75px * var(--s,1))} #skp-home .sweep{position:absolute;z-index:6;pointer-events:none} #skp-home .sweep-1{--s:1.6;left:4vw;top:calc(-77px * 1.6)} #skp-home .sweep-2{--s:1.25;left:5vw;bottom:calc(-77px * 1.25)} #skp-home .sweep-3{--s:.9;right:10vw;top:calc(-77px * .9)} @media (max-width:760px){#skp-home .sweep-1{--s:.9;top:calc(-77px * .9)}#skp-home .sweep-2{--s:.8;bottom:calc(-77px * .8)}#skp-home .sweep-3{--s:.6;top:calc(-77px * .6)}} /* ===== PILLARS ===== */ #skp-home .pillars{padding:190px 0 150px} #skp-home .pillars .sh{max-width:720px} #skp-home .pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} #skp-home .pillar{position:relative;display:flex;flex-direction:column;min-height:460px;padding:30px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--card-line);transition:transform .7s var(--ease),box-shadow .5s var(--ease);transform-style:preserve-3d;overflow:hidden} #skp-home .pillar:hover{box-shadow:0 30px 60px -30px rgba(38,50,94,.35)} #skp-home .p-bar{position:relative;height:72px;margin:-2px 0 0 -2px} #skp-home .p-bar i{position:absolute;left:0;top:0;height:72px;width:min(100%,220px);background:var(--c);border-radius:72px 36px 36px 0;transition:transform .7s var(--ease)} #skp-home .p-bar i:nth-child(2){top:auto;height:20px;width:90px;left:auto;right:0;top:26px;border-radius:10px;opacity:.5;background:var(--t)} #skp-home .pillar:hover .p-bar i:first-child{transform:translateX(18px)} #skp-home .p-bar svg{position:absolute;left:26px;top:18px;width:36px;height:36px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #skp-home .pillar .num{position:absolute;right:30px;bottom:30px;font-size:13px;font-weight:600;color:var(--body)} #skp-home .pillar h3{font-size:clamp(24px,2.1vw,30px);font-weight:700;letter-spacing:-.035em;line-height:1.1;margin:34px 0 20px} #skp-home .pillar ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px} #skp-home .pillar li{display:flex;gap:12px;align-items:center;color:var(--body);font-weight:500} #skp-home .pillar li::before{content:"";width:18px;height:8px;border-radius:999px;background:var(--c);flex:none} #skp-home .pillar .tlink{margin-top:auto;align-self:flex-start} #skp-home .pillar .dz{right:22px;top:206px} #skp-home .pillar li::before{transition:width .5s var(--ease),transform .5s var(--ease)} #skp-home .pillar:hover li::before{width:30px} #skp-home .pillar:hover li:nth-child(2)::before{transition-delay:.05s} #skp-home .pillar:hover li:nth-child(3)::before{transition-delay:.1s} #skp-home .pillar:hover li:nth-child(4)::before{transition-delay:.15s} #skp-home .pillar:hover .pv{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 70%,transparent)} #skp-home .pv{transition:box-shadow .45s var(--ease)} /* pillar visuals */ #skp-home .pv{position:relative;height:178px;margin:-4px -4px 0;border-radius:20px;background:var(--t);overflow:hidden} #skp-home .pv-ic{position:absolute;left:16px;top:16px;z-index:2;width:46px;height:46px;border-radius:999px;background:var(--c);display:grid;place-items:center} #skp-home .pv-ic svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} #skp-home .pv-stack{position:absolute;right:16px;top:20px;display:flex;align-items:center} #skp-home .pv-stack i{width:28px;height:28px;border-radius:999px;border:3px solid var(--card);margin-left:-9px;background:var(--orange)} #skp-home .pv-stack i:nth-child(2){background:var(--green)} #skp-home .pv-stack i:nth-child(3){background:var(--pink)} #skp-home .pv-stack i:nth-child(4){background:var(--blue)} #skp-home .pv-stack b{margin-left:8px;font-size:13px;font-weight:700;color:var(--ink)} #skp-home .pf-row{position:absolute;left:16px;right:16px;bottom:22px;display:flex;align-items:center} #skp-home .pf{flex:none;height:36px;padding:0 14px;border-radius:999px;background:var(--card);border:1px solid var(--card-line);display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:var(--ink);transition:background .4s,color .4s,transform .4s var(--ease)} #skp-home .pf-l{position:relative;flex:1;height:2px;margin:0 6px;background:color-mix(in srgb,var(--ink) 18%,transparent);border-radius:2px} #skp-home .pf-l i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:999px;background:var(--c);opacity:0} #skp-home .live .pf{animation:pfOn 3.6s infinite} #skp-home .live .pf:nth-of-type(2){animation-delay:1.2s} #skp-home .live .pf:nth-of-type(3){animation-delay:2.4s} #skp-home .live .pf-l i{animation:pfDot 3.6s infinite} #skp-home .live .pf-l:nth-of-type(2) i{animation-delay:1.2s} @keyframes pfOn{0%,30%{background:var(--c);color:var(--navy);transform:translateY(-3px);border-color:transparent}36%,100%{background:var(--card);color:var(--ink);transform:none}} @keyframes pfDot{0%,24%{left:0;opacity:0}28%{opacity:1}36%{left:calc(100% - 8px);opacity:1}40%,100%{left:calc(100% - 8px);opacity:0}} #skp-home .pn{position:absolute;inset:0;width:100%;height:100%} #skp-home .pn-l line{stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:1.4} #skp-home .pn-d circle{stroke:var(--card);stroke-width:3} #skp-home .pn-spin{transform-origin:160px 86px} #skp-home .live .pn-spin{animation:spin 40s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} #skp-home .pn-c{fill:var(--navy)} #skp-home .pn-ring{fill:none;stroke:var(--c);stroke-width:2;transform-origin:160px 86px} #skp-home .live .pn-ring{animation:ring 2.4s var(--ease) infinite} @keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.2);opacity:0}} #skp-home .pn-ci path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round} #skp-home .ps-badge{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:999px;background:var(--card);display:grid;place-items:center;border:1px solid var(--card-line)} #skp-home .ps-badge svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} #skp-home .ps{position:absolute;left:16px;right:16px;bottom:18px;display:grid;gap:9px} #skp-home .ps-r{display:flex;align-items:center;gap:10px;height:26px;padding:0 10px 0 4px;border-radius:999px;background:var(--card);border:1px solid var(--card-line)} #skp-home .ps-r i{width:18px;height:18px;border-radius:999px;background:var(--a);flex:none} #skp-home .ps-t{flex:1;height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden} #skp-home .ps-t b{display:block;height:100%;width:0;border-radius:inherit;background:var(--c);transition:width 1.4s var(--ease)} #skp-home .live .ps-t b{width:var(--w)} #skp-home .ps-r:nth-child(2) .ps-t b{transition-delay:.15s} #skp-home .ps-r:nth-child(3) .ps-t b{transition-delay:.3s} #skp-home .ps-r em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .no-anim #skp-home .ps-t b{width:var(--w)} /* ===== USE CASES ===== */ #skp-home .uc{padding:40px 0 150px} #skp-home .uc-stage{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:118px 0 40px} #skp-home .uc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap} #skp-home .uc-top .sh{margin-bottom:0;max-width:780px} #skp-home .tabs{display:inline-flex;gap:4px;padding:6px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:40px;max-width:100%;overflow-x:auto;scrollbar-width:none} #skp-home .tabs::-webkit-scrollbar{display:none} #skp-home .uc-tab{flex:none;min-height:46px;padding:0 20px;border-radius:999px;border:0;background:transparent;color:rgba(255,255,255,.8);font:600 15px/1 var(--font);cursor:pointer;transition:background .4s var(--ease),color .4s} #skp-home .uc-tab:hover{color:#fff} #skp-home .uc-tab[aria-selected="true"]{background:#fff;color:var(--navy)} #skp-home .uc-desc{max-width:64ch;color:rgba(255,255,255,.86);margin:24px 0 46px;min-height:3.2em} #skp-home .uc-stage .intro,#skp-home .uc-desc,#skp-home .step-name,#skp-home .step-n{text-shadow:0 1px 16px rgba(30,40,79,.95),0 0 3px rgba(30,40,79,.85)} #skp-home .track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:12px} #skp-home .step{display:flex;flex-direction:column;align-items:stretch;gap:20px;width:100%;padding:0;background:none;border:0;color:var(--body);font:inherit;text-align:left;cursor:pointer} #skp-home .pill{position:relative;height:18px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;transition:height .6s var(--ease),box-shadow .6s var(--ease)} #skp-home .pill::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sc);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease)} #skp-home .step.done .pill::after,#skp-home .step.active .pill::after{transform:scaleX(1)} #skp-home .step.active .pill{height:30px;box-shadow:0 0 44px -6px var(--sc)} #skp-home .step-n{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:rgba(255,255,255,.6)} #skp-home .step-name{display:block;font-weight:700;font-size:clamp(16px,2.3vw,32px);letter-spacing:-.04em;line-height:1.05;color:rgba(255,255,255,.72);transition:color .4s} #skp-home .step.done .step-name{color:rgba(255,255,255,.8)} #skp-home .step.active .step-name{color:#fff} #skp-home .uc-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} #skp-home .uc-col{position:relative;padding:26px;border-radius:var(--r-m);background:var(--card);border:1px solid var(--card-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} #skp-home .uc-col h4{font-size:15px;font-weight:700;margin-bottom:16px;color:#fff} #skp-home .uc-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} #skp-home .uc-col li{display:flex;gap:10px;font-size:15px;color:var(--body);line-height:1.45} #skp-home .uc-foot{margin-top:32px} @media (max-width:1060px){#skp-home .uc-cols{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){#skp-home .uc-cols{grid-template-columns:1fr}#skp-home .track{gap:6px}#skp-home .step-name{font-size:13px;letter-spacing:-.01em}#skp-home .step{gap:12px}#skp-home .step-n{font-size:11px}} /* compact pinned stage for shorter screens, so the step-by-step scroll works on every laptop */ @media (min-width:900px) and (max-height:840px){ #skp-home .uc-stage{padding:86px 0 22px} #skp-home .uc-stage h2{font-size:clamp(30px,min(4.2vw,6.8vh),56px);margin:14px 0 14px} #skp-home .uc-stage .intro{font-size:clamp(14.5px,2.1vh,17px);line-height:1.5} #skp-home .uc-top .tlink{font-size:15px} #skp-home .uc-stage .tabs{margin-top:clamp(14px,2.6vh,30px)} #skp-home .uc-tab{min-height:40px;font-size:14px} #skp-home .uc-desc{margin:clamp(10px,1.8vh,20px) 0 clamp(16px,3vh,34px);font-size:15px;min-height:0} #skp-home .step{gap:clamp(10px,1.6vh,18px)} #skp-home .step-name{font-size:clamp(16px,min(2.1vw,4vh),30px)} } @media (min-width:900px) and (max-height:660px){ #skp-home .uc-stage .intro{display:none} #skp-home .uc-stage{padding-top:80px} } /* ===== v7: new-homepage sections ===== */ #skp-home .hm{position:relative} #skp-home .hm::after{content:"";position:absolute;left:.04em;right:.24em;bottom:.02em;height:.085em;border-radius:999px;background:linear-gradient(90deg,var(--orange) 0 25%,var(--green) 25% 50%,var(--pink) 50% 75%,var(--blue) 75%);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease)} #skp-home .hm.on::after,.no-anim #skp-home .hm::after{transform:scaleX(1)} /* program bar + logos */ #skp-home .jl{padding:150px 0 70px} #skp-home .jump{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:70px} #skp-home .jump a{position:relative;display:flex;align-items:center;gap:12px;min-height:74px;padding:0 22px;border-radius:22px;background:var(--card);border:1px solid var(--card-line);text-decoration:none;font-weight:700;font-size:16.5px;letter-spacing:-.02em;color:var(--ink);overflow:hidden;isolation:isolate;transition:border-color .4s,transform .6s var(--ease)} #skp-home .jump a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--t);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)} #skp-home .jump a:hover::before{transform:scaleX(1)} #skp-home .jump a:hover{border-color:color-mix(in srgb,var(--c) 60%,transparent);transform:translateY(-3px)} #skp-home .jump a svg{width:18px;height:18px;margin-left:auto;transition:transform .5s var(--ease)} #skp-home .jump a:hover svg{transform:translateX(4px)} #skp-home .jump .dmd{width:12px;height:12px;border-radius:3px} #skp-home .ls-head{max-width:var(--wrap);margin:0 0 26px;font-size:clamp(18px,1.7vw,22px);color:var(--body);letter-spacing:-.015em} #skp-home .ls-head b{color:var(--ink)} #skp-home .ls{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);padding:6px 0 10px} #skp-home .ls-track{--lgc:#9B9DA6;display:flex;gap:12px;width:max-content;list-style:none;margin:0;padding:0;animation:marq 70s linear infinite} #skp-home .ls-i{position:relative;display:grid;place-items:center;width:210px;height:116px;border-radius:22px;background:var(--paper-2);border:1px solid var(--card-line);text-decoration:none;overflow:hidden;transition:background .45s var(--ease),border-color .45s,transform .6s var(--ease)} #skp-home .ls-i .lg{max-width:72%;max-height:60%;background:var(--lgc);transition:background .45s var(--ease),transform .6s var(--ease)} #skp-home .ls-i em{position:absolute;left:10px;right:10px;bottom:12px;text-align:center;font-style:normal;font-size:11.5px;font-weight:600;line-height:1.3;color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)} #skp-home .ls-i:hover,#skp-home .ls-i:focus-visible{background:var(--t);border-color:color-mix(in srgb,var(--c) 60%,transparent);transform:translateY(-4px)} #skp-home .ls-i:hover .lg,#skp-home .ls-i:focus-visible .lg{background:var(--ink);transform:translateY(-10px)} #skp-home .ls-i:hover em,#skp-home .ls-i:focus-visible em{opacity:1;transform:none} /* programs tabs */ #skp-home .pg{padding:110px 0 150px} #skp-home .pg-wrap{display:grid;grid-template-columns:minmax(240px,.34fr) minmax(0,1fr);gap:22px;align-items:start} #skp-home .pg-tabs{display:flex;flex-direction:column;gap:10px;position:sticky;top:110px} #skp-home .pg-tab{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;padding:20px 22px 22px 30px;border-radius:22px;border:1px solid var(--card-line);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;overflow:hidden;transition:background .45s var(--ease),border-color .45s,transform .5s var(--ease)} #skp-home .pg-tab:hover{transform:translateX(4px)} #skp-home .pg-bar{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c);transform:scaleY(.3);transform-origin:50% 0;transition:transform .6s var(--ease)} #skp-home .pg-tt{font-size:clamp(17px,1.4vw,20px);font-weight:700;letter-spacing:-.03em;line-height:1.2} #skp-home .pg-te{font-size:13.5px;color:var(--body)} #skp-home .pg-tab[aria-selected="true"]{background:var(--t);border-color:color-mix(in srgb,var(--c) 55%,transparent)} #skp-home .pg-tab[aria-selected="true"] .pg-bar{transform:scaleY(1)} #skp-home .pg-panel{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:22px;padding:22px;border-radius:30px;background:var(--card);border:1px solid var(--card-line)} #skp-home .pg-panel[hidden]{display:none} #skp-home .pg-intro{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:8px 8px 10px} #skp-home .pg-intro .pv{width:100%;margin:0 0 26px} #skp-home .pg-eye{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--ink)} #skp-home .pg-eye .dmd{width:9px;height:9px;border-radius:2px} #skp-home .pg-intro h3{font-size:clamp(26px,2.5vw,38px);font-weight:700;letter-spacing:-.045em;line-height:1.08;margin:12px 0 12px} #skp-home .pg-intro p{margin:0 0 20px;color:var(--body);font-size:16.5px} #skp-home .pg-who{margin-bottom:22px} #skp-home .pg-who>span{display:block;font-size:12.5px;font-weight:700;color:var(--body);margin-bottom:8px} #skp-home .pg-who ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0} #skp-home .pg-who li{height:30px;padding:0 12px;border-radius:999px;background:var(--t);display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;color:var(--ink)} #skp-home .pg-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none;margin:0;padding:0;align-content:stretch} #skp-home .pg-tiles.three li:last-child{grid-column:1 / -1} #skp-home .pg-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;height:100%;min-height:170px;padding:22px;border-radius:22px;background:var(--paper-2);border:1px solid var(--card-line);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .6s var(--ease),border-color .4s,background .4s} #skp-home .pg-tile:hover{transform:translateY(-4px)} #skp-home .pg-tile .ic{margin-bottom:auto} #skp-home .pg-tile b{display:block;margin-top:22px;font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.15} #skp-home .pg-ts{font-size:14.5px;color:var(--body);line-height:1.45;padding-right:30px} #skp-home .pg-go{position:absolute;right:20px;bottom:20px;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--card);border:1px solid var(--card-line);transition:background .4s,transform .5s var(--ease)} #skp-home .pg-go svg{width:16px;height:16px} #skp-home .pg-tile:hover .pg-go{background:var(--c);color:var(--navy);transform:rotate(-45deg)} #skp-home .pg-tile .dz{right:12px;top:12px} @media (max-width:1060px){#skp-home .pg-wrap{grid-template-columns:1fr}#skp-home .pg-tabs{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none}#skp-home .pg-tab{flex:0 0 min(78%,320px)}#skp-home .pg-panel{grid-template-columns:1fr}#skp-home .jump{grid-template-columns:1fr}} @media (max-width:640px){#skp-home .pg-tiles{grid-template-columns:1fr}#skp-home .pg-tiles.three li:last-child{grid-column:auto}#skp-home .jl{padding:110px 0 50px}#skp-home .jump{margin-bottom:46px}#skp-home .ls-i{width:170px;height:100px}} /* platform in practice */ #skp-home .pr{padding:40px 0 70px} #skp-home .pr-stage{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:112px 0 34px} #skp-home .pr-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px} #skp-home .pr-top .sh{margin:0} #skp-home .pr-top h2{margin-bottom:0} #skp-home .pr-track{margin-bottom:30px} #skp-home .pr-panels{display:grid} #skp-home .pr-panel{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,60px);align-items:center;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .55s var(--ease),transform .7s var(--ease),visibility 0s .55s} #skp-home .pr-panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .1s,transform .8s var(--ease) .1s,visibility 0s} #skp-home .pr-txt h3{color:#fff;font-size:clamp(24px,2.4vw,36px);font-weight:700;letter-spacing:-.04em;line-height:1.08} #skp-home .pr-txt>p{margin:12px 0 18px;color:rgba(255,255,255,.8);font-size:16px;text-shadow:0 1px 14px rgba(30,40,79,.95)} #skp-home .pr-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 14px;padding:0} #skp-home .pr-chips li{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.1);font-size:13.5px;font-weight:600;color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} #skp-home .pr-chips .dmd{width:7px;height:7px;border-radius:2px} #skp-home .pr-ai{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 3px 0 0 var(--c);font-size:14.5px;color:rgba(255,255,255,.85);line-height:1.45;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} #skp-home .pr-ai b{color:#fff} #skp-home .spk{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #skp-home .pr-ai .spk{color:var(--c);margin-top:1px} #skp-home .pr-note{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:12.5px;color:rgba(255,255,255,.6)} #skp-home .pr-note .dmd{width:7px;height:7px;border-radius:2px} /* mock UI */ #skp-home .mk{position:relative;height:clamp(250px,36vh,320px);color:var(--navy)} #skp-home .mk-card{position:absolute;background:#fff;border-radius:18px;box-shadow:0 30px 60px -28px rgba(0,0,0,.6);padding:16px 18px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s var(--ease),transform .8s var(--ease)} #skp-home .on .mk-card{opacity:1;transform:none} #skp-home .on .mk-card:nth-child(2){transition-delay:.15s} #skp-home .on .mk-card:nth-child(3){transition-delay:.3s} #skp-home .on .mk-card:nth-child(4){transition-delay:.4s} #skp-home .on .mk-card:nth-child(5){transition-delay:.5s} #skp-home .mk-k{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#6B7290} #skp-home .mk-k .spk{width:14px;height:14px;color:var(--violet,#6A47EE)} #skp-home .mk-t{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;margin:3px 0 8px;color:var(--navy)} #skp-home .mk-s{display:block;font-size:12px;color:#6B7290;line-height:1.4} #skp-home .mk-l{display:block;font-size:11px;font-weight:600;color:#6B7290;margin:6px 0 4px} #skp-home .mk-in{display:block;height:30px;padding:0 10px;border-radius:9px;background:#F3F5FA;border:1px solid #E3E6EF;font-size:13px;line-height:30px;font-weight:600;white-space:nowrap;overflow:hidden} #skp-home .ty::after{content:"";display:inline-block;width:1.5px;height:14px;margin-left:1px;vertical-align:-2px;background:var(--navy);animation:blink 1s steps(1) infinite} #skp-home .mk-btn{display:inline-block;margin-top:10px;height:30px;padding:0 14px;border-radius:999px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;line-height:30px} #skp-home .mk1 .mk-a{left:0;top:0;width:47%} #skp-home .mk1 .mk-b{right:0;top:0;width:50%} #skp-home .mk1 .mk-c{right:0;bottom:0;width:50%;background:#EEF2FF} #skp-home .mk-status{display:flex;gap:6px;margin:4px 0 8px} #skp-home .mk-status span{height:24px;padding:0 9px;border-radius:999px;background:#F0F2F7;font-size:11px;font-weight:700;line-height:24px;color:#6B7290} #skp-home .on .mk-status span{animation:stOn 4.5s var(--ease) infinite} #skp-home .on .mk-status span:nth-child(2){animation-delay:1.5s} #skp-home .on .mk-status span:nth-child(3){animation-delay:3s} @keyframes stOn{0%,8%{background:#F0F2F7;color:#6B7290}12%,30%{background:var(--green);color:var(--navy)}36%,100%{background:#F0F2F7;color:#6B7290}} #skp-home .mk-flow{display:flex;align-items:center;gap:6px} #skp-home .mk-flow span{height:28px;padding:0 10px;border-radius:9px;background:#fff;font-size:11.5px;font-weight:700;line-height:28px;box-shadow:0 2px 0 rgba(38,50,94,.08)} #skp-home .mk-flow i{flex:1;height:2px;min-width:10px;background:var(--navy);opacity:.25;border-radius:2px} #skp-home .mk2 .mk-portal{left:0;top:0;width:60%;padding:0;overflow:hidden} #skp-home .mk-ban{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px;min-height:200px;background:var(--navy);color:#fff;overflow:hidden} #skp-home .mk-ban .mk-k{color:rgba(255,255,255,.7)} #skp-home .mk-ban>b{position:relative;font-size:clamp(20px,2vw,28px);font-weight:800;letter-spacing:-.04em;line-height:1.05} #skp-home .mk-ban .bars{--s:.85;position:absolute;right:-30px;bottom:-24px;transform:rotate(-10deg)} #skp-home .mk-apply{position:relative;margin-top:auto;height:32px;padding:0 14px;border-radius:999px;background:#fff;color:var(--navy);font-size:12px;font-weight:700;line-height:32px} #skp-home .on .mk-apply{animation:pulseBtn 1.8s var(--ease) infinite 1s} #skp-home .mk2 .mk-scout{right:0;bottom:0;width:54%} #skp-home .mk-scout ul,#skp-home .mk-log ul{list-style:none;margin:0;padding:0;display:grid;gap:7px} #skp-home .mk-scout li{display:flex;align-items:center;gap:8px;font-size:12px} #skp-home .mk-scout li i,#skp-home .mk-row i,#skp-home .mk-me i,#skp-home .mk-ex i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--a);font-style:normal;font-size:10.5px;font-weight:800;color:var(--navy)} #skp-home .mk-scout li span{flex:1;font-weight:700;line-height:1.2} #skp-home .mk-scout li em{display:block;font-style:normal;font-weight:500;font-size:11px;color:#6B7290} #skp-home .mk-imp{height:24px;padding:0 9px;border-radius:999px;background:#F0F2F7;font-size:11px;line-height:24px;color:var(--navy)} #skp-home .on .mk-imp{animation:impOn 5s var(--ease) infinite} #skp-home .on .mk-scout li:nth-child(2) .mk-imp{animation-delay:.7s} #skp-home .on .mk-scout li:nth-child(3) .mk-imp{animation-delay:1.4s} @keyframes impOn{0%,20%{background:#F0F2F7}28%,90%{background:var(--green)}100%{background:#F0F2F7}} #skp-home .mk3 .mk-sc{left:0;top:0;width:68%} #skp-home .mk-sch{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin-bottom:6px} #skp-home .mk-sch .mk-t{margin:0 auto 0 0;width:100%} #skp-home .mk-tag{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:var(--pink-t,#FEDFFE);font-size:11px;font-weight:700} #skp-home .mk-tag .spk{width:13px;height:13px} #skp-home .mk-row{display:flex;align-items:center;gap:9px;margin:8px 0;font-size:12px;font-weight:700} #skp-home .mk-nm{width:82px;flex:none} #skp-home .mk-bar{flex:1;height:8px;border-radius:999px;background:#EEF0F6;overflow:hidden} #skp-home .mk-bar b{display:block;height:100%;width:0;border-radius:inherit;background:var(--a);transition:width 1.4s var(--ease)} #skp-home .on .mk-bar b{width:var(--w);transition-delay:.5s} #skp-home .mk-row:nth-of-type(3) .mk-bar b{transition-delay:.65s} #skp-home .mk-row:nth-of-type(4) .mk-bar b{transition-delay:.8s} #skp-home .mk-row em{font-style:normal;width:26px;text-align:right} #skp-home .mk-rev{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;color:#6B7290;font-weight:600} #skp-home .mk-avs{display:flex} #skp-home .mk-avs i{width:20px;height:20px;border-radius:999px;border:2px solid #fff;margin-left:-6px;background:var(--orange)} #skp-home .mk-avs i:first-child{margin-left:0} #skp-home .mk-avs i:nth-child(2){background:var(--green)} #skp-home .mk-avs i:nth-child(3){background:var(--blue)} #skp-home .mk3 .mk-log{right:0;bottom:0;width:44%} #skp-home .mk-log li{position:relative;padding-left:16px;font-size:11.5px;color:#4B5476;opacity:0;transform:translateX(-6px);transition:opacity .5s,transform .5s var(--ease)} #skp-home .mk-log li::before{content:"";position:absolute;left:0;top:5px;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--green)} #skp-home .on .mk-log li{opacity:1;transform:none} #skp-home .on .mk-log li:nth-child(1){transition-delay:1.1s} #skp-home .on .mk-log li:nth-child(2){transition-delay:1.4s} #skp-home .on .mk-log li:nth-child(3){transition-delay:1.7s} #skp-home .mk-stamp{position:absolute;right:14px;top:-14px;padding:5px 12px;border-radius:999px;background:var(--orange);font-size:12px;font-weight:800;transform:rotate(6deg) scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1) 1.9s} #skp-home .on .mk-stamp{transform:rotate(6deg) scale(1)} #skp-home .mk4 .mk-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible} #skp-home .mk-lines path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-dasharray:4 6;stroke-dashoffset:200;transition:stroke-dashoffset 1.6s var(--ease) .4s} #skp-home .on .mk-lines path{stroke-dashoffset:0;animation:dash 6s linear infinite 2s} @keyframes dash{to{stroke-dashoffset:-200}} #skp-home .mk4 .mk-me{left:0;top:50%;margin-top:-56px;width:36%;display:flex;flex-direction:column;align-items:flex-start;gap:4px} #skp-home .mk-me i{width:42px;height:42px;border-radius:12px;font-size:13px} #skp-home .mk-me b{font-size:15px;margin-top:4px} #skp-home .mk-me span{font-size:11.5px;color:#6B7290} #skp-home .mk-ex{right:0;width:50%;display:flex;align-items:center;gap:9px;padding:11px 12px} #skp-home .mk-ex span{flex:1;line-height:1.2} #skp-home .mk-ex span b{display:block;font-size:12.5px} #skp-home .mk-ex em{font-style:normal;font-size:11px;color:#6B7290} #skp-home .mk-e1{top:2%} #skp-home .mk-e2{top:50%;margin-top:-28px} #skp-home .mk-e3{bottom:2%} #skp-home .mk-as{height:24px;padding:0 9px;border-radius:999px;background:#F0F2F7;font-size:11px;line-height:24px} #skp-home .on .mk-e1 .mk-as{animation:impOn 5s var(--ease) infinite 1.2s} #skp-home .mk-chip{position:absolute;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:#fff;font-size:11.5px;font-weight:700;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);opacity:0;transform:scale(.8);transition:opacity .5s,transform .6s cubic-bezier(.3,1.6,.5,1)} #skp-home .mk-chip .dmd{width:9px;height:9px;border-radius:2px} #skp-home .on .mk-chip{opacity:1;transform:none} #skp-home .mk-wallet{left:2%;bottom:4%;transition-delay:1.2s!important} #skp-home .mk-msg{left:16%;top:6%;background:var(--green);transition-delay:1.6s!important} @media (max-width:900px){ #skp-home .pr-panel{grid-template-columns:1fr} #skp-home .pr-panel:not(.on){display:none} #skp-home .mk{height:auto;display:grid;gap:10px;margin-top:6px} #skp-home .mk .mk-card{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin:0} #skp-home .mk2 .mk-portal{padding:0} #skp-home .mk3 .mk-log{margin-top:12px} #skp-home .mk4 .mk-lines,#skp-home .mk4 .mk-chip{display:none} } @media (min-width:900px) and (max-height:840px){ #skp-home .pr-stage{padding:86px 0 18px} #skp-home .pr-stage h2{font-size:clamp(30px,min(4.2vw,6.8vh),56px);margin:12px 0 0} #skp-home .pr-top{margin-bottom:clamp(14px,2.6vh,30px)} #skp-home .pr-track{margin-bottom:clamp(14px,2.6vh,28px)} #skp-home .pr-txt h3{font-size:clamp(22px,min(2.2vw,4.2vh),34px)} #skp-home .pr-txt>p{font-size:15px;margin:8px 0 12px} #skp-home .pr-ai{font-size:13.5px;padding:10px 12px} #skp-home .pr-note{margin-top:10px} } @media (min-width:900px) and (max-height:680px){ #skp-home .pr .kb{display:none} #skp-home .pr-chips{display:none} #skp-home .mk{height:230px} } /* why */ #skp-home .wy{padding:150px 0 130px} #skp-home .wy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} #skp-home .wy-card{position:relative;padding:32px;border-radius:26px;background:var(--card);border:1px solid var(--card-line);transition:transform .6s var(--ease),border-color .4s} #skp-home .wy-card:hover{transform:translateY(-4px)} #skp-home .wy-card .dz{right:20px;top:20px} #skp-home .wy-card h3{font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.035em;line-height:1.12;margin:26px 0 12px} #skp-home .wy-card p{margin:0;color:var(--body);font-size:16px;max-width:52ch} @media (max-width:760px){#skp-home .wy-grid{grid-template-columns:1fr}#skp-home .wy{padding:100px 0}} /* AI assists, people decide */ #skp-home .ax{padding:150px 0} #skp-home .ax-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:end;margin-bottom:60px} #skp-home .ax-head .sh{margin:0} #skp-home .ax-st{max-width:none;font-size:clamp(22px,2.3vw,34px)} #skp-home .ax-flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;margin:0;padding:0} #skp-home .ax-step{position:relative;padding:28px;border-radius:26px;background:var(--card);border:1px solid var(--card-line);transition:transform .6s var(--ease),border-color .4s} #skp-home .ax-step:hover{transform:translateY(-4px)} #skp-home .ax-step .dz{right:18px;top:18px} #skp-home .ax-n{display:grid;place-items:center;width:44px;height:44px;margin-bottom:22px} #skp-home .ax-n i{width:28px;height:28px;border-radius:28%;background:var(--c);transform:rotate(45deg);transition:transform .8s var(--ease)} #skp-home .ax-step:hover .ax-n i{transform:rotate(135deg) scale(1.1)} #skp-home .ax-step h3{font-size:clamp(24px,2.2vw,32px);font-weight:800;letter-spacing:-.045em} #skp-home .ax-step p{margin:10px 0 22px;color:var(--body);font-size:16px} #skp-home .ax-vis{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:44px;padding:12px;border-radius:16px;background:var(--paper-2);border:1px solid var(--card-line)} #skp-home .ax-v1 span{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:999px;background:var(--card);border:1px solid var(--card-line);font-size:13px;font-weight:600;color:var(--ink)} #skp-home .ax-v1 i{width:13px;height:13px;border-radius:4px;border:2px solid var(--c);transition:background .3s} #skp-home .live .ax-v1 span i{animation:tick 4.5s infinite} #skp-home .live .ax-v1 span:nth-child(2) i{animation-delay:.5s} #skp-home .live .ax-v1 span:nth-child(3) i{animation-delay:1s} @keyframes tick{0%,10%{background:transparent}18%,85%{background:var(--c)}100%{background:transparent}} #skp-home .ax-sug{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink)} #skp-home .ax-sug .spk{color:var(--c)} #skp-home .ax-sug b{font-weight:800} #skp-home .ax-btns{display:inline-flex;gap:6px;margin-left:auto} #skp-home .ax-btns b{height:28px;padding:0 11px;border-radius:999px;font-size:12px;line-height:28px;background:var(--card);border:1px solid var(--card-line);color:var(--ink)} #skp-home .live .ax-btns b:first-child{animation:approve 4.5s var(--ease) infinite 1.6s} @keyframes approve{0%,20%{background:var(--card)}28%,85%{background:var(--c);color:var(--navy);border-color:transparent}100%{background:var(--card)}} #skp-home .ax-stamp{height:30px;padding:0 12px;border-radius:999px;background:var(--c);font-size:12.5px;font-weight:800;line-height:30px;color:var(--navy);transform:scale(0) rotate(-6deg);transition:transform .6s cubic-bezier(.3,1.6,.5,1) .9s} #skp-home .live .ax-stamp{transform:scale(1) rotate(-3deg)} #skp-home .ax-log{display:grid;gap:5px;flex:1} #skp-home .ax-log i{display:block;height:6px;border-radius:999px;background:color-mix(in srgb,var(--ink) 14%,transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease)} #skp-home .live .ax-log i{transform:scaleX(1)} #skp-home .live .ax-log i:nth-child(1){transition-delay:1.2s;width:90%} #skp-home .live .ax-log i:nth-child(2){transition-delay:1.4s;width:70%} #skp-home .live .ax-log i:nth-child(3){transition-delay:1.6s;width:50%} #skp-home .ax-token{position:absolute;top:50px;left:42px;width:14px;height:14px;border-radius:4px;background:var(--navy);transform:rotate(45deg);opacity:0;pointer-events:none;box-shadow:0 0 0 5px color-mix(in srgb,var(--blue) 30%,transparent);z-index:3} #skp-home .live .ax-token{animation:token 6s var(--ease) infinite} @keyframes token{0%{left:42px;opacity:0}6%{opacity:1}30%,36%{left:calc(33.33% + 42px)}62%,68%{left:calc(66.66% + 42px)}92%{opacity:1}100%{left:calc(66.66% + 42px);opacity:0}} @media (max-width:1060px){#skp-home .ax-head{grid-template-columns:1fr}#skp-home .ax-flow{grid-template-columns:1fr}#skp-home .ax-token{display:none}#skp-home .ax{padding:100px 0}} /* ===== AI ===== */ #skp-home .ai-col{position:relative} #skp-home .ai-dz{right:22px;top:24px} #skp-home .ai-col .ic{transition:transform .6s var(--ease)} #skp-home .ai-col:hover .ic{transform:rotate(-8deg) scale(1.08)} #skp-home .ai-col .checks{position:relative} #skp-home .ai-col .checks::before{content:"";position:absolute;left:9.5px;top:12px;bottom:12px;width:1px;background:var(--line)} #skp-home .ai-col .checks::after{content:"";position:absolute;left:7px;top:8px;width:6px;height:6px;border-radius:2px;transform:rotate(45deg);background:var(--c);opacity:0;box-shadow:0 0 12px var(--c)} #skp-home .live .ai-col .checks::after{animation:signal 4.2s var(--ease) infinite} #skp-home .live .ai-col:nth-child(2) .checks::after{animation-delay:1.4s} #skp-home .live .ai-col:nth-child(3) .checks::after{animation-delay:2.8s} @keyframes signal{0%{top:8px;opacity:0}8%{opacity:1}70%{opacity:1}78%,100%{top:calc(100% - 14px);opacity:0}} #skp-home .ai-col .checks li{z-index:1} #skp-home .ai-col .checks li .chk{background:var(--card);border-radius:6px} #skp-home .gov{position:relative;display:flex;align-items:center;gap:18px 28px;flex-wrap:wrap;margin-top:22px;padding:20px 26px;border-radius:24px;background:var(--card);border:1px solid var(--card-line)} #skp-home .gov-k{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:15px} #skp-home .gov ul{display:flex;flex-wrap:wrap;gap:12px 26px;list-style:none;margin:0;padding:0} #skp-home .gov li{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--body)} #skp-home .gov li .dmd{width:8px;height:8px;border-radius:2px} #skp-home .ai{padding:170px 0 150px} #skp-home .ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} #skp-home .ai-col{display:flex;flex-direction:column;padding:32px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--card-line);transform-style:preserve-3d;transition:transform .7s var(--ease),box-shadow .5s} #skp-home .ai-col:hover{box-shadow:0 30px 60px -30px rgba(38,50,94,.3)} #skp-home .ai-col header{display:flex;flex-direction:column;gap:18px;margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid var(--line)} #skp-home .ai-col h3{font-size:24px;font-weight:700;letter-spacing:-.03em} #skp-home .ai-col header p{margin:6px 0 0;font-size:15px;color:var(--body);line-height:1.45} #skp-home .ai-col ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:14px} #skp-home .ai-col li{display:flex;gap:12px;font-weight:500;font-size:15.5px;line-height:1.45} #skp-home .ai-col .tlink{margin-top:auto;align-self:flex-start} /* ===== WHAT'S NEW ===== */ #skp-home .wn{position:relative;background:var(--navy-deep);padding:150px 0 130px;overflow:hidden} #skp-home .wn-deco i{position:absolute;display:block;border-radius:26%;transform:rotate(45deg);pointer-events:none} #skp-home .wn-deco i:nth-child(1){width:220px;height:220px;right:-70px;top:90px;border:2px solid rgba(134,159,255,.22)} #skp-home .wn-deco i:nth-child(2){width:46px;height:46px;right:170px;top:120px;background:var(--orange);opacity:.9} #skp-home .wn-deco i:nth-child(3){width:22px;height:22px;right:120px;top:250px;background:var(--pink)} #skp-home .wn-deco i:nth-child(4){width:140px;height:140px;left:-50px;bottom:260px;border:2px solid rgba(108,229,115,.22)} #skp-home .wn-deco i:nth-child(5){width:18px;height:18px;left:110px;bottom:330px;background:var(--green)} #skp-home .wn-deco i:nth-child(6){width:320px;height:320px;left:46%;top:-170px;border:1px solid rgba(255,255,255,.07)} #skp-home .wn-head .sh{max-width:900px} #skp-home .wn-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px} #skp-home .wn-tab{position:relative;text-align:left;padding:20px 22px 24px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#fff;font:inherit;cursor:pointer;overflow:hidden;transition:background .4s var(--ease),border-color .4s,transform .5s var(--ease)} #skp-home .wn-tab:hover{background:rgba(255,255,255,.07);transform:translateY(-2px)} #skp-home .wn-tab[aria-selected="true"]{background:rgba(255,255,255,.09);border-color:color-mix(in srgb,var(--c) 70%,transparent)} #skp-home .wn-cat{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--c)} #skp-home .wn-cat .dmd{width:8px;height:8px;border-radius:2px} #skp-home .wn-tab b{display:block;font-size:clamp(19px,1.7vw,24px);font-weight:700;letter-spacing:-.035em;margin:10px 0 6px} #skp-home .wn-tab .s{display:block;font-size:14px;color:rgba(255,255,255,.66);line-height:1.45} #skp-home .wn-tab .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:0 50%} #skp-home .wn-tab[aria-selected="true"] .bar.run{animation:bar var(--dur,9s) linear forwards} #skp-home .wn-paused .wn-tab .bar.run{animation-play-state:paused} #skp-home .wn-stage{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,3.6vw,56px);align-items:center;padding:clamp(14px,1.8vw,22px);border-radius:32px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)} #skp-home .wn-player{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#141c40;box-shadow:0 50px 90px -50px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.08)} #skp-home .wn-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0d1330;opacity:0;transition:opacity .5s} #skp-home .wn-player.playing video{opacity:1} #skp-home .wn-poster{position:absolute;inset:0;display:block;width:100%;padding:0;border:0;background:var(--navy);cursor:pointer;overflow:hidden;color:#fff;font:inherit;text-align:left;transition:opacity .5s var(--ease)} #skp-home .wn-player.playing .wn-poster{opacity:0;pointer-events:none} #skp-home .wn-bars{--s:2.5;position:absolute!important;right:-8%;top:50%;transform:translateY(-50%) rotate(-10deg);transition:transform 1.2s var(--ease)} #skp-home .wn-poster:hover .wn-bars{transform:translateY(-50%) rotate(-4deg) scale(1.04)} #skp-home .wn-bars i{transition:transform 1s var(--ease)} #skp-home .wn-poster:hover .wn-bars .ba{transform:translateX(-16px)} #skp-home .wn-poster:hover .wn-bars .bb{transform:translateX(-10px)} #skp-home .wn-poster:hover .wn-bars .bc{transform:translateX(12px)} #skp-home .wn-poster:hover .wn-bars .bd{transform:translateX(18px)} #skp-home .wn-pd i{position:absolute;display:block;border-radius:26%;transform:rotate(45deg)} #skp-home .wn-pd i:nth-child(1){width:26px;height:26px;left:9%;top:16%;background:var(--yellow)} #skp-home .wn-pd i:nth-child(2){width:14px;height:14px;left:17%;top:30%;background:var(--sky)} #skp-home .wn-pd i:nth-child(3){width:70px;height:70px;left:30%;top:-26px;border:2px solid rgba(255,255,255,.18)} #skp-home .wn-play{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:999px;background:#fff;color:var(--navy);display:grid;place-items:center;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)} #skp-home .wn-play svg{width:30px;height:30px;fill:currentColor;margin-left:4px} #skp-home .wn-play::after{content:"";position:absolute;inset:-10px;border-radius:inherit;border:2px solid rgba(255,255,255,.5);animation:ring 2.4s var(--ease) infinite} #skp-home .wn-pt{position:absolute;left:clamp(16px,2.4vw,28px);bottom:clamp(14px,2.2vw,26px);right:40%;display:flex;flex-direction:column;gap:4px} #skp-home .wn-pk{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--c)} #skp-home .wn-pt b{font-size:clamp(20px,2.4vw,34px);font-weight:800;letter-spacing:-.045em;line-height:1} #skp-home .wn-pt span:last-child{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.8)} #skp-home .wn-copy h3{color:#fff;font-size:clamp(26px,2.5vw,38px);font-weight:700;letter-spacing:-.04em;line-height:1.08} #skp-home .wn-copy .wn-lead{margin:12px 0 0;font-size:17px;font-weight:600;color:rgba(255,255,255,.92);line-height:1.45} #skp-home .wn-copy .wn-body{margin:12px 0 18px;font-size:15.5px;color:rgba(255,255,255,.72);line-height:1.6} #skp-home .wn-copy ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} #skp-home .wn-copy li{display:flex;gap:10px;font-size:15px;font-weight:500;color:#fff;line-height:1.45} #skp-home .wn-res{margin-top:20px;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 3px 0 0 var(--c);font-size:15px;color:rgba(255,255,255,.88);line-height:1.5} #skp-home .wn-res b{color:#fff} #skp-home .wn-sub{display:flex;align-items:baseline;justify-content:space-between;gap:12px 30px;flex-wrap:wrap;margin-bottom:24px} #skp-home .wn-sub h3{color:#fff;font-size:clamp(24px,2.2vw,32px);font-weight:700;letter-spacing:-.04em} #skp-home .wn-sub p{margin:0;color:rgba(255,255,255,.66);font-size:15.5px} #skp-home .wn-also{margin-top:96px} #skp-home .wn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} #skp-home .wn-card{position:relative;padding:24px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:transform .6s var(--ease),border-color .4s} #skp-home .wn-card:hover{transform:translateY(-4px)} #skp-home .wn-card .dz{right:14px;top:14px} #skp-home .wn-card h4{color:#fff;font-size:18px;font-weight:700;letter-spacing:-.025em;margin:18px 0 8px;line-height:1.2} #skp-home .wn-card p{margin:0;color:rgba(255,255,255,.7);font-size:14.5px;line-height:1.55} #skp-home .wn-hz{margin-top:96px} #skp-home .wh{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:22px} #skp-home .wh::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;border-radius:2px;background:rgba(255,255,255,.12)} #skp-home .wh::after{content:"";position:absolute;left:0;right:0;top:15px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--orange),var(--green),var(--pink),var(--blue),var(--yellow));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s var(--ease)} #skp-home .live .wh::after,.no-anim #skp-home .wh::after{transform:scaleX(1)} #skp-home .wh-i{position:relative;padding-top:52px} #skp-home .wh-node{position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center} #skp-home .wh-node i{width:20px;height:20px;border-radius:28%;background:var(--navy-deep);box-shadow:inset 0 0 0 2px var(--c);transform:rotate(0deg) scale(.4);transition:transform .8s var(--ease) calc(var(--i) * .25s + .3s),background .5s calc(var(--i) * .25s + .6s)} #skp-home .live .wh-node i,.no-anim #skp-home .wh-node i{transform:rotate(45deg) scale(1);background:var(--c)} #skp-home .wh-i:hover .wh-node i{transform:rotate(135deg) scale(1.2)} #skp-home .wh-i h4{color:#fff;font-size:17px;font-weight:700;letter-spacing:-.02em;margin:16px 0 8px;line-height:1.25} #skp-home .wh-i p{margin:0;color:rgba(255,255,255,.66);font-size:14px;line-height:1.55} #skp-home .wn-foot{margin-top:80px;display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;padding-top:34px;border-top:1px solid rgba(255,255,255,.12)} #skp-home .wn-foot p{margin:0;max-width:56ch;color:rgba(255,255,255,.75)} #skp-home .wn-foot .cta-row{margin:0} @media (max-width:1060px){#skp-home .wn-stage{grid-template-columns:1fr}#skp-home .wn-grid{grid-template-columns:repeat(2,1fr)}#skp-home .wh{grid-template-columns:repeat(2,1fr)}#skp-home .wh::before,#skp-home .wh::after{display:none}} @media (max-width:640px){#skp-home .wn{padding:100px 0}#skp-home .wn-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}#skp-home .wn-tabs::-webkit-scrollbar{display:none}#skp-home .wn-tab{flex:0 0 78%;scroll-snap-align:start}#skp-home .wn-pt span:last-child{display:none}#skp-home .wn-pt b{font-size:19px}#skp-home .wn-grid,#skp-home .wh{grid-template-columns:1fr}#skp-home .wn-tab .s{display:none}#skp-home .wn-play{width:64px;height:64px;margin:-32px 0 0 -32px}#skp-home .wn-pt{right:20px}#skp-home .wn-bars{--s:1.5}} /* ===== GRAITR deep dive ===== */ #skp-home .gr-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,60px);align-items:end;margin-bottom:54px} #skp-home .gr-top .sh{margin:0} #skp-home .gr-aud{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} #skp-home .gr-aud span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--t);font-size:14px;font-weight:600;color:var(--ink)} #skp-home .gr-scout{position:relative;padding:26px;border-radius:26px;background:var(--navy);color:#fff;overflow:hidden} #skp-home .gr-scout .gs-k{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--green)} #skp-home .gr-scout p{margin:12px 0 18px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.82)} #skp-home .gr-scout p b{color:#fff} #skp-home .gr-scout .tlink{color:#fff;background:linear-gradient(90deg,var(--orange) 0 25%,var(--green) 25% 50%,var(--pink) 50% 75%,var(--blue) 75%) 0 100%/0% 2px no-repeat,linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)) 0 100%/100% 1px no-repeat} #skp-home .gr-scout .tlink:hover{background-size:100% 2px,100% 1px} #skp-home .gr-scout{padding-bottom:34px} #skp-home .gr-scout p,#skp-home .gr-scout .gs-k,#skp-home .gr-scout .tlink{position:relative;z-index:1} #skp-home .gr-scout p{max-width:calc(100% - 30px)} #skp-home .gr-scout .bars{--s:.62;position:absolute;right:-34px;bottom:-30px;opacity:.95;transform:rotate(-12deg)} #skp-home .gr-flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;margin:0 0 30px;padding:0} #skp-home .gr-step{position:relative;padding:24px 22px 26px;border-radius:24px;background:var(--card);border:1px solid var(--card-line);transition:transform .6s var(--ease),border-color .4s,background .4s} #skp-home .gr-step:hover{transform:translateY(-4px);background:var(--t)} #skp-home .gr-dia{width:46px;height:46px;display:grid;place-items:center;margin-bottom:18px} #skp-home .gr-dia i{width:30px;height:30px;border-radius:28%;background:var(--c);transform:rotate(45deg);transition:transform .8s var(--ease)} #skp-home .gr-step:hover .gr-dia i{transform:rotate(135deg) scale(1.1)} #skp-home .gr-step h3{font-size:clamp(26px,2.4vw,36px);font-weight:800;letter-spacing:-.05em;line-height:1} #skp-home .gr-step ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px} #skp-home .gr-step li{display:flex;gap:10px;font-size:14.5px;font-weight:500;color:var(--body);line-height:1.45} #skp-home .gr-step:not(:last-child)::after{content:"";position:absolute;right:-12px;top:46px;width:10px;height:10px;border-radius:2px;background:var(--c);transform:rotate(45deg);z-index:2;box-shadow:0 0 0 4px var(--paper)} #skp-home .gr-cta{display:flex;align-items:center;justify-content:space-between;gap:16px 30px;flex-wrap:wrap;margin:0 0 56px} #skp-home .gr-cta p{margin:0;color:var(--body);font-size:15.5px;max-width:60ch} #skp-home .gr-cta .cta-row{margin:0} #skp-home .gd-label{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:15px;font-weight:700;color:var(--ink)} @media (max-width:1060px){#skp-home .gr-top{grid-template-columns:1fr}#skp-home .gr-flow{grid-template-columns:repeat(2,1fr)}#skp-home .gr-step::after{display:none}} @media (max-width:640px){#skp-home .gr-flow{grid-template-columns:1fr}} /* ===== GRAITR demo ===== */ #skp-home .gdemo{padding:150px 0} #skp-home .gd-win{position:relative;border-radius:28px;background:var(--navy);color:#fff;overflow:hidden;box-shadow:0 50px 100px -50px rgba(20,28,60,.7);border:1px solid rgba(255,255,255,.08)} #skp-home .gd-top{display:flex;align-items:center;gap:18px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1)} #skp-home .gd-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em} #skp-home .gd-brand i{width:12px;height:12px;border-radius:999px;background:var(--green);box-shadow:0 0 0 4px rgba(108,229,115,.2)} #skp-home .gd-chaps{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none} #skp-home .gd-chaps::-webkit-scrollbar{display:none} #skp-home .gd-chap{flex:none;height:36px;padding:0 14px;border-radius:999px;border:0;background:transparent;color:rgba(255,255,255,.62);font:600 13px/1 var(--font);cursor:pointer;transition:background .3s,color .3s} #skp-home .gd-chap:hover{color:#fff} #skp-home .gd-chap.on{background:#fff;color:var(--navy)} #skp-home .gd-ex{font-size:12px;font-weight:600;color:rgba(255,255,255,.55);white-space:nowrap} #skp-home .gd-body{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;padding:22px;min-height:420px} #skp-home .gd-brief{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:20px;background:rgba(255,255,255,.06)} #skp-home .gd-k{font-size:12px;font-weight:700;color:var(--green)} #skp-home #gd-brief{margin:0;min-height:6.4em;font-size:15.5px;line-height:1.5;color:#fff} #skp-home #gd-brief::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--green);animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} #skp-home .gd-crit{display:flex;flex-wrap:wrap;gap:6px} #skp-home .gd-crit span{height:28px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease)} #skp-home .gd-crit span.on{opacity:1;transform:none} #skp-home .gd-scan{margin-top:auto;font-size:13px;color:rgba(255,255,255,.72)} #skp-home .gd-scan b{color:#fff;font-variant-numeric:tabular-nums} #skp-home .gd-scan-bar{display:block;height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:10px} #skp-home .gd-scan-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--orange),var(--green),var(--pink),var(--blue))} #skp-home .gd-list{position:relative;height:372px} #skp-home .gd-row{position:absolute;left:0;right:0;height:56px;display:grid;grid-template-columns:40px minmax(0,1.3fr) minmax(0,1fr) 128px;align-items:center;gap:12px;padding:0 14px 0 8px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);will-change:transform,opacity} #skp-home .gd-av{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--navy);background:var(--a)} #skp-home .gd-nm b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em} #skp-home .gd-nm{min-width:0} #skp-home .gd-nm b,#skp-home .gd-nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #skp-home .gd-nm span{display:block;font-size:12.5px;color:rgba(255,255,255,.62)} #skp-home .gd-gate{justify-self:start;height:28px;padding:0 11px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)} #skp-home .gd-gate em{font-style:normal} #skp-home .gd-gate i{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.4)} #skp-home .gd-gate.scan i{animation:blink .7s steps(1) infinite;background:var(--yellow)} #skp-home .gd-gate.pass{background:rgba(108,229,115,.16);color:var(--green)} #skp-home .gd-gate.pass i{background:var(--green)} #skp-home .gd-gate.fail{background:rgba(255,178,102,.14);color:var(--orange)} #skp-home .gd-gate.fail i{background:var(--orange)} #skp-home .gd-sc{display:flex;align-items:center;gap:10px} #skp-home .gd-sc span{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden} #skp-home .gd-sc span i{display:block;height:100%;width:0;border-radius:inherit;background:var(--a)} #skp-home .gd-sc b{width:30px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums} #skp-home .gd-report{position:absolute;top:22px;right:22px;bottom:22px;width:min(400px,calc(100% - 44px));padding:22px;border-radius:22px;background:#fff;color:var(--navy);box-shadow:-30px 0 60px -30px rgba(0,0,0,.6);transform:translateX(120%);display:flex;flex-direction:column;gap:12px} #skp-home .gd-report .gd-k{color:var(--navy);opacity:.7} #skp-home .gd-report h4{color:var(--navy);font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.2} #skp-home .gd-report ol{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px} #skp-home .gd-report li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--cultured);opacity:0;transform:translateY(10px)} #skp-home .gd-report li em{font-style:normal;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--a)} #skp-home .gd-report li b{flex:1;font-size:15px} #skp-home .gd-report li span{font-size:12.5px;font-weight:700} #skp-home .gd-rep-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px} #skp-home .gd-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700} #skp-home .gd-pill i{width:10px;height:10px;border-radius:999px;background:var(--green)} #skp-home .gd-export{height:42px;padding:0 18px;border-radius:999px;border:0;background:var(--navy);color:#fff;font:700 14px/1 var(--font)} #skp-home .gd-export.pulse{animation:pulseBtn 1.4s var(--ease) infinite} @keyframes pulseBtn{0%{box-shadow:0 0 0 0 rgba(38,50,94,.45)}100%{box-shadow:0 0 0 16px rgba(38,50,94,0)}} #skp-home .gd-ctrl{display:flex;align-items:center;gap:16px;padding:14px 20px;border-top:1px solid rgba(255,255,255,.1)} #skp-home .gd-play{width:46px;height:46px;border-radius:999px;border:0;background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;flex:none} #skp-home .gd-play svg{width:20px;height:20px;fill:currentColor} #skp-home .gd-play .i-pause,#skp-home .gd.playing .gd-play .i-play{display:none} #skp-home .gd.playing .gd-play .i-pause{display:block} #skp-home .gd-time{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.75);white-space:nowrap} #skp-home .gd-scrub{position:relative;flex:1;height:30px;display:flex;align-items:center} #skp-home .gd-scrub::before{content:"";position:absolute;left:0;right:0;height:6px;border-radius:999px;background:rgba(255,255,255,.14)} #skp-home .gd-fill{position:absolute;left:0;height:6px;width:0;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--green),var(--pink),var(--blue))} #skp-home .gd-ticks i{position:absolute;top:50%;width:2px;height:14px;margin-top:-7px;border-radius:2px;background:rgba(255,255,255,.35)} #skp-home .gd-scrub input{position:relative;width:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;height:30px;cursor:pointer} #skp-home .gd-scrub input::-webkit-slider-runnable-track{height:6px;background:transparent} #skp-home .gd-scrub input::-moz-range-track{height:6px;background:transparent} #skp-home .gd-scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:999px;background:#fff;border:0;box-shadow:0 0 0 5px rgba(255,255,255,.18)} #skp-home .gd-scrub input::-moz-range-thumb{width:18px;height:18px;border-radius:999px;background:#fff;border:0} @media (max-width:900px){ #skp-home .gd-body{grid-template-columns:1fr} #skp-home .gd-ex{display:none} #skp-home .gd-top{flex-wrap:wrap} #skp-home .gd-chaps{order:3;flex-basis:100%} #skp-home .gd-row{grid-template-columns:36px minmax(0,1fr) 92px;} #skp-home .gd-gate{display:none} #skp-home #gd-brief{min-height:4.8em} } /* ===== WHY ===== */ #skp-home .why{padding:150px 0} #skp-home .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px} #skp-home .why-item{position:relative;padding:38px 0 46px;border-top:1px solid var(--line)} #skp-home .why-item::after{content:"";position:absolute;left:0;top:-2px;height:4px;width:0;border-radius:999px;background:var(--c);transition:width 1.1s var(--ease)} #skp-home .why-item.on::after{width:64px} #skp-home .why-item h3{font-size:22px;font-weight:700;letter-spacing:-.03em;margin:26px 0 12px} #skp-home .why-item p{margin:0;color:var(--body);font-size:16px} /* ===== ENTERPRISE ===== */ #skp-home .ent{padding:150px 0} #skp-home .ent-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px} #skp-home .badges{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 60px;padding:0;list-style:none} #skp-home .badge{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 8px;border-radius:999px;background:rgba(255,255,255,.08);font-size:14px;font-weight:600} #skp-home .badge i{width:24px;height:24px;border-radius:999px;background:var(--c);display:grid;place-items:center} #skp-home .badge i svg{width:13px;height:13px;fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} #skp-home .ent-details{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 36px} #skp-home .ent-d{display:flex;gap:18px;align-items:flex-start} #skp-home .ent-d h3{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:4px 0 6px} #skp-home .ent-d p{margin:0;color:var(--body);font-size:15px;line-height:1.55} #skp-home .ent-aside{position:relative} #skp-home .shield-tag{position:sticky;top:70vh;margin-left:auto;margin-right:6%;width:max-content;display:flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 8px;border-radius:999px;background:#fff;color:var(--navy);font-weight:700;font-size:14px;box-shadow:0 20px 40px -18px rgba(0,0,0,.5)} #skp-home .shield-tag i{width:30px;height:30px;border-radius:999px;background:var(--green);display:grid;place-items:center} #skp-home .shield-tag i svg{width:16px;height:16px;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* ===== TESTIMONIALS (standard element) ===== */ #skp-home .voices{padding:150px 0} #skp-home .tcard{position:relative;display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;margin:0;padding:clamp(26px,4vw,56px);border-radius:var(--r-l);background:var(--card);border:1px solid var(--card-line);min-height:440px} #skp-home .t-photo{position:relative;width:260px;height:241px} #skp-home .t-photo i{position:absolute;display:block;transition:background .6s;background-image:var(--img);background-size:258.4px 258.4px;background-repeat:no-repeat} #skp-home .t-photo .ba{background-position:-35.4px -9.5px} #skp-home .t-photo .bc{background-position:0 -72px} #skp-home .t-photo .bb{background-position:-35.4px -134.3px} #skp-home .t-photo .bd{background-position:0 -196.5px} #skp-home .has-img .t-photo b{display:none} #skp-home .is-logo .t-photo i{background-image:none} #skp-home .t-logo{display:none;position:absolute;left:50%;top:50%;width:150px;height:170px;margin:-85px 0 0 -75px;padding:16px;border-radius:26px;background:#fff;object-fit:contain;box-shadow:0 24px 50px -24px rgba(38,50,94,.55)} #skp-home .is-logo .t-logo{display:block} #skp-home .t-logo.photo{padding:0;object-fit:cover;width:168px;height:188px;margin:-94px 0 0 -84px} #skp-home .t-photo .ba{left:35.4px;top:0;width:223px;height:52.5px;border-radius:52.5px 26px 26px 0;background-color:var(--c)} #skp-home .t-photo .bc{left:0;top:62.5px;width:223px;height:52.5px;border-radius:26px 52.5px 0 26px;background-color:var(--t)} #skp-home .t-photo .bb{left:35.4px;top:124.8px;width:223px;height:52.5px;border-radius:0 26px 26px 52.5px;background-color:var(--t)} #skp-home .t-photo .bd{left:0;top:187px;width:223px;height:52.5px;border-radius:26px 0 52.5px 26px;background-color:var(--c)} #skp-home .t-photo b{position:absolute;inset:0;display:grid;place-items:center;font-size:58px;font-weight:800;letter-spacing:-.05em;color:var(--navy)} #skp-home .qmark{width:46px;height:36px;color:var(--c);margin-bottom:22px;display:block} #skp-home .t-body{min-height:300px;display:flex;flex-direction:column} #skp-home .t-title{font-size:clamp(22px,2.2vw,30px);font-weight:700;line-height:1.22;letter-spacing:-.03em;text-wrap:balance} #skp-home .t-text{color:var(--body);font-size:17px;margin:18px 0 28px;max-width:62ch} #skp-home .t-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:auto} #skp-home .t-who{font-size:15px;color:var(--body)} #skp-home .t-co{--lh:30px;max-width:150px;margin-right:6px} #skp-home .t-foot{row-gap:14px} #skp-home .t-who b{color:var(--ink);font-weight:700} #skp-home .t-who span{margin:0 8px;opacity:.5} #skp-home .t-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px;flex-wrap:wrap} #skp-home .t-orgs{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0} #skp-home .t-org{position:relative;height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--body);font:600 14px/1 var(--font);cursor:pointer;overflow:hidden;transition:color .3s,border-color .3s,background .3s} #skp-home .t-org:hover{color:var(--ink);border-color:var(--ink)} #skp-home .t-org[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)} #skp-home .t-org .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:0 50%} #skp-home .t-org[aria-current="true"] .bar.run{animation:bar var(--dur,9s) linear forwards} #skp-home .v-paused .t-org .bar.run{animation-play-state:paused} @keyframes bar{to{transform:scaleX(1)}} #skp-home .t-arrows{display:flex;gap:10px} #skp-home .t-arrows button{width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .3s} #skp-home .t-arrows button:hover{border-color:var(--ink)} #skp-home .t-arrows svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ===== CLIENTS ===== */ #skp-home .clients{padding:150px 0 200px} #skp-home .clients h2 .count{font-variant-numeric:tabular-nums} #skp-home .marquees{margin-top:10px;display:grid;gap:12px} #skp-home .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} #skp-home .m-track{display:flex;gap:12px;width:max-content;list-style:none;margin:0;padding:0;animation:marq 70s linear infinite} #skp-home .m-track.rev{animation-direction:reverse;animation-duration:84s} #skp-home .marquee:hover .m-track{animation-play-state:paused} @keyframes marq{to{transform:translateX(-50%)}} #skp-home .chip{flex:none;display:flex;align-items:center;gap:14px;padding:14px 22px 14px 14px;border-radius:999px;background:var(--card);border:1px solid var(--card-line)} #skp-home .chip i{width:38px;height:38px;border-radius:999px;background:var(--t);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px;color:var(--ink);flex:none} #skp-home .chip b{display:block;font-weight:700;font-size:15.5px;letter-spacing:-.02em;line-height:1.2} #skp-home .chip span{display:block;font-size:13px;color:var(--body);line-height:1.3} #skp-home .clients .cta-row{margin-top:56px} /* ===== FINAL ===== */ #skp-home .final{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;text-align:center;padding:max(42vh,260px) 0 10vh} #skp-home .final h2{--tc:#fff;font-size:clamp(40px,min(6.6vw,10.5vh),104px);letter-spacing:-.055em;line-height:1;margin:0 auto 24px;max-width:14ch} #skp-home .final .intro{margin:0 auto} #skp-home .final .cta-row{justify-content:center} /* ===== FOOTER ===== */ #skp-home footer{background:var(--navy-deep);color:#fff;padding:90px 0 calc(40px + env(safe-area-inset-bottom,0px))} #skp-home .f-grid{display:grid;grid-template-columns:1.3fr 1fr 1.5fr 1fr;gap:40px} #skp-home .f-brand .logo svg{height:40px} #skp-home .f-brand p{color:rgba(255,255,255,.72);font-size:15px;margin:22px 0 0;max-width:34ch} #skp-home .iso{display:inline-flex;align-items:center;gap:8px;margin-top:22px;height:36px;padding:0 14px 0 6px;border-radius:999px;background:rgba(255,255,255,.08);font-size:13px;font-weight:600} #skp-home .iso i{width:24px;height:24px;border-radius:999px;background:var(--green)} #skp-home .f-grid h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:16px} #skp-home .f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} #skp-home .f-grid a{color:rgba(255,255,255,.72);text-decoration:none;font-size:15px} #skp-home .f-grid a:hover{color:#fff} #skp-home .f-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:70px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:rgba(255,255,255,.66)} #skp-home .f-bottom nav{display:flex;gap:20px;flex-wrap:wrap} #skp-home .f-bottom a{color:inherit;text-decoration:none} #skp-home .f-bottom a:hover{color:#fff} /* ===== brand bands through the lettering (aligned to the type, brand book style) ===== */ #skp-home .stb{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-repeat:no-repeat;background-image:linear-gradient(var(--tc),var(--tc));padding:.06em .03em .2em;margin:-.06em -.03em -.2em} #skp-home h1,#skp-home h2{position:relative} /* ===== Skipso diamonds (decorative) ===== */ #skp-home .dz{position:absolute;width:70px;height:62px;pointer-events:none;z-index:2} #skp-home .dz i{position:absolute;display:block;border-radius:28%;transform:rotate(0deg) scale(0);transition:transform .8s var(--ease)} #skp-home .dz i:nth-child(1){width:22px;height:22px;right:6px;top:4px;background:var(--c,var(--orange))} #skp-home .dz i:nth-child(2){width:13px;height:13px;right:38px;top:26px;background:var(--pink);transition-delay:.08s} #skp-home .dz i:nth-child(3){width:10px;height:10px;right:12px;top:42px;border:2px solid var(--blue);transition-delay:.16s} #skp-home .hl:hover .dz i,#skp-home .hl:focus-within .dz i{transform:rotate(45deg) scale(1)} #skp-home .hl:hover .dz i:nth-child(1){animation:dzSpin 6s linear infinite .8s} @keyframes dzSpin{to{transform:rotate(405deg) scale(1)}} #skp-home .dmd{display:inline-block;width:10px;height:10px;border-radius:3px;transform:rotate(45deg);background:var(--c,var(--orange));flex:none} /* cursor-led highlight on cards */ #skp-home .hl{isolation:isolate} #skp-home .hl::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .45s var(--ease);background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--c) 24%,transparent),transparent 62%)} #skp-home .hl:hover::before{opacity:1} #skp-home .hl:hover{border-color:color-mix(in srgb,var(--c) 60%,transparent)} /* ===== intro ===== */ #skp-home .intro-ov{position:fixed;inset:0;z-index:200;background:var(--navy);display:none;place-items:center;pointer-events:none} .preload #skp-home .intro-ov{display:grid} #skp-home .intro-ov .bars{--s:1.05} /* ===== cursor ===== */ #skp-home .cursor{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:999px;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:300;opacity:0;transition:opacity .3s,width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease)} #skp-home .cursor.on{opacity:1} #skp-home .cursor.hov{width:58px;height:58px;margin:-29px 0 0 -29px} /* ===== hero rotating role pill ===== */ #skp-home .roller{position:relative;display:inline-block;vertical-align:top;height:1.08em;margin-top:-.04em;padding:0 .22em;border-radius:999px;overflow:hidden;color:var(--navy);transition:width .8s var(--ease)} #skp-home .roller-bg{position:absolute;inset:0;border-radius:inherit;background:var(--rc,var(--orange));transition:background .7s var(--ease)} #skp-home .roller-track{position:relative;display:flex;flex-direction:column;align-items:flex-start;transition:transform .8s var(--ease)} #skp-home .roller-track span{display:block;height:1.08em;line-height:1.08em;white-space:nowrap} /* ===== kinetic band: words riding the Skipso bars ===== */ #skp-home .kb{display:grid;gap:14px;padding:30px 0 8px;overflow:hidden} #skp-home .kb-row{overflow:hidden} #skp-home .kb-track{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);width:max-content;will-change:transform} #skp-home .kb-i{display:inline-flex;align-items:center;height:1.46em;padding:0 .66em;font-size:clamp(26px,4.1vw,62px);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--navy);background:var(--c);white-space:nowrap;transition:transform .5s var(--ease),background .4s,color .4s} #skp-home .kb-o{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px var(--c)} #skp-home .kb-i:hover{transform:translateY(-4px)} #skp-home .kb-o:hover{background:var(--c);color:var(--navy)} #skp-home .sa{border-radius:1.46em .73em .73em 0} #skp-home .sc{border-radius:.73em 1.46em 0 .73em} #skp-home .sb{border-radius:0 .73em .73em 1.46em} #skp-home .sd{border-radius:.73em 0 1.46em .73em} #skp-home .kb-d{width:clamp(10px,1.1vw,16px);height:clamp(10px,1.1vw,16px);border-radius:28%;transform:rotate(45deg);background:rgba(255,255,255,.85);flex:none} /* ===== statement scrub ===== */ #skp-home .statement{font-size:clamp(24px,2.9vw,42px);font-weight:600;letter-spacing:-.035em;line-height:1.22;color:var(--ink);max-width:30ch;margin:0} #skp-home .anim .statement .sw{opacity:.16} #skp-home .why .sh{max-width:1000px} /* ===== client logos ===== */ #skp-home .lg{display:block;height:var(--lh,30px);aspect-ratio:var(--ar,3);background:var(--ink);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat} #skp-home .chip .lg{--lh:24px} #skp-home .cg{--lgc:#9B9DA6;list-style:none;margin:0 0 54px;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px} #skp-home .cg-i{position:relative;display:grid;place-items:center;height:140px;border-radius:22px;background:var(--paper-2);border:1px solid var(--card-line);overflow:hidden;text-decoration:none;transition:background .45s var(--ease),border-color .45s,transform .6s var(--ease)} #skp-home .cg-i .lg{max-width:74%;max-height:62%;background:var(--lgc);transition:background .45s var(--ease),transform .6s var(--ease)} #skp-home .cg-i em{position:absolute;left:10px;right:10px;bottom:14px;text-align:center;font-style:normal;font-size:12px;font-weight:600;line-height:1.3;color:var(--ink);opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s var(--ease)} #skp-home .cg-i .dz{right:6px;top:6px;transform:scale(.7);transform-origin:top right} #skp-home .cg-i:hover,#skp-home .cg-i:focus-visible{background:var(--t);border-color:color-mix(in srgb,var(--c) 60%,transparent);transform:translateY(-4px)} #skp-home .cg-i:hover .lg,#skp-home .cg-i:focus-visible .lg{background:var(--ink);transform:translateY(-12px)} #skp-home .cg-i:hover em,#skp-home .cg-i:focus-visible em{opacity:1;transform:none} #skp-home .cg-i:hover .dz i,#skp-home .cg-i:focus-visible .dz i{transform:rotate(45deg) scale(1)} #skp-home .cg-more{background:var(--navy);border-color:transparent;color:#fff;text-align:center;flex-direction:column;align-content:center;gap:2px} #skp-home .cg-more b{font-size:clamp(28px,2.6vw,40px);font-weight:800;letter-spacing:-.05em;line-height:1} #skp-home .cg-more span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.75);max-width:16ch} #skp-home .cg-more:hover{background:var(--navy);transform:translateY(-4px)} @media (max-width:1060px){#skp-home .cg{grid-template-columns:repeat(4,1fr)}} @media (max-width:760px){#skp-home .cg{grid-template-columns:repeat(3,1fr)}#skp-home .cg-i{height:112px}} @media (max-width:480px){#skp-home .cg{grid-template-columns:repeat(2,1fr)}} /* ===== v8: less is more ===== */ #skp-home .cursor,#skp-home .intro-ov{display:none!important} #skp-home .dark.solid{background:var(--navy)} #skp-home .final{min-height:0;justify-content:center;padding:150px 0 150px} #skp-home .ent-grid{grid-template-columns:1fr} #skp-home .ent-aside{display:none} #skp-home .ent-details{grid-template-columns:repeat(3,1fr)} @media (max-width:1060px){#skp-home .ent-details{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){#skp-home .ent-details{grid-template-columns:1fr}} #skp-home .ls-track{animation-duration:95s} #skp-home .kicker .dot,#skp-home .wn-play::after,#skp-home .live .pn-ring{animation:none!important} #skp-home .live .pn-spin{animation-duration:90s} #skp-home .live .pf,#skp-home .live .pf-l i{animation-duration:6s} #skp-home .hl::before{display:none} #skp-home .dz i:nth-child(1){animation:none!important} #skp-home .wn-deco i:nth-child(n+3){display:none} /* practice mock-ups: play once, then rest */ #skp-home .on .mk-status span{animation:stOnce .5s var(--ease) forwards} #skp-home .on .mk-status span:nth-child(1){animation-delay:.5s} #skp-home .on .mk-status span:nth-child(2){animation-delay:1s} #skp-home .on .mk-status span:nth-child(3){animation-delay:1.5s} @keyframes stOnce{to{background:var(--green);color:var(--navy)}} #skp-home .on .mk-imp,#skp-home .on .mk-e1 .mk-as{animation:impOnce .5s var(--ease) forwards} #skp-home .on .mk-scout li:nth-child(1) .mk-imp{animation-delay:.9s} #skp-home .on .mk-scout li:nth-child(2) .mk-imp{animation-delay:1.3s} #skp-home .on .mk-scout li:nth-child(3) .mk-imp{animation-delay:1.7s} #skp-home .on .mk-e1 .mk-as{animation-delay:1.6s} @keyframes impOnce{to{background:var(--green)}} #skp-home .on .mk-apply{animation:none} #skp-home .on .mk-lines path{animation:none} /* AI flow: a single pass when it enters the screen */ #skp-home .ax-token{display:none} #skp-home .live .ax-v1 span i{animation:none;background:var(--c);transition:background .5s var(--ease) .4s} #skp-home .live .ax-v1 span:nth-child(2) i{transition-delay:.7s} #skp-home .live .ax-v1 span:nth-child(3) i{transition-delay:1s} #skp-home .live .ax-btns b:first-child{animation:none;background:var(--c);color:var(--navy);border-color:transparent;transition:background .5s var(--ease) 1.2s,color .5s 1.2s} @media (prefers-reduced-motion: reduce){#skp-home .ls-track{animation:none}} /* ===== v9: content aligned with new-homepage ===== */ #skp-home .pg-num{display:block;font-size:13px;font-weight:700;color:var(--body);letter-spacing:0;margin-bottom:4px} #skp-home .pg-tab[aria-selected="true"] .pg-num{color:var(--ink)} #skp-home .mk-collect{font-style:normal;margin-left:6px;height:18px;padding:0 7px;border-radius:999px;background:var(--green);color:var(--navy);font-size:10.5px;line-height:18px;display:inline-block} #skp-home .mk-flowt{display:inline-block;height:28px;padding:0 12px;border-radius:9px;background:#fff;font-size:12px;font-weight:700;line-height:28px;box-shadow:0 2px 0 rgba(38,50,94,.08)} #skp-home .mk-bt{position:relative;font-size:13px;font-weight:700;color:rgba(255,255,255,.9)} #skp-home .mk2 .mk-portal{width:54%} #skp-home .mk2 .mk-b2{right:0;top:0;width:43%} #skp-home .mk2 .mk-ban .bars{opacity:.9} #skp-home .mk-scoutc{right:0;bottom:2%;max-width:62%;height:auto;min-height:34px;padding:8px 14px;font-weight:600;transition-delay:.6s!important} #skp-home .mk-scoutc b{font-weight:800} #skp-home .mk-scoutc .spk{width:15px;height:15px;color:#6A47EE} #skp-home .mk3 .mk-sk{left:6%;right:6%;top:4%;bottom:4%;padding:20px 22px} #skp-home .sk-h{display:flex;gap:10px;margin-bottom:16px} #skp-home .sk-h i{height:12px;width:34%;border-radius:999px;background:#E7EAF3} #skp-home .sk-h i:last-child{width:16%;margin-left:auto;background:var(--pink-t,#FEDFFE)} #skp-home .sk-r{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #EEF0F6} #skp-home .sk-r>i{width:30px;height:30px;border-radius:9px;background:var(--a);flex:none} #skp-home .sk-r span{flex:1;display:grid;gap:6px} #skp-home .sk-r span b{display:block;height:8px;border-radius:999px;background:#E7EAF3} #skp-home .sk-r span b:first-child{width:45%;background:#D7DBE8} #skp-home .sk-r span b:last-child{width:0;background:var(--a);transition:width 1.2s var(--ease) .5s} #skp-home .on .sk-r span b:last-child{width:var(--w)} #skp-home .sk-r em{width:40px;height:22px;border-radius:999px;background:#F0F2F7;display:grid;place-items:center} #skp-home .sk-r em b{width:18px;height:6px;border-radius:999px;background:#C9CEDD} #skp-home .mk4 .mk-lines path{stroke:rgba(255,255,255,.45)} #skp-home .nd{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:18px;background:var(--a);box-shadow:0 18px 40px -16px rgba(0,0,0,.6),inset 0 0 0 4px rgba(255,255,255,.9);opacity:0;transform:scale(.6);transition:opacity .5s,transform .7s var(--ease)} #skp-home .on .nd{opacity:1;transform:none} #skp-home .nd0{left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:22px} #skp-home .nd1{left:19%;top:23%;transition-delay:.2s} #skp-home .nd2{left:81%;top:20%;transition-delay:.35s} #skp-home .nd3{left:86%;top:67%;transition-delay:.5s} #skp-home .nd4{left:21%;top:78%;transition-delay:.65s} #skp-home .pr-panel .pr-note{grid-column:2;margin-top:8px} @media (max-width:900px){#skp-home .pr-panel .pr-note{grid-column:auto}#skp-home .mk3,#skp-home .mk4{height:280px;display:block}#skp-home .mk3 .mk-sk{position:absolute}#skp-home .mk4 .mk-lines{display:block}} /* testimonials as in Webflow */ #skp-home .t-meet{margin-top:22px} #skp-home .t-meet svg{width:15px;height:15px} #skp-home .is-co .t-photo i{background-image:none} #skp-home .is-co .t-photo b,#skp-home .is-co .t-logo{display:none!important} #skp-home .t-card{position:absolute;left:50%;top:50%;width:178px;height:150px;margin:-75px 0 0 -89px;border-radius:26px;background:#fff;display:grid;place-items:center;padding:20px;box-shadow:0 24px 50px -24px rgba(38,50,94,.55)} #skp-home .t-card .lg{background:var(--navy);max-width:100%} #skp-home .t-card img{max-width:100%;max-height:100%;object-fit:contain} #skp-home .t-word{font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--navy)} #skp-home .t-one{margin:0 0 26px;font-size:clamp(18px,1.6vw,22px);line-height:1.5;font-weight:500;letter-spacing:-.015em;color:var(--ink);max-width:62ch} #skp-home .t-who{display:flex;flex-direction:column;gap:2px} #skp-home .t-who b{font-size:16px} #skp-home .t-role{font-size:14.5px;color:var(--body)} #skp-home .t-dot{width:14px;height:14px;padding:0;border-radius:999px;border:2px solid var(--line);background:transparent} #skp-home .t-dot[aria-current="true"]{background:var(--c);border-color:var(--c)} #skp-home .t-dot .bar{display:none} #skp-home .t-orgs{gap:10px;align-items:center} #skp-home .f-cta{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 70px;margin-bottom:60px;border-bottom:1px solid rgba(255,255,255,.12)} #skp-home .f-cta-ic{width:56px;height:52px;margin-bottom:18px} #skp-home .f-cta-ic svg{width:100%;height:100%} #skp-home .f-cta h2{--tc:#fff;color:#fff;font-size:clamp(30px,3.4vw,46px);margin:0 0 14px} #skp-home .f-cta p{margin:0;max-width:56ch;color:rgba(255,255,255,.75)} #skp-home .f-cta .btn-primary{background:#fff;color:var(--navy)} #skp-home .f-soc{display:flex;gap:8px;margin-left:auto} #skp-home .f-soc a{width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;transition:background .3s,border-color .3s} #skp-home .f-soc a:hover{background:rgba(255,255,255,.1);border-color:#fff} #skp-home .f-soc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #skp-home .f-soc a:last-child svg{fill:currentColor;stroke:none} #skp-home .f-bottom{align-items:center} /* ===== v10: Webflow-matched interface cards ===== */ #skp-home .pr-chips{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:12px 26px;margin:0 0 18px} #skp-home .pr-chips li{height:auto;padding:0;background:none;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;gap:10px;font-size:14.5px;font-weight:600} #skp-home .pr-chips svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--c);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} #skp-home .mk3,#skp-home .mk4{height:auto} #skp-home .ma{position:relative;left:auto;top:auto;padding:0;overflow:hidden;border-radius:16px;font-size:12.5px;color:#26325E} #skp-home .ma-h{background:#24324A;color:#fff;font-weight:700;font-size:13.5px;padding:12px 18px} #skp-home .ma-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 18px;border-bottom:1px solid #E8EBF2} #skp-home .ma-sub b{font-size:13px} #skp-home .ma-agent{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:7px;background:#EEF1F8;font-weight:600;font-size:12px;color:#3D4A7A} #skp-home .ma-sp{width:12px;height:12px;fill:none;stroke:#6A47EE;stroke-width:2;stroke-linejoin:round} #skp-home .ma-row{display:grid;grid-template-columns:1.25fr 1fr .9fr;align-items:center;min-height:38px;border-bottom:1px solid #EEF0F5} #skp-home .ma-row>span{padding:0 18px} #skp-home .ma-row .ma-ai{align-self:stretch;display:flex;align-items:center;gap:5px;background:#F4F1FD} #skp-home .ma-head{min-height:34px;background:#F7F8FB;color:#6B7290;font-weight:500} #skp-home .ma-head .ma-ai{background:#ECE6FB;color:#5B3FD0;font-weight:600} #skp-home .ma-row em{font-style:normal;opacity:0;transform:translateX(-4px);transition:opacity .4s,transform .5s var(--ease);transition-delay:calc(.5s + var(--d) * .25s)} #skp-home .on .ma-row em{opacity:1;transform:none} #skp-home .ma4 .ma-ai em{font-size:12px} #skp-home .ma-st{display:inline-block;font-style:normal;height:24px;padding:0 9px;border-radius:6px;background:#E9EEFB;color:#3D4A7A;font-size:11.5px;font-weight:600;line-height:24px} #skp-home .ma-st.ok{background:#DDF6DF;color:#1E6B2A} #skp-home .ma-res{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:#F7F8FB;border-bottom:1px solid #EEF0F5} #skp-home .ma-res b{font-size:12.5px} #skp-home .ma-res span{color:#6B7290;font-size:12px} #skp-home .ma-sc{display:grid;grid-template-columns:1.25fr 1.2fr .7fr;align-items:center;min-height:38px;padding:0 18px;border-bottom:1px solid #EEF0F5;opacity:0;transition:opacity .5s;transition-delay:calc(.6s + var(--d) * .2s)} #skp-home .ma-sc:last-child{border-bottom:0} #skp-home .on .ma-sc{opacity:1} #skp-home .ma-rv{color:#6B7290;font-size:12px} #skp-home .ma-sc b{justify-self:end;font-size:13px} @media (min-width:900px) and (max-height:840px){#skp-home .ma-row,#skp-home .ma-sc{min-height:32px}#skp-home .ma-h,#skp-home .ma-sub{padding-top:9px;padding-bottom:9px}} @media (max-width:900px){#skp-home .mk3,#skp-home .mk4{height:auto}#skp-home .mk3 .ma,#skp-home .mk4 .ma{position:relative}} #skp-home .t-who .t-role{margin:0;opacity:1} #skp-home .t-card.photo{width:168px;height:188px;margin:-94px 0 0 -84px;padding:0;overflow:hidden} #skp-home .t-card.photo img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover} /* ===== hero orbit ===== */ #skp-home .orbit{position:fixed;inset:0;z-index:1;pointer-events:none} #skp-home .orbit-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible} #skp-home .o-out{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1.2;stroke-dasharray:3 7} #skp-home .o-in{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1} #skp-home .o-sp line{stroke:rgba(255,255,255,.26);stroke-width:1.2;stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);transition:stroke-dashoffset 1s var(--ease) calc(var(--i) * .08s + .2s)} #skp-home .o-sp circle{opacity:0;transition:opacity .5s calc(var(--i) * .08s + .7s)} #skp-home .orbit.in .o-sp line{stroke-dashoffset:0} #skp-home .orbit.in .o-sp circle{opacity:1} #skp-home .o-chip{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 14px;border-radius:12px;background:#fff;color:var(--navy);font-size:15.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 16px 34px -18px rgba(0,0,0,.6);opacity:0;transform:translate(-50%,-50%) scale(.88);transition:opacity .6s var(--ease) calc(var(--i) * .08s + .4s),transform .8s var(--ease) calc(var(--i) * .08s + .4s)} #skp-home .o-chip i{width:11px;height:11px;border-radius:999px;background:var(--c)} #skp-home .orbit.in .o-chip{opacity:1;transform:translate(-50%,-50%)} #skp-home .o-cap{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#fff;width:max-content;max-width:42vw;opacity:0;transition:opacity .8s var(--ease) 1s} #skp-home .orbit.in .o-cap{opacity:1} #skp-home .o-cap b,#skp-home .orbit-cap-m b{font-size:clamp(20px,1.7vw,26px);font-weight:800;letter-spacing:-.04em;line-height:1.1} #skp-home .o-cap span,#skp-home .orbit-cap-m span{font-size:15px;color:rgba(255,255,255,.75)} #skp-home .o-cap em,#skp-home .orbit-cap-m em{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-style:normal;font-size:14px;color:rgba(255,255,255,.82)} #skp-home .o-cap svg,#skp-home .orbit-cap-m svg{width:16px;height:16px;fill:none;stroke:#B9A8FF;stroke-width:1.8;stroke-linejoin:round} #skp-home .orbit.stk .o-chip{height:32px;padding:0 12px 0 10px;font-size:12.5px;gap:7px;border-radius:10px} #skp-home .orbit.stk .o-chip i{width:8px;height:8px} #skp-home .orbit-cap-m{display:none} @media (max-width:900px),(max-aspect-ratio:11/10){#skp-home .orbit-cap-m{display:flex;flex-direction:column;gap:4px;margin-top:26px}} @media (prefers-reduced-motion: reduce){#skp-home .o-chip,#skp-home .o-cap,#skp-home .o-sp line,#skp-home .o-sp circle{transition:none}} /* ===== v13: interface cards matched to Webflow (steps 1, 2, 4) ===== */ #skp-home .mk1,#skp-home .mk2,#skp-home .mk4{height:auto} #skp-home .ma-2col{display:grid;grid-template-columns:1fr 1.15fr;border-bottom:1px solid #E8EBF2} #skp-home .ma-l{background:#F6F7FB;padding:16px 18px;border-right:1px solid #E8EBF2;display:flex;flex-direction:column} #skp-home .ma-r{padding:16px 18px;display:flex;flex-direction:column} #skp-home .ma-cap{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6B7290;margin-bottom:6px} #skp-home .ma-t{font-size:14px;font-weight:700;margin-bottom:8px} #skp-home .ma-t2{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:4px} #skp-home .ma-lab{font-size:11.5px;color:#6B7290;margin:8px 0 5px} #skp-home .ma-in{display:block;height:32px;padding:0 10px;border-radius:7px;background:#fff;border:1px solid #DDE1EA;font-size:12.5px;line-height:31px;white-space:nowrap;overflow:hidden} #skp-home .ma-mut{font-size:11.5px;color:#6B7290} #skp-home .ma-txt{font-size:12.5px;color:#4B5476;line-height:1.4} #skp-home .ma-foot{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#fff} #skp-home .nc-ic{width:18px;height:18px;flex:none;fill:none;stroke:#5B6CE0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #skp-home .nc-foot>span{display:flex;flex-direction:column;gap:1px} #skp-home .nc-foot b{font-size:13px} #skp-home .nc-prog{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:12px 0 6px;height:2px;background:#E7EAF1} #skp-home .nc-prog i{display:block;height:2px;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)} #skp-home .nc-prog i:nth-child(1),#skp-home .nc-prog i:nth-child(2){background:#5DBB72} #skp-home .nc-prog i:nth-child(3){background:#5B6CE0} #skp-home .on .nc-prog i{transform:scaleX(1)} #skp-home .on .nc-prog i:nth-child(1){transition-delay:.5s} #skp-home .on .nc-prog i:nth-child(2){transition-delay:1.1s} #skp-home .on .nc-prog i:nth-child(3){transition-delay:1.7s} #skp-home .nc-st{display:grid;grid-template-columns:repeat(3,1fr);font-size:11.5px;font-weight:500;margin-bottom:4px} #skp-home .nc-st span:nth-child(-n+2){color:#3E9A55} #skp-home .nc-st span:nth-child(3){color:#4C5CD6} #skp-home .ma-hs{display:flex;justify-content:space-between;align-items:center} #skp-home .ma-hs em{font-style:normal;font-weight:500;font-size:12px;color:rgba(255,255,255,.75)} #skp-home .ap-l{background:#EEF0FB;justify-content:flex-start} #skp-home .ap-k{font-size:11px;letter-spacing:.08em;color:#4B5476;margin-bottom:12px} #skp-home .ap-big{font-size:clamp(17px,1.5vw,21px);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:auto} #skp-home .ap-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:18px;height:32px;padding:0 12px;border-radius:6px;background:#24324A;color:#fff;font-size:12px;font-weight:600} #skp-home .ap-btn svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round} #skp-home .ap-ai{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:7px;background:#EFEAFB;color:#4C3AA8;font-size:12px;font-weight:500;margin-bottom:10px} #skp-home .on .ap-ai{animation:aiPulse 1.2s var(--ease) .5s 1} @keyframes aiPulse{40%{box-shadow:0 0 0 5px rgba(106,71,238,.18)}100%{box-shadow:0 0 0 0 rgba(106,71,238,0)}} #skp-home .ap-f{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border:1px solid #DDE1EA;border-radius:7px;margin-bottom:8px} #skp-home .ap-v{display:flex;align-items:center;gap:7px;font-size:12.5px;opacity:0;transition:opacity .5s} #skp-home .on .ap-v{opacity:1} #skp-home .on .ap-f:nth-of-type(3) .ap-v{transition-delay:1.1s} #skp-home .on .ap-f:nth-of-type(4) .ap-v{transition-delay:1.5s} #skp-home .ck{width:13px;height:13px;flex:none;fill:none;stroke:#4C5CD6;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} #skp-home .ap-act{display:flex;align-items:center;justify-content:space-between;margin-top:4px} #skp-home .ap-act b{height:30px;padding:0 12px;border-radius:7px;background:#E9EEFB;color:#3D4A7A;font-size:12px;line-height:30px} #skp-home .ap-foot{background:#F6F7FB;gap:8px} #skp-home .ap-foot b{font-size:12.5px} #skp-home .ew-2{grid-template-columns:.85fr 1.25fr} #skp-home .ew-k{margin-bottom:8px} #skp-home .ew-co{display:flex;align-items:center;gap:9px;height:34px;padding:0 10px;margin:0 -8px;border-radius:7px;font-size:12.5px;color:#26325E} #skp-home .ew-co i{width:11px;height:11px;border-radius:999px;border:1.5px solid #9CA3BA} #skp-home .ew-co.on{background:#E9EDFA;box-shadow:inset 3px 0 0 #5B6CE0;font-weight:600} #skp-home .ew-co.on i{border:3px solid #5B6CE0;background:#fff} #skp-home .ew-r{padding:0} #skp-home .ew-t{padding:14px 16px 10px;margin:0;border-bottom:1px solid #EEF0F5} #skp-home .ew-row{display:grid;grid-template-columns:1.4fr .8fr .7fr;align-items:center;min-height:36px;padding:0 16px;border-bottom:1px solid #EEF0F5;font-size:12.5px} #skp-home .ew-row:last-child{border-bottom:0} #skp-home .ew-head{min-height:30px;background:#F7F8FB;color:#6B7290;font-size:11.5px} #skp-home .tg{display:inline-block;position:relative;width:26px;height:15px;border-radius:999px;background:#DDE1EA;transition:background .4s} #skp-home .tg::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:999px;background:#fff;transition:transform .4s var(--ease)} #skp-home .on .tg-on{background:#5DBB72;transition-delay:.8s} #skp-home .on .tg-on::after{transform:translateX(11px);transition-delay:.8s} #skp-home .ew-foot{justify-content:space-between} #skp-home .ew-av{width:32px;height:32px;border-radius:999px;background:#EEF0F5;display:grid;place-items:center;font-size:11px;color:#4B5476;flex:none} #skp-home .ew-who{display:flex;flex-direction:column;flex:1} #skp-home .ew-who b{font-size:13px} #skp-home .ew-cr{display:flex;flex-direction:column;align-items:flex-end;gap:2px} #skp-home .ew-cr b{font-size:13px} #skp-home .ew-cr i{display:block;width:84px;height:3px;border-radius:999px;background:#E7EAF1;overflow:hidden} #skp-home .ew-cr i b{display:block;height:100%;width:0;background:#8F7CF7;transition:width 1s var(--ease) 1.2s} #skp-home .on .ew-cr i b{width:30%} @media (min-width:900px) and (max-height:840px){#skp-home .ma-l,#skp-home .ma-r{padding:11px 14px}#skp-home .ma-lab{margin:5px 0 4px}#skp-home .ma-in{height:28px;line-height:27px}#skp-home .ap-f{padding:6px 9px}#skp-home .ma-foot{padding:9px 14px}#skp-home .ew-row{min-height:31px}#skp-home .ew-co{height:30px}} @media (max-width:640px){#skp-home .ma-2col{grid-template-columns:1fr}#skp-home .ma-l{border-right:0;border-bottom:1px solid #E8EBF2}} /* ===== v14 ===== */ /* buttons: no coloured underline */ #skp-home .btn::after{display:none} /* links: a quiet underline and a pointer that fills with the Skipso colours, one after another */ #skp-home .tlink{background:linear-gradient(color-mix(in srgb,var(--ink) 22%,transparent),color-mix(in srgb,var(--ink) 22%,transparent)) 0 100%/100% 1px no-repeat;gap:12px;padding-bottom:6px} #skp-home .tlink:hover{background-size:100% 1px;gap:14px} #skp-home .tl-ic{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);overflow:hidden;isolation:isolate;transition:background .35s,border-color .35s,transform .35s cubic-bezier(.2,.8,.2,1)} #skp-home .tl-ic i{position:absolute;width:12px;height:3px;border-radius:2px;transform:scaleX(0);transition:transform .5s cubic-bezier(.3,1.5,.5,1)} #skp-home .tl-ic i:nth-child(1){top:7px;left:9px;background:var(--orange);transform-origin:0 50%} #skp-home .tl-ic i:nth-child(2){top:11px;left:7px;background:var(--green);transform-origin:100% 50%;transition-delay:.06s} #skp-home .tl-ic i:nth-child(3){top:15px;left:9px;background:var(--pink);transform-origin:0 50%;transition-delay:.12s} #skp-home .tl-ic i:nth-child(4){top:19px;left:7px;background:var(--blue);transform-origin:100% 50%;transition-delay:.18s} #skp-home .tlink .tl-ic svg{position:relative;z-index:1;width:14px;height:14px;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s} #skp-home .tlink:hover .tl-ic{background:var(--ink);border-color:transparent} #skp-home .tlink:hover .tl-ic i{transform:scaleX(1)} #skp-home .tlink:hover .tl-ic svg{transform:translateX(20px);opacity:0} #skp-home .tlink:not(:hover) .tl-ic i{transition-delay:0s;transition-duration:.25s} /* AI icon */ #skp-home .ai-ic{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* hero: globe labels */ #skp-home .nlabel{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px 0 12px;border-radius:12px;background:#fff;color:#26325E;font-size:14.5px;font-weight:600;letter-spacing:-.01em;box-shadow:0 16px 34px -18px rgba(0,0,0,.6);transform-origin:50% 50%;will-change:transform,opacity} #skp-home .nlabel i{width:10px;height:10px;border-radius:999px;background:var(--c)} @media (max-width:900px),(max-aspect-ratio:11/10){#skp-home .nlabel{height:30px;padding:0 11px 0 9px;font-size:12px;gap:6px;border-radius:9px}#skp-home .nlabel i{width:7px;height:7px}} /* hero: Select. Connect. Engage. comes out of the mark */ #skp-home .sce{display:flex;align-items:center;gap:16px;margin-top:50px;min-height:64px} #skp-home .sce-mark{width:46px;height:43px;flex:none;cursor:pointer} #skp-home .sce-mark svg{width:100%;height:100%;overflow:visible;display:block} #skp-home .sce-mark g{transform-box:view-box;transform-origin:4px 77px;transition:transform .75s cubic-bezier(.3,1.45,.45,1)} #skp-home .sce.open .m-top{transform:rotate(-17deg) translateY(-6px)} #skp-home .sce.open .m-bot{transform:rotate(17deg) translateY(6px)} #skp-home .sce-txt{display:flex;flex-direction:column;gap:3px;clip-path:inset(-10px 100% -10px 0);transform:translateX(-26px) scale(.96);transform-origin:0 50%;opacity:0;transition:clip-path 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1),opacity .35s} #skp-home .sce.out .sce-txt{clip-path:inset(-10px -10px -10px 0);transform:none;opacity:1} #skp-home .sce-txt b{font-size:clamp(19px,1.6vw,23px);font-weight:800;letter-spacing:-.035em;color:#fff;line-height:1.15} #skp-home .sce-txt span{font-size:14.5px;color:var(--body)} #skp-home .sce-txt em{display:inline-flex;align-items:center;gap:7px;margin-top:4px;font-style:normal;font-size:13.5px;color:rgba(255,255,255,.82)} #skp-home .sce-txt em .ai-ic{color:var(--blue);width:16px;height:16px} @media (prefers-reduced-motion:reduce){#skp-home .sce-txt{clip-path:none;transform:none;opacity:1;transition:none}} /* programs tabs: no nail */ #skp-home .pg-bar{display:none} #skp-home .pg-wrap{grid-template-columns:1fr;gap:14px} #skp-home .pg-tabs{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} #skp-home .pg-tab{padding:18px 24px 20px} #skp-home .pg-tab:hover{transform:translateY(-3px)} #skp-home .pg-tt{display:block;font-size:clamp(16px,1.3vw,18px);line-height:1.25;letter-spacing:-.025em;text-wrap:balance} #skp-home .pg-num{margin-bottom:8px} #skp-home .pg-tab .dz{right:6px;top:6px;transform:scale(.5);transform-origin:100% 0} @media (max-width:760px){#skp-home .pg-tabs{display:flex;overflow-x:auto;scrollbar-width:none}#skp-home .pg-tab{flex:0 0 min(78%,300px)}} /* practice: not pinned, compact, real tabs, cone kept quiet */ #skp-home .pr{padding:150px 0;isolation:isolate} #skp-home .pr::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 60% at 28% 45%,rgba(38,50,94,.94) 0%,rgba(38,50,94,.72) 45%,rgba(38,50,94,.25) 80%)} #skp-home .pr>*{position:relative;z-index:1} #skp-home .pr-stage{min-height:0;display:block;padding:0} #skp-home .pr-top{margin-bottom:34px} #skp-home .pr-nav{display:flex;align-items:center;gap:14px;margin-bottom:34px} #skp-home .pr-tabs{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;list-style:none;margin:0;padding:5px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)} #skp-home .pr-tabs .step{position:relative;display:flex;flex-direction:row;align-items:center;gap:10px;height:48px;padding:0 16px;border-radius:12px;background:transparent;color:rgba(255,255,255,.72);font:600 15px/1.2 var(--font);text-align:left;cursor:pointer;overflow:hidden;transition:background .35s,color .35s} #skp-home .pr-tabs .step:hover{color:#fff;background:rgba(255,255,255,.06)} #skp-home .pr-tabs .step-name{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:inherit;text-shadow:none;transition:none} #skp-home .pr-tabs .step.active{background:#fff;color:#26325E} #skp-home .pr-tabs .step.active .step-name,#skp-home .pr-tabs .step.done .step-name{color:inherit} #skp-home .hero h1{font-size:clamp(40px,min(4.9vw,9vh),78px)} #skp-home .st-dot{width:9px;height:9px;flex:none;border-radius:3px;transform:rotate(45deg);background:var(--sc)} #skp-home .st-bar{position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--sc);transform:scaleX(0);transform-origin:0 50%} #skp-home .pr-arrows{display:flex;gap:8px} #skp-home .pr-arrows button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .3s,border-color .3s} #skp-home .pr-arrows button:hover{background:rgba(255,255,255,.1);border-color:#fff} #skp-home .pr-arrows svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #skp-home .pr-txt h3{font-size:clamp(22px,1.9vw,28px);line-height:1.15} #skp-home .pr-txt>p{font-size:16px} #skp-home .pr-chips li{font-size:14px} #skp-home .pr-ai{box-shadow:none;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);border-radius:14px;align-items:center;font-size:14px} #skp-home .pr-ai .ai-ic{color:var(--c);width:18px;height:18px} #skp-home .pr-foot{display:flex;justify-content:flex-end;margin-top:34px} #skp-home .pr-foot .tlink{color:#fff} @media (max-width:900px){#skp-home .pr-tabs{display:flex;overflow-x:auto;scrollbar-width:none}#skp-home .pr-tabs li{flex:0 0 auto}#skp-home .pr-arrows{display:none}#skp-home .pr::before{background:linear-gradient(180deg,#26325E 0%,rgba(38,50,94,.8) 40%,rgba(38,50,94,.55) 100%)}} @media (min-width:900px) and (max-height:840px){#skp-home .pr-stage{padding:0}#skp-home .pr-stage h2{font-size:clamp(34px,4.5vw,62px);margin:22px 0 0}} /* why + AI, one story */ #skp-home .wa{padding:150px 0} #skp-home .wa-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,84px);align-items:start} #skp-home .wa-l{position:sticky;top:120px} #skp-home .wa-l h2{margin:22px 0 0} #skp-home .wa-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:40px 40px} #skp-home .wa-grid h3{font-size:19px;font-weight:700;letter-spacing:-.025em;line-height:1.2;margin:18px 0 8px} #skp-home .wa-grid p{margin:0;color:var(--body);font-size:15.5px;line-height:1.55} #skp-home .wa-bridge{display:flex;align-items:center;gap:14px;margin:96px 0} #skp-home .wa-bridge>i{position:relative;flex:1;height:1px;background:var(--line);overflow:hidden} #skp-home .wa-bridge>i b{position:absolute;inset:0;background:linear-gradient(90deg,var(--orange),var(--green),var(--pink),var(--blue));transform-origin:0 50%} #skp-home .wa-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 11px;border-radius:999px;border:1px solid var(--card-line);background:var(--card);font-size:13.5px;font-weight:700;color:var(--ink)} #skp-home .wa-chip>svg{width:18px;height:17px} #skp-home .wa-chip.ai .ai-ic{color:var(--blue)} #skp-home .wa .ax-st{max-width:none;font-size:clamp(22px,2.2vw,32px)} #skp-home .wa-flow{position:relative;list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px} #skp-home .wa-line{position:absolute;left:12px;right:12px;top:11px;height:2px;background:var(--line);border-radius:2px;overflow:hidden} #skp-home .wa-line i{display:block;height:100%;transform-origin:0 50%;background:linear-gradient(90deg,var(--orange),var(--green),var(--pink))} #skp-home .wa-n{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;background:var(--paper-2)} #skp-home .wa-n i{width:13px;height:13px;border-radius:4px;transform:rotate(45deg);background:var(--c)} #skp-home .wa-flow h3{font-size:20px;font-weight:800;letter-spacing:-.035em;margin:18px 0 6px} #skp-home .wa-flow p{margin:0;color:var(--body);font-size:15.5px;line-height:1.5} @media (max-width:1060px){#skp-home .wa-row{grid-template-columns:1fr}#skp-home .wa-l{position:static}#skp-home .wa-flow{grid-template-columns:1fr}#skp-home .wa-line{display:none}#skp-home .wa{padding:100px 0}#skp-home .wa-bridge{margin:64px 0}} @media (max-width:640px){#skp-home .wa-grid{grid-template-columns:1fr}} /* testimonials: logos always fit their card */ #skp-home .t-card img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain} #skp-home .t-card.photo img{object-fit:cover} /* hero never collides with the brand bars below it */ #skp-home .hero{padding-bottom:max(150px,16vh)} #skp-home .sweep-1{top:-64px} @media (max-height:760px) and (min-aspect-ratio:11/10){#skp-home .hero{padding-bottom:150px}} @media (max-width:760px){#skp-home .sweep-1{top:-40px}#skp-home .hero{padding-bottom:110px}} #skp-home .jl{padding-top:110px} /* v22: no colour underline, matte everywhere */ #skp-home .hm::after{display:none} #skp-home .wa .wa-n{background:#26325E} #skp-home .wa,#skp-home .ent{position:relative;isolation:isolate} #skp-home .wa::before,#skp-home .ent::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 70% at 26% 50%,rgba(38,50,94,.9) 0%,rgba(38,50,94,.55) 55%,rgba(38,50,94,0) 85%)} #skp-home .ent::before{background:radial-gradient(75% 80% at 40% 50%,rgba(38,50,94,.88) 0%,rgba(38,50,94,.5) 60%,rgba(38,50,94,0) 90%)} #skp-home .wa>*,#skp-home .ent>*{position:relative;z-index:1} /* testimonial logos always stay inside their white card */ #skp-home .t-card{overflow:hidden} #skp-home .t-card img{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);object-fit:contain} #skp-home .t-card.photo img{inset:0;width:100%;height:100%;object-fit:cover} /* v24: the AI network sits in the empty left column, under the headings */ #skp-home .wa::before{display:none} #skp-home .wa-slot{height:min(52vh,460px);margin-top:44px;pointer-events:none} @media (max-width:1060px){#skp-home .wa-slot{display:none}} /* ===== responsive ===== */ @media (max-width:1060px){ #skp-home .pillar-grid,#skp-home .ai-grid{grid-template-columns:1fr} #skp-home .pillar{min-height:auto} #skp-home .why-grid{grid-template-columns:repeat(2,1fr)} #skp-home .ent-grid{grid-template-columns:1fr} #skp-home .ent-aside{display:none} #skp-home .tcard{grid-template-columns:1fr} #skp-home .t-photo{transform:scale(.7);transform-origin:0 0;margin-bottom:-72px} #skp-home .f-grid{grid-template-columns:1fr 1fr} } @media (max-width:900px),(max-aspect-ratio:11/10){ #skp-home .hero{align-items:flex-end;padding-top:max(46svh,300px);padding-bottom:100px} #skp-home .hero-copy{max-width:680px} #skp-home .hero h1{font-size:clamp(38px,min(8.4vw,7.2vh),76px)} } @media (max-height:760px) and (min-aspect-ratio:11/10){ #skp-home .hero{padding-top:110px;padding-bottom:80px} #skp-home .used-by{margin-top:32px} #skp-home .cta-row{margin-top:28px} } @media (max-width:640px){ #skp-home{font-size:16px} #skp-home .why-grid,#skp-home .ent-details{grid-template-columns:1fr} #skp-home .pillars{padding:130px 0 100px} #skp-home .ai,#skp-home .why,#skp-home .ent,#skp-home .voices{padding:100px 0} #skp-home .clients{padding:100px 0 150px} #skp-home .f-grid{grid-template-columns:1fr} #skp-home .sh{margin-bottom:44px} #skp-home .scroll-cue{display:none} } @media (prefers-reduced-motion: reduce){ #skp-home *,#skp-home *::before,#skp-home *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} #skp-home .m-track{animation:none;flex-wrap:wrap;width:auto} #skp-home .marquee{-webkit-mask-image:none;mask-image:none} }