:root {
 --bg: #08090d;
 --panel: #11131a;
 --text: #f8f8fb;
 --muted: #a7a9b5;
 --line: rgba(255, 255, 255, .09);
 --violet: #8b5cf6;
 --violet2: #c084fc;
 --green: #93f7b1;
 --max: 1120px;
}

* {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body {
 margin: 0;
 font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 background: radial-gradient(circle at 50% -10%, rgba(139, 92, 246, .27), transparent 35%), var(--bg);
 color: var(--text);
 overflow-x: hidden;
}

a {
 text-decoration: none;
 color: inherit;
}

.wrap {
 width: min(var(--max), calc(100% - 36px));
 margin: auto;
}

nav {
 height: 76px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.brand {
 display: flex;
 align-items: center;
 gap: 10px;
 font-weight: 850;
 font-size: 20px;
 letter-spacing: -.04em;
}

.brandIcon {
 width: 38px;
 height: 38px;
 border-radius: 13px;
 display: grid;
 place-items: center;
 background: linear-gradient(135deg, var(--violet), #6d28d9);
 box-shadow: 0 10px 30px rgba(139, 92, 246, .32);
 font-size: 22px;
}

.navlink {
 color: var(--muted);
 font-size: 14px;
}

.hero {
 position: relative;
 min-height: 760px;
 display: grid;
 place-items: center;
 text-align: center;
 padding: 0 10px 110px;
}

.heroInner {
 position: relative;
 z-index: 3;
 max-width: 870px;
}

.badge {
 display: inline-flex;
 gap: 8px;
 align-items: center;
 padding: 9px 14px;
 border: 1px solid var(--line);
 background: rgba(255, 255, 255, .035);
 border-radius: 99px;
 color: #ddd;
 font-size: 13px;
 backdrop-filter: blur(10px);
}

.dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--green);
 box-shadow: 0 0 13px rgba(147, 247, 177, .8);
}

h1 {
 font-size: clamp(52px, 9vw, 105px);
 line-height: .92;
 letter-spacing: -.065em;
 margin: 24px 0 20px;
}

.grad {
 background: linear-gradient(105deg, #fff 15%, #ddd0ff 50%, var(--violet2));
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}

.lead {
 max-width: 680px;
 margin: auto;
 color: var(--muted);
 font-size: 19px;
 line-height: 1.65;
}

.actions {
 display: flex;
 justify-content: center;
 gap: 12px;
 flex-wrap: wrap;
 margin-top: 32px;
}

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 9px;
 padding: 15px 21px;
 border-radius: 15px;
 font-size: 15px;
 font-weight: 800;
 transition: .2s transform, .2s box-shadow;
}

.btn:hover {
 transform: translateY(-3px);
}

.primary {
 background: linear-gradient(135deg, #6d28d9, var(--violet));
 box-shadow: 0 18px 42px rgba(109, 40, 217, .35);
}

.secondary {
 border: 1px solid var(--line);
 background: rgba(255, 255, 255, .04);
}

.note {
 color: #737583;
 font-size: 12px;
 margin-top: 13px;
}

.cat {
 position: absolute;
 z-index: 1;
 pointer-events: none;
 user-select: none;
 filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .45));
 animation: float 5s ease-in-out infinite;
}

.c1 {
 left: 3%;
 top: 17%;
 font-size: 74px;
}

.c2 {
 right: 4%;
 top: 21%;
 font-size: 58px;
 animation-delay: -1.4s;
}

.c3 {
 left: 11%;
 bottom: 8%;
 font-size: 46px;
 animation-delay: -3s;
}

.c4 {
 right: 11%;
 bottom: 7%;
 font-size: 50px;
 animation-delay: -2.2s;
}

.pawOrbit {
 position: absolute;
 width: min(730px, 90vw);
 aspect-ratio: 1;
 border: 1px solid rgba(192, 132, 252, .08);
 border-radius: 50%;
 animation: spin 26s linear infinite;
}

.pawOrbit:before {
 /*
 content: '🐾';
 */
 position: absolute;
 top: -14px;
 left: 50%;
 transform: translateX(-50%);
 opacity: .5;
 font-size: 25px;
}

section {
 padding: 100px 0;
}

.eyebrow {
 font-size: 12px;
 letter-spacing: .16em;
 text-transform: uppercase;
 color: #b79bff;
 font-weight: 900;
 margin-bottom: 12px;
}

.sectionTitle {
 font-size: clamp(35px, 5vw, 58px);
 letter-spacing: -.05em;
 line-height: 1;
 margin: 0;
}

.sectionLead {
 color: var(--muted);
 line-height: 1.65;
 max-width: 680px;
 margin-top: 17px;
}

.cards {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 margin-top: 38px;
}

.card {
 padding: 28px;
 border: 1px solid var(--line);
 border-radius: 24px;
 background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025));
 box-shadow: 0 25px 75px rgba(0, 0, 0, .25);
}

.ico {
 width: 48px;
 height: 48px;
 border-radius: 15px;
 background: rgba(139, 92, 246, .14);
 display: grid;
 place-items: center;
 font-size: 24px;
 margin-bottom: 18px;
}

.card h3 {
 font-size: 19px;
 margin: 0 0 9px;
}

.card p {
 font-size: 14px;
 line-height: 1.65;
 color: var(--muted);
 margin: 0;
}

.trialSteps {
 display: flex;
 flex-wrap: wrap;
 gap: 9px;
 margin-top: 25px;
}

.trialSteps span {
 padding: 9px 12px;
 border: 1px solid var(--line);
 border-radius: 12px;
 background: rgba(255, 255, 255, .035);
 font-size: 13px;
 color: #c5c6cf;
}

.trialSteps b {
 color: #c4b5fd;
 margin-right: 5px;
}

.hero .badge {
 font-weight: 900;
 letter-spacing: .04em;
}

.hero .note {
 font-size: 13px;
}

.hero .note b {
 color: #ddd6fe;
}

.offer .sectionLead {
 max-width: 760px;
}

.offer .price {
 font-size: 16px;
}

.offer .price strong {
 font-size: 34px;
 color: #a7f3d0;
}

.offer:before {
 content: '30';
 position: absolute;
 right: 80px;
 top: -35px;
 font-size: 210px;
 font-weight: 950;
 line-height: 1;
 color: rgba(192, 132, 252, .055);
 pointer-events: none;
}

.offer {
 position: relative;
 overflow: hidden;
 padding: 52px;
 border: 1px solid rgba(192, 132, 252, .23);
 border-radius: 30px;
 background: radial-gradient(circle at 90% 15%, rgba(109, 40, 217, .28), transparent 35%), radial-gradient(circle at 10% 90%, rgba(167, 139, 250, .11), transparent 40%), rgba(255, 255, 255, .04);
 box-shadow: 0 30px 90px rgba(0, 0, 0, .36);
}

.offer:after {
 content: '😼';
 position: absolute;
 right: 35px;
 bottom: -30px;
 font-size: 135px;
 opacity: .10;
 transform: rotate(-7deg);
}

.offerGrid {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 30px;
 align-items: center;
}

.price {
 margin-top: 18px;
 color: #c0c1ca;
}

.price strong {
 font-size: 27px;
 color: #fff;
}

.steps {
 display: grid;
 gap: 13px;
 max-width: 760px;
 margin-top: 34px;
}

.step {
 display: grid;
 grid-template-columns: 44px 1fr;
 gap: 15px;
 align-items: center;
 padding: 17px;
 border: 1px solid var(--line);
 border-radius: 18px;
 background: rgba(255, 255, 255, .03);
}

.num {
 width: 42px;
 height: 42px;
 border-radius: 13px;
 display: grid;
 place-items: center;
 background: rgba(139, 92, 246, .14);
 color: #cabaff;
 font-weight: 900;
}

.step b {
 display: block;
 margin-bottom: 4px;
}

.step span {
 font-size: 14px;
 color: var(--muted);
}

footer {
 padding: 40px 0 54px;
 color: #747682;
 font-size: 13px;
 border-top: 1px solid var(--line);
}

.footerRow {
 display: flex;
 justify-content: space-between;
 gap: 20px;
}

.header-wrap {
    display: block;
    height: 140px;
}

@keyframes float {

 0%,
            100% {
  transform: translateY(0) rotate(-3deg);
 }

 50% {
  transform: translateY(-18px) rotate(4deg);
 }
}

@keyframes spin {
 to {
  transform: rotate(360deg);
 }
}

@media(max-width:820px) {
 .hero {
  min-height: 720px;
 }

 .header-wrap {
    height: 100px;
 }

 .cards {
  grid-template-columns: 1fr;
 }

 .offer {
  padding: 34px 26px;
 }

 .offerGrid {
  grid-template-columns: 1fr;
 }

 .c1 {
  left: -8%;
  font-size: 56px;
 }

 .c2 {
  right: -5%;
  font-size: 46px;
 }

 .c3 {
  left: 1%;
 }

 .c4 {
  right: 1%;
 }
}

@media(max-width:520px) {
 .wrap {
  width: calc(100% - 28px);
 }

 .navlink {
  display: none;
 }

 h1 {
  font-size: 58px;
 }

 .lead {
  font-size: 17px;
 }

 .btn {
  width: 100%;
 }

 .actions {
  gap: 10px;
 }

 .footerRow {
  flex-direction: column;
 }

 .cat {
  opacity: .65;
 }
}

.catZone {
 padding-top: 20px;
}

.catPanel {
 display: grid;
 grid-template-columns: .85fr 1.15fr;
 gap: 0;
 overflow: hidden;
 border: 1px solid var(--line);
 border-radius: 30px;
 background: linear-gradient(135deg, rgba(139, 92, 246, .09), rgba(255, 255, 255, .025));
 box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
}

.catArt {
 min-height: 350px;
 display: grid;
 place-items: center;
 position: relative;
 background: radial-gradient(circle at 50% 45%, rgba(192, 132, 252, .18), transparent 30%), linear-gradient(180deg, #15131f, #0b0b10);
}

.sleepCat {
 font-size: 118px;
 filter: drop-shadow(0 22px 35px rgba(0, 0, 0, .55));
 animation: breathe 2.8s ease-in-out infinite;
}

.star {
 position: absolute;
 right: 32px;
 top: 30px;
 color: #ddd6fe;
 animation: twinkle 2s ease-in-out infinite;
}

.zzz {
 position: absolute;
 top: 65px;
 right: 85px;
 color: #c4b5fd;
 line-height: .75;
 transform: rotate(12deg);
 animation: zzz 2.5s ease-in-out infinite;
}

.zzz span {
 font-size: 20px;
}

.zzz b {
 font-size: 27px;
}

.soundWave {
 position: absolute;
 left: 50%;
 bottom: 48px;
 transform: translateX(-50%);
 color: #a78bfa;
 opacity: .35;
 letter-spacing: 5px;
 transition: .3s;
}

.catArt.mew .soundWave {
 opacity: 1;
 animation: wave .7s ease-in-out infinite;
}

.catCopy {
 padding: 48px;
}

.catCopy p {
 margin-bottom: 22px;
}

.chips {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 margin-bottom: 22px;
}

.chips span {
 padding: 7px 10px;
 border-radius: 999px;
 background: rgba(255, 255, 255, .05);
 border: 1px solid var(--line);
 font-size: 12px;
 color: #c8c9d2;
}

.meow {
 height: 0;
 opacity: 0;
 overflow: hidden;
 color: #c7b4ff;
 font-weight: 800;
 transition: .3s;
}

.meow.show {
 height: 28px;
 opacity: 1;
 margin-top: 12px;
}

@keyframes breathe {

 0%,
            100% {
  transform: translateY(0) scale(1);
 }

 50% {
  transform: translateY(-6px) scale(1.035);
 }
}

@keyframes twinkle {

 0%,
            100% {
  opacity: .35;
  transform: scale(.9);
 }

 50% {
  opacity: 1;
  transform: scale(1.25);
 }
}

@keyframes zzz {

 0%,
            100% {
  opacity: .2;
  transform: translate(0, 8px) rotate(12deg);
 }

 50% {
  opacity: .9;
  transform: translate(8px, -12px) rotate(12deg);
 }
}

@keyframes wave {

 0%,
            100% {
  transform: translateX(-50%) scaleX(.8);
 }

 50% {
  transform: translateX(-50%) scaleX(1.2);
 }
}

@media(max-width:820px) {
 .catPanel {
  grid-template-columns: 1fr;
 }

 .catArt {
  min-height: 290px;
 }

 .catCopy {
  padding: 34px 26px;
 }
}

.apps {
 margin-top: 22px;
}

.apps-title {
 font-size: 14px;
 font-weight: 800;
 color: #e8e8ef;
 margin-bottom: 10px;
}

.app-links {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 10px;
}

.app-link {
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 13px 14px;
 border: 1px solid rgba(255, 255, 255, .08);
 background: rgba(255, 255, 255, .03);
 border-radius: 14px;
 transition: .2s ease;
}

.app-link:hover {
 transform: translateY(-2px);
 border-color: rgba(167, 139, 250, .3);
 background: rgba(167, 139, 250, .07);
}

.app-link b {
 font-size: 14px;
}

.app-link span {
 font-size: 12px;
 color: #92929d;
}

.apps-note {
 margin-top: 10px;
 font-size: 11px;
 color: #70707b;
}

.joke {
 display: flex;
 gap: 16px;
 align-items: center;
 margin: 28px 0;
 padding: 18px 20px;
 border: 1px solid rgba(167, 139, 250, .18);
 background: rgba(167, 139, 250, .07);
 border-radius: 20px;
 max-width: 760px;
}

.jokeCat {
 font-size: 40px;
 animation: catBounce 2.2s ease-in-out infinite;
}

.joke b {
 font-size: 16px;
}

.joke p {
 margin: 5px 0 0;
 color: var(--muted);
 line-height: 1.55;
 font-size: 14px;
}

@keyframes catBounce {

 0%,
            100% {
  transform: translateY(0) rotate(-4deg);
 }

 50% {
  transform: translateY(-6px) rotate(4deg);
 }
}


        <style>.vpnkota-cat-widget {
 position: relative;
 width: 100%;
 height: 420px;
 overflow: hidden;
}

.vpnkota-cat-widget *,
        .vpnkota-cat-widget *::before,
        .vpnkota-cat-widget *::after {
 box-sizing: border-box;
 position: relative;
 animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
 animation-fill-mode: both;
}

.vpnkota-cat-widget *::before,
        .vpnkota-cat-widget *::after {
 content: '';
 display: block;
}

        /* Main wrapper */

.vpnkota-cat-all-wrap {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 animation: vpnkota-cat-bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}

.vpnkota-cat-all {
 top: 5rem;
 left: calc(50% - 2.5rem);
 position: absolute;
 width: 5rem;
 height: 5rem;
 transform-origin: center -20rem;
 animation: vpnkota-cat-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}

.vpnkota-cat-all::before {
 position: absolute;
 height: 20rem;
 width: 2px;
 background-color: #DB242A;
 left: calc(50% - 1px);
 bottom: 20rem;
}

        /* Yarn */

.vpnkota-cat-yarn {
 position: absolute;
 top: 0;
 left: 0;
 width: 80px;
 height: 80px;
 border-radius: 50%;
 background-image: radial-gradient(circle at top left,
                    #e97c7f,
                    #DB242A 50%,
                    #af1d22);
 z-index: 1;
}

.vpnkota-cat-yarn::before,
        .vpnkota-cat-yarn::after {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 top: -1px;
}

.vpnkota-cat-yarn::before {
 left: calc(50% + 7px);
 background-color: #b1bce6;
}

.vpnkota-cat-yarn::after {
 right: calc(50% + 7px);
 background-color: #D5E8F8;
}

        /* Cat */

.vpnkota-cat-cat-wrap {
 position: absolute;
 top: 0;
 left: calc(50% - 45px);
 width: 90px;
 height: 130px;
 animation: vpnkota-cat-reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
 transform-origin: top center;
}

.vpnkota-cat-cat {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 animation: vpnkota-cat-swing 7s 0.2s infinite both;
 transform-origin: top center;
}

.vpnkota-cat-upper {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 transform-origin: top center;
 z-index: 1;
}

        /* Upper legs */

.vpnkota-cat-upper .vpnkota-cat-leg {
 position: absolute;
 width: 20px;
 height: 100%;
 background-color: white;
 z-index: -1;
 background-image: linear-gradient(to right,
                    #D5E8F8,
                    #D5E8F8 20%,
                    #8B9BD9);
}

.vpnkota-cat-upper .vpnkota-cat-leg:nth-child(1) {
 border-top-left-radius: 100px;
 left: 10px;
}

.vpnkota-cat-upper .vpnkota-cat-leg:nth-child(1)::after {
 left: 50%;
}

.vpnkota-cat-upper .vpnkota-cat-leg:nth-child(2) {
 border-top-left-radius: 0;
 border-top-right-radius: 100px;
 right: 10px;
}

.vpnkota-cat-upper .vpnkota-cat-leg:nth-child(2)::after {
 right: 50%;
}

        /* Lower body */

.vpnkota-cat-lower-wrap {
 height: 90%;
 width: 75px;
 position: absolute;
 top: 100%;
 left: calc(50% - 37.5px);
 animation: vpnkota-cat-reverse-swing 7s 0.2s infinite both;
 transform-origin: top center;
}

.vpnkota-cat-lower {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 animation: vpnkota-cat-swing 7s 0.5s infinite both;
 transform-origin: top center;
}

.vpnkota-cat-lower::after {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 100px;
 background-image: radial-gradient(circle at 10px 50px,
                    white,
                    white 40%,
                    #D5E8F8 65%,
                    #8B9BD9);
 z-index: 1;
}

        /* Lower legs */

.vpnkota-cat-lower>.vpnkota-cat-leg {
 bottom: 20px;
}

.vpnkota-cat-lower .vpnkota-cat-leg,
        .vpnkota-cat-lower .vpnkota-cat-paw {
 position: absolute;
 height: 20px;
 width: 20px;
 animation: vpnkota-cat-swing-leg 7s 0.3s infinite both;
 z-index: 2;
 transform-origin: top center;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 background-image: linear-gradient(to right,
                    white,
                    #D5E8F8,
                    #8B9BD9);
}

.vpnkota-cat-lower>.vpnkota-cat-leg>.vpnkota-cat-leg {
 top: 25%;
}

.vpnkota-cat-lower>.vpnkota-cat-leg+.vpnkota-cat-leg {
 right: 0;
}

.vpnkota-cat-lower .vpnkota-cat-paw {
 top: 50%;
 border-radius: 50%;
 background-color: #fff;
}

        /* Tail */

.vpnkota-cat-tail {
 position: absolute;
 height: 15px;
 width: 10px;
 animation: vpnkota-cat-swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
 transform-origin: top center;
 z-index: 0;
 background-image: linear-gradient(to right,
                    white,
                    #D5E8F8,
                    #8B9BD9);
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
}

.vpnkota-cat-tail>.vpnkota-cat-tail {
 top: 50%;
}

.vpnkota-cat-lower>.vpnkota-cat-tail {
 left: calc(50% - 5px);
 top: 95%;
}

        /* Head */

.vpnkota-cat-head {
 position: absolute;
 width: 90px;
 height: 90px;
 background-image: radial-gradient(circle at 10px 10px,
                    white,
                    white 40%,
                    #D5E8F8 65%,
                    #8B9BD9);
 border-radius: 50%;
 top: calc(100% - 45px);
}

        /* Face */

.vpnkota-cat-face {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 animation: vpnkota-cat-face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
 transform-style: preserve-3d;
 perspective: 100px;
}

        /* Ears */

.vpnkota-cat-ears {
 position: absolute;
 top: 0;
 left: 0;
 height: 50%;
 width: 100%;
 z-index: -1;
}

.vpnkota-cat-ear {
 width: 20px;
 height: 100%;
 position: absolute;
 border-radius: 5px;
 top: -10px;
}

.vpnkota-cat-ear:first-child {
 left: 0;
 transform-origin: top left;
 transform: skewY(40deg);
 background-color: white;
}

.vpnkota-cat-ear:first-child::before {
 left: 0;
 border-top-right-radius: 50%;
 border-bottom-right-radius: 50%;
 background-color: #D7EBFB;
}

.vpnkota-cat-ear:last-child {
 right: 0;
 transform-origin: top right;
 transform: skewY(-40deg);
 background-color: #d1e6f7;
}

.vpnkota-cat-ear:last-child::before {
 right: 0;
 border-top-left-radius: 50%;
 border-bottom-left-radius: 50%;
 background-color: #e0f0fc;
}

.vpnkota-cat-ear::before {
 width: 60%;
 height: 100%;
 top: 10px;
 position: absolute;
 background-color: #fff;
}

        /* Eyes */

.vpnkota-cat-eyes {
 position: absolute;
 top: 50%;
 width: 100%;
 height: 6px;
 animation: vpnkota-cat-blink 7s step-end infinite both;
}

.vpnkota-cat-eyes::before,
        .vpnkota-cat-eyes::after {
 position: absolute;
 height: 6px;
 width: 6px;
 border-radius: 50%;
 background-color: #4B4D75;
}

.vpnkota-cat-eyes::before {
 left: 20px;
}

.vpnkota-cat-eyes::after {
 right: 20px;
}

        /* Mouth */

.vpnkota-cat-mouth {
 position: absolute;
 width: 12px;
 height: 8px;
 background-color: #4B4D75;
 top: 60%;
 left: calc(50% - 6px);
 border-top-left-radius: 50% 30%;
 border-top-right-radius: 50% 30%;
 border-bottom-left-radius: 50% 70%;
 border-bottom-right-radius: 50% 70%;
 transform: translateZ(10px);
}

.vpnkota-cat-mouth::before,
        .vpnkota-cat-mouth::after {
 position: absolute;
 width: 90%;
 height: 100%;
 border: 2px solid #9FA2CB;
 top: 80%;
 border-radius: 100px;
 border-top-color: transparent;
 z-index: -1;
}

.vpnkota-cat-mouth::before {
 border-left-color: transparent;
 right: calc(50% - 1px);
 transform-origin: top right;
 transform: rotate(10deg);
}

.vpnkota-cat-mouth::after {
 border-right-color: transparent;
 left: calc(50% - 1px);
 transform-origin: top left;
 transform: rotate(-10deg);
}

        /* Whiskers */

.vpnkota-cat-whiskers {
 width: 50%;
 height: 8px;
 position: absolute;
 bottom: 25%;
 left: 25%;
 transform-style: preserve-3d;
 perspective: 60px;
}

.vpnkota-cat-whiskers::before,
        .vpnkota-cat-whiskers::after {
 position: absolute;
 height: 100%;
 width: 30%;
 border: 2px solid #9FA2CB;
 border-left: none;
 border-right: none;
}

.vpnkota-cat-whiskers::before {
 right: 100%;
 transform-origin: right center;
 transform: rotateY(70deg) rotateZ(-10deg);
}

.vpnkota-cat-whiskers::after {
 left: 100%;
 transform-origin: left center;
 transform: rotateY(-70deg) rotateZ(10deg);
}

        /* Animations */

@keyframes vpnkota-cat-bob {

 0%,
            12.5%,
            25%,
            37.5%,
            50%,
            62.5%,
            75%,
            87.5%,
            100% {
  transform: translateY(0.4rem);
 }

 6.25%,
            18.75%,
            31.25%,
            43.75%,
            56.25%,
            68.75%,
            81.25%,
            93.75% {
  transform: translateY(-0.4rem);
 }
}

@keyframes vpnkota-cat-swing {
 0% {
  transform: rotate(5deg);
 }

 12.5% {
  transform: rotate(-10deg);
 }

 25% {
  transform: rotate(10deg);
 }

 37.5% {
  transform: rotate(-15deg);
 }

 50% {
  transform: rotate(23deg);
 }

 62.5% {
  transform: rotate(-23deg);
 }

 75% {
  transform: rotate(15deg);
 }

 87.5% {
  transform: rotate(-10deg);
 }

 100% {
  transform: rotate(5deg);
 }
}

@keyframes vpnkota-cat-swing-leg {
 0% {
  transform: rotate(0.5deg);
 }

 12.5% {
  transform: rotate(-1deg);
 }

 25% {
  transform: rotate(1deg);
 }

 37.5% {
  transform: rotate(-1.5deg);
 }

 50% {
  transform: rotate(2.3deg);
 }

 62.5% {
  transform: rotate(-2.3deg);
 }

 75% {
  transform: rotate(1.5deg);
 }

 87.5% {
  transform: rotate(-1deg);
 }

 100% {
  transform: rotate(0.5deg);
 }
}

@keyframes vpnkota-cat-swing-tail {
 0% {
  transform: rotate(-2deg);
 }

 12.5% {
  transform: rotate(4deg);
 }

 25% {
  transform: rotate(-4deg);
 }

 37.5% {
  transform: rotate(6deg);
 }

 50% {
  transform: rotate(-9.2deg);
 }

 62.5% {
  transform: rotate(9.2deg);
 }

 75% {
  transform: rotate(-6deg);
 }

 87.5% {
  transform: rotate(4deg);
 }

 100% {
  transform: rotate(-2deg);
 }
}

@keyframes vpnkota-cat-reverse-swing {
 0% {
  transform: rotate(-5deg);
 }

 12.5% {
  transform: rotate(10deg);
 }

 25% {
  transform: rotate(-10deg);
 }

 37.5% {
  transform: rotate(15deg);
 }

 50% {
  transform: rotate(-23deg);
 }

 62.5% {
  transform: rotate(23deg);
 }

 75% {
  transform: rotate(-15deg);
 }

 87.5% {
  transform: rotate(10deg);
 }

 100% {
  transform: rotate(-5deg);
 }
}

@keyframes vpnkota-cat-face {
 0% {
  transform: translateX(-2.5px);
 }

 12.5% {
  transform: translateX(5px);
 }

 25% {
  transform: translateX(-5px);
 }

 37.5% {
  transform: translateX(7.5px);
 }

 50% {
  transform: translateX(-11.5px);
 }

 62.5% {
  transform: translateX(11.5px);
 }

 75% {
  transform: translateX(-7.5px);
 }

 87.5% {
  transform: translateX(5px);
 }

 100% {
  transform: translateX(-2.5px);
 }
}

@keyframes vpnkota-cat-blink {

 from,
            to,
            10%,
            25%,
            80% {
  transform: scaleY(1);
 }

 8%,
            23%,
            78% {
  transform: scaleY(0.1);
 }
}

        /* Cat markup */

.vpnkota-cat-widget .vpnkota-cat-all-wrap {
 isolation: isolate;
}



/* Cat ball */

.vk-meow {
 --vk-fur-light: #D5E8F8;
 --vk-fur-dark: #8B9BD9;
 --vk-features: #4B4D75;
 --vk-features-light: #9FA2CB;
 --vk-yarn: #DB242A;
 --vk-duration: 7s;
 --vk-easing: cubic-bezier(0.5,0,0.5,1);
 position: relative;
 display: block;
 width: 100%;
 height: 100%;
 min-height: 520px;
 overflow: hidden;
 background-color: var(--vk-bg);
 isolation: isolate;
 font-size: 16px;
 zoom: 0.4;
}

@media(max-width:820px) {
  .vk-meow {
    zoom: 0.2;
  }
}

.vk-meow *, .vk-meow *::before, .vk-meow *::after {
 box-sizing: border-box;
 position: relative;
 animation-timing-function: var(--vk-easing);
 animation-fill-mode: both;
}

.vk-meow *::before, .vk-meow *::after {
 content: '';
 display: block;
}

.vk-meow .all-wrap {
 animation: vk-meow-bob var(--vk-duration) var(--vk-easing) infinite both;
 width: 100%;
 height: 100%;
}

.vk-meow .all {
 top: 10rem;
 left: calc(50% - 2.5rem);
 position: absolute;
 width: 5rem;
 height: 5rem;
 transform-origin: center -20rem;
 animation: vk-meow-swing var(--vk-duration) var(--vk-easing) infinite both;
}

.vk-meow .all::before {
 height: 20rem;
 width: 2px;
 background-color: var(--vk-yarn);
 left: calc(50% - 1px);
 bottom: 20rem;
}

.vk-meow .yarn {
 position: absolute;
 top: 0;
 left: 0;
 width: 80px;
 height: 80px;
 border-radius: 50%;
 background-image: radial-gradient(circle at top left,#E97C7F,var(--vk-yarn) 50%,#AF1D22);
 z-index: 1;
}

.vk-meow .yarn::before,.vk-meow .yarn::after {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: white;
 top: -1px;
}

.vk-meow .yarn::before {
 left: calc(50% + 7px);
 background-color: #B1BCE6;
}

.vk-meow .yarn::after {
 right: calc(50% + 7px);
 background-color: var(--vk-fur-light);
}

.vk-meow .cat-wrap {
 position: absolute;
 top: 0;
 left: calc(50% - 45px);
 width: 90px;
 height: 130px;
 animation: vk-meow-reverse-swing var(--vk-duration) var(--vk-easing) infinite both;
 transform-origin: top center;
}

.vk-meow .cat {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 animation: vk-meow-swing var(--vk-duration) .2s infinite both;
 transform-origin: top center;
}

.vk-meow .cat-upper {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 transform-origin: top center;
 z-index: 1;
}

.vk-meow .cat-upper .cat-leg {
 position: absolute;
 width: 20px;
 height: 100%;
 background-color: white;
 z-index: -1;
 background-image: linear-gradient(to right,var(--vk-fur-light),var(--vk-fur-light) 20%,var(--vk-fur-dark));
}

.vk-meow .cat-upper .cat-leg:nth-child(1) {
 border-top-left-radius: 100px;
 left: 10px;
}

.vk-meow .cat-upper .cat-leg:nth-child(1)::after {
 left: 50%;
}

.vk-meow .cat-upper .cat-leg:nth-child(2) {
 border-top-left-radius: 0;
 border-top-right-radius: 100px;
 right: 10px;
}

.vk-meow .cat-upper .cat-leg:nth-child(2)::after {
 right: 50%;
}

.vk-meow .cat-lower-wrap {
 height: 90%;
 width: 75px;
 position: absolute;
 top: 100%;
 left: calc(50% - 37.5px);
 animation: vk-meow-reverse-swing var(--vk-duration) .2s infinite both;
 transform-origin: top center;
}

.vk-meow .cat-lower {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 animation: vk-meow-swing var(--vk-duration) .5s infinite both;
 transform-origin: top center;
}

.vk-meow .cat-lower::after {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 100px;
 background-image: radial-gradient(circle at 10px 50px,white,white 40%,var(--vk-fur-light) 65%,var(--vk-fur-dark));
 z-index: 1;
}

.vk-meow .cat-lower .cat-leg,.vk-meow .cat-lower .cat-paw {
 z-index: 1;
 position: absolute;
 height: 20px;
 width: 20px;
 animation: vk-meow-swing-leg var(--vk-duration) .3s infinite both;
 transform-origin: top center;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 background-image: linear-gradient(to right,white,var(--vk-fur-light),var(--vk-fur-dark));
}

.vk-meow .cat-lower > .cat-leg {
 bottom: 20px;
}

.vk-meow .cat-lower > .cat-leg .cat-leg {
 top: 25%;
}

.vk-meow .cat-lower > .cat-leg + .cat-leg {
 right: 0;
}

.vk-meow .cat-lower .cat-paw {
 top: 50%;
 border-radius: 50%;
 background-color: #fff;
}

.vk-meow .cat-lower .cat-tail {
 position: absolute;
 height: 15px;
 width: 10px;
 animation: vk-meow-swing-tail var(--vk-duration) var(--vk-easing) infinite both;
 transform-origin: top center;
 z-index: 0;
 background-image: linear-gradient(to right,white,var(--vk-fur-light),var(--vk-fur-dark));
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
}

.vk-meow .cat-lower .cat-tail > .cat-tail {
 top: 50%;
}

.vk-meow .cat-lower > .cat-tail {
 left: calc(50% - 5px);
 top: 95%;
}

.vk-meow .cat-head {
 width: 90px;
 height: 90px;
 background-image: radial-gradient(circle at 10px 10px,white,white 40%,var(--vk-fur-light) 65%,var(--vk-fur-dark));
 border-radius: 50%;
 top: calc(100% - 45px);
}

.vk-meow .cat-face {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 animation: vk-meow-face var(--vk-duration) var(--vk-easing) infinite both;
 transform-style: preserve-3d;
 perspective: 100px;
}

.vk-meow .cat-ears {
 position: absolute;
 top: 0;
 left: 0;
 height: 50%;
 width: 100%;
 z-index: -1;
}

.vk-meow .cat-ear {
 width: 20px;
 height: 100%;
 position: absolute;
 border-radius: 5px;
 top: -10px;
}

.vk-meow .cat-ear:first-child {
 left: 0;
 transform-origin: top left;
 transform: skewY(40deg);
 background-color: white;
}

.vk-meow .cat-ear:first-child::before {
 left: 0;
 border-top-right-radius: 50%;
 border-bottom-right-radius: 50%;
 background-color: #D7EBFB;
}

.vk-meow .cat-ear:last-child {
 right: 0;
 transform-origin: top right;
 transform: skewY(-40deg);
 background-color: #D1E6F7;
}

.vk-meow .cat-ear:last-child::before {
 right: 0;
 border-top-left-radius: 50%;
 border-bottom-left-radius: 50%;
 background-color: #E0F0FC;
}

.vk-meow .cat-ear::before {
 width: 60%;
 height: 100%;
 top: 10px;
 position: absolute;
 background-color: #fff;
}

.vk-meow .cat-eyes {
 position: absolute;
 top: 50%;
 width: 100%;
 height: 6px;
 animation: vk-meow-blink var(--vk-duration) step-end infinite both;
}

.vk-meow .cat-eyes::before,.vk-meow .cat-eyes::after {
 position: absolute;
 height: 6px;
 width: 6px;
 border-radius: 50%;
 background-color: var(--vk-features);
}

.vk-meow .cat-eyes::before {
 left: 20px;
}

.vk-meow .cat-eyes::after {
 right: 20px;
}

.vk-meow .cat-mouth {
 position: absolute;
 width: 12px;
 height: 8px;
 background-color: var(--vk-features);
 top: 60%;
 left: calc(50% - 6px);
 border-top-left-radius: 50% 30%;
 border-top-right-radius: 50% 30%;
 border-bottom-left-radius: 50% 70%;
 border-bottom-right-radius: 50% 70%;
 transform: translateZ(10px);
}

.vk-meow .cat-mouth::before,.vk-meow .cat-mouth::after {
 position: absolute;
 width: 90%;
 height: 100%;
 border: 2px solid var(--vk-features-light);
 top: 80%;
 border-radius: 100px;
 border-top-color: transparent;
 z-index: -1;
}

.vk-meow .cat-mouth::before {
 border-left-color: transparent;
 right: calc(50% - 1px);
 transform-origin: top right;
 transform: rotate(10deg);
}

.vk-meow .cat-mouth::after {
 border-right-color: transparent;
 left: calc(50% - 1px);
 transform-origin: top left;
 transform: rotate(-10deg);
}

.vk-meow .cat-whiskers {
 width: 50%;
 height: 8px;
 position: absolute;
 bottom: 25%;
 left: 25%;
 transform-style: preserve-3d;
 perspective: 60px;
}

.vk-meow .cat-whiskers::before,.vk-meow .cat-whiskers::after {
 position: absolute;
 height: 100%;
 width: 30%;
 border: 2px solid var(--vk-features-light);
 border-left: none;
 border-right: none;
}

.vk-meow .cat-whiskers::before {
 right: 100%;
 transform-origin: right center;
 transform: rotateY(70deg) rotateZ(-10deg);
}

.vk-meow .cat-whiskers::after {
 left: 100%;
 transform-origin: left center;
 transform: rotateY(-70deg) rotateZ(10deg);
}

@keyframes vk-meow-swing {
 0% {
  transform: rotate(5deg);
 }

 12.5% {
  transform: rotate(-10deg);
 }

 25% {
  transform: rotate(10deg);
 }

 37.5% {
  transform: rotate(-15deg);
 }

 50% {
  transform: rotate(23deg);
 }

 62.5% {
  transform: rotate(-23deg);
 }

 75% {
  transform: rotate(15deg);
 }

 87.5% {
  transform: rotate(-10deg);
 }

 100% {
  transform: rotate(5deg);
 }
}

@keyframes vk-meow-swing-leg {
 0% {
  transform: rotate(.5deg);
 }

 12.5% {
  transform: rotate(-1deg);
 }

 25% {
  transform: rotate(1deg);
 }

 37.5% {
  transform: rotate(-1.5deg);
 }

 50% {
  transform: rotate(2.3deg);
 }

 62.5% {
  transform: rotate(-2.3deg);
 }

 75% {
  transform: rotate(1.5deg);
 }

 87.5% {
  transform: rotate(-1deg);
 }

 100% {
  transform: rotate(.5deg);
 }
}

@keyframes vk-meow-swing-tail {
 0% {
  transform: rotate(-2deg);
 }

 12.5% {
  transform: rotate(4deg);
 }

 25% {
  transform: rotate(-4deg);
 }

 37.5% {
  transform: rotate(6deg);
 }

 50% {
  transform: rotate(-9.2deg);
 }

 62.5% {
  transform: rotate(9.2deg);
 }

 75% {
  transform: rotate(-6deg);
 }

 87.5% {
  transform: rotate(4deg);
 }

 100% {
  transform: rotate(-2deg);
 }
}

@keyframes vk-meow-reverse-swing {
 0% {
  transform: rotate(-5deg);
 }

 12.5% {
  transform: rotate(10deg);
 }

 25% {
  transform: rotate(-10deg);
 }

 37.5% {
  transform: rotate(15deg);
 }

 50% {
  transform: rotate(-23deg);
 }

 62.5% {
  transform: rotate(23deg);
 }

 75% {
  transform: rotate(-15deg);
 }

 87.5% {
  transform: rotate(10deg);
 }

 100% {
  transform: rotate(-5deg);
 }
}

@keyframes vk-meow-face {
 0% {
  transform: translateX(-2.5px);
 }

 12.5% {
  transform: translateX(5px);
 }

 25% {
  transform: translateX(-5px);
 }

 37.5% {
  transform: translateX(7.5px);
 }

 50% {
  transform: translateX(-11.5px);
 }

 62.5% {
  transform: translateX(11.5px);
 }

 75% {
  transform: translateX(-7.5px);
 }

 87.5% {
  transform: translateX(5px);
 }

 100% {
  transform: translateX(-2.5px);
 }
}

@keyframes vk-meow-bob {
 0% {
  transform: translateY(.4rem);
 }

 6.25% {
  transform: translateY(-.4rem);
 }

 12.5% {
  transform: translateY(.4rem);
 }

 18.75% {
  transform: translateY(-.4rem);
 }

 25% {
  transform: translateY(.4rem);
 }

 31.25% {
  transform: translateY(-.4rem);
 }

 37.5% {
  transform: translateY(.4rem);
 }

 43.75% {
  transform: translateY(-.4rem);
 }

 50% {
  transform: translateY(.4rem);
 }

 56.25% {
  transform: translateY(-.4rem);
 }

 62.5% {
  transform: translateY(.4rem);
 }

 68.75% {
  transform: translateY(-.4rem);
 }

 75% {
  transform: translateY(.4rem);
 }

 81.25% {
  transform: translateY(-.4rem);
 }

 87.5% {
  transform: translateY(.4rem);
 }

 93.75% {
  transform: translateY(-.4rem);
 }

 100% {
  transform: translateY(.4rem);
 }
}

@keyframes vk-meow-blink {
 from,to,10%,25%,80% {
  transform: scaleY(1);
 }

 8%,23%,78% {
  transform: scaleY(.1);
 }
}