.spreadsheet-title {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 24px;
}

.spreadsheet-description {
    font-feature-settings: "cv06" on, "calt" off, "liga" off;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 24px
}

@media (max-width: 1248px) {
    .spreadsheet-description {
        font-size: 14px;
        line-height: 24px
    }
}

.spreadsheet {
	border-radius: 16px;
	cursor: pointer;
	height: 260px;
	position: relative;
	/* width: 384px; */
}

.spreadsheet:before {
    z-index: 10
}

.spreadsheet-gradient-border,
.spreadsheet-gradient-background,
.spreadsheet-default-background {
    border-radius: 16px;
    content: "";
    display: block;
    pointer-events: none;
    position: absolute;
    transition: .35s cubic-bezier(.6, .6, 0, 1) opacity
}

.spreadsheet-default-background {
	background: radial-gradient(67.49% 100% at 50% 0%, #ffffff0a, #fff0), #040404;
	height: calc(100% - 2px);
	left: 1px;
	top: 1px;
	width: calc(100% - 2px);
	z-index: 7;
}
.spreadsheet-gradient-border {
    background-image: linear-gradient(270deg, #dcd8ff00, #dcd8ff00 48.96%, #fff0 100%, #dcd8ff00), linear-gradient(0deg, #dcd8ff29, #dcd8ff29);
    height: 100%;
    left: 0;
    opacity: .3125;
    top: 0;
    width: 100%;
    z-index: 6
}

.spreadsheet-gradient-background {
	background: radial-gradient(54.43% 33.21% at 50% 100%, #8566ff0d, #8566ff00), radial-gradient(39.01% 30.53% at 50% 100%, #ffffff14, #fff0), radial-gradient(67.49% 100% at 50% 0%, #ffffff0a, #fff0), #030303;
	height: calc(100% - 2px);
	left: 1px;
	opacity: 0;
	top: 1px;
	width: calc(100% - 2px);
	z-index: 8;
}

.spreadsheet-inner {
    background: none !important;
    z-index: 8 !important
}

.spreadsheet-stars {
    height: 100%;
    width: 100%
}

.spreadsheet-stars-wrapper {
    height: 82.38px;
    left: 11px;
    opacity: 0;
    position: absolute;
    top: 13px;
    transition: .8s ease opacity .2s;
    width: 250.57px;
    z-index: 9
}

.spreadsheet-grid {
    height: 139.2px;
    opacity: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    transition: .35s cubic-bezier(.6, .6, 0, 1) opacity;
    width: 322px;
    z-index: 9
}

.spreadsheet-content {
	padding: 25px 32px 0;
}

.spreadsheet-icon {
    height: 56px;
    margin-bottom: 24px;
    position: relative;
    width: 56px
}

.spreadsheet-icon-empty,
.spreadsheet-icon-active {
    left: 0;
    position: absolute;
    top: 0;
    transition: .35s cubic-bezier(.6, .6, 0, 1) opacity
}

.spreadsheet-icon-active {
    align-items: center;
    background: radial-gradient(75.99% 80.36% at 100% 0%, #8566ff52, #8566ff00), linear-gradient(46.74deg, #bab3ff00 25.96%, #bab3ff52 89.02%);
    border-radius: 50%;
    display: flex;
    height: 56px;
    justify-content: center;
    opacity: 0;
    width: 56px
}

.spreadsheet-icon-active:before {
    background: linear-gradient(46.74deg, #bab3ff00 25.96%, #bab3ff52 89.02%);
    border-radius: 50%;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
    position: absolute
}

.spreadsheet-icon-stars svg {
    position: absolute
}

.spreadsheet-icon-stars svg:nth-child(1) {
    height: 8px;
    left: 2px;
    top: 7px;
    width: 8px
}

.spreadsheet-icon-stars svg:nth-child(2) {
    color: #bab3ff;
    height: 6px;
    left: 40px;
    top: 2px;
    width: 6px
}

.spreadsheet-icon-stars svg:nth-child(3) {
    height: 4px;
    left: 50px;
    top: 39px;
    width: 4px
}

.spreadsheet-title {
    margin-bottom: 8px
}

.spreadsheet-description {
    color: #9b96b0;
    min-height: 72px;
    position: relative
}

.spreadsheet-description-ghost,
.spreadsheet-description-active {
    transition: .35s cubic-bezier(.6, .6, 0, 1) opacity
}

.spreadsheet-description-ghost {
	left: 0;
	padding: 5px 0;
	position: absolute;
	top: 0;
	opacity: 0;
}

.spreadsheet-description-ghost div {
    background: #ffffff0f;
    border-radius: 2px;
    height: 14px
}

.spreadsheet-description-ghost div:not(:last-child) {
    margin-bottom: 10px
}

.spreadsheet-description-ghost div:first-child {
    width: 100%
}

.spreadsheet-description-ghost div:nth-child(2) {
    width: 275px
}

.spreadsheet-description-ghost div:nth-child(3) {
    width: 219px
}

.spreadsheet-description-active {
	opacity: 1;
}

.spreadsheet-progress {
    background: #ffffff14;
    border-radius: 999px;
    height: 2px
}

.spreadsheet-progress-wrapper {
    padding: 20px 16px
}

.spreadsheet-progress-bar {
    background-color: #e9e6ef;
    border-radius: inherit;
    height: 100%;
    width: 0
}

.spreadsheet:hover .spreadsheet-grid,
.spreadsheet-active .spreadsheet-grid,
.spreadsheet:hover .spreadsheet-gradient-background,
.spreadsheet:hover .spreadsheet-gradient-border,
.spreadsheet-active .spreadsheet-gradient-background,
.spreadsheet-active .spreadsheet-gradient-border {
    opacity: 1
}

.spreadsheet-active .spreadsheet-stars-wrapper {
    opacity: 1;
    transform: scale(1) translate(0)
}

.spreadsheet-active .spreadsheet-icon-empty {
    opacity: 0
}

.spreadsheet-active .spreadsheet-icon-active {
    opacity: 1
}

.spreadsheet-active .spreadsheet-description-ghost {
    opacity: 0
}

.spreadsheet-active .spreadsheet-description-active {
    opacity: 1
}

.spreadsheet-active .spreadsheet-progress-bar {
    animation: fillSpreadsheetBar 10s linear
}

@media (max-width: 1248px) {
    .spreadsheet {
        height: 254px;
        width: 342px
    }
}

@keyframes fillSpreadsheetBar {
    0% {
        width: 0
    }

    to {
        width: 100%
    }
}

.spreadsheets-tabs-genius-title {
    font-family: Rebond Grotesque, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px
}

.spreadsheets-tabs-genius-description {
    font-feature-settings: "cv06" on, "calt" off, "liga" off;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 24px
}

@media (max-width: 1248px) {
    .spreadsheets-tabs-genius-title {
        font-size: 24px;
        line-height: 32px
    }
}

@media (max-width: 1248px) {
    .spreadsheets-tabs-genius-description {
        font-size: 14px;
        line-height: 24px
    }
}

/* .spreadsheets-tabs-wrapper {
    margin-left: -133px;
    -webkit-mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #fff 8.66%, #fff 91.34%, rgba(255, 255, 255, 0) 100%);
    mask-image: linear-gradient(90deg, #fff0 0, #fff 8.66%, #fff 91.34%, #fff0);
    padding: 0 133px;
    width: 1466px
} */

.spreadsheets-tabs-inner {
	display: flex;
	margin-bottom: 0;
	/* width: -moz-max-content; */
	width: 100%;
	flex-wrap: wrap;
	gap: 15px;
}
.spreadsheets-tabs-item {
	width: calc(25% - 12px);
	/* margin-bottom: 25px; */
}
/* .spreadsheets-tabs-item:not(:last-child) {
    margin-right: 24px
} */

.spreadsheets-tabs-genius {
    background: linear-gradient(90deg, #bab3ff00, #bab3ff99, #bab3ff00 34.04%), linear-gradient(180deg, #a9a3c233, #a9a3c20c);
    border-radius: 16px;
    height: 588px;
    padding: 1px;
    text-align: center
}

.spreadsheets-tabs-genius-inner {
    background: radial-gradient(47.16% 90.82% at 50% 0%, #8566ff14, #8566ff00), radial-gradient(67.49% 100% at 50% 0%, #ffffff0a, #fff0), #0a0118;
    border-radius: inherit;
    padding: 0 35px
}

.spreadsheets-tabs-genius-inner .spreadsheets-table {
    margin-bottom: 49px
}

.spreadsheets-tabs-genius-title {
    color: #fff;
    margin-bottom: 8px
}

.spreadsheets-tabs-genius-description {
    color: #9b96b0;
    margin: 0 auto
}

@media (max-width: 1248px) {
    .spreadsheets-tabs-item:not(:last-child) {
        margin-right: 12px
    }

    .spreadsheets-tabs-genius {
        height: 600px
    }

    .spreadsheets-tabs-genius-description {
        max-width: 300px
    }

    .spreadsheets-tabs-genius .spreadsheets-table {
        margin-bottom: 32px;
        padding: 23px 12px 17px
    }

    .spreadsheets-tabs-genius-inner {
        overflow: hidden;
        padding: 0
    }
}

.spreadsheets .section-header {
	margin-top: -200px;
	position: relative;
	z-index: 2;
}

.spreadsheets .section-header-title {
    text-align: center;
}

.spreadsheets .section-header-title .title-line {
    background: linear-gradient(180deg, #fff 22.5%, #ffffffb3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: block;
}

.spreadsheets .section-header-title .title-line {
    background: linear-gradient(180deg, #fff 22.5%, #ffffffb3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: block;
}

/* .spreadsheets {
    background: #0a0118;
} */
.spreadsheets {
	background: #000;
	padding: 0px 0 80px;
}
.linePattern {
	padding: 80px 80px 200px;
}
.spreadsheets .section-header-badge {
    font-size: 14px;
    line-height: 20px;
    color: #fff;
}

.spreadsheets .section-header-description {
    color: #9b96b0;
    margin: 12px auto 0;
    max-width: 520px;
    text-align: center;
    max-width: 626px;
    font-feature-settings: "cv06" on, "calt" off, "liga" off;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 28px;
}

.spreadsheets .section-header {
    margin-bottom: 48px;
}

.spreadsheet:hover .spreadsheet-grid {
    opacity: 1;
}

.spreadsheet-grid {
    height: 139.2px;
    opacity: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    transition: .35s cubic-bezier(.6, .6, 0, 1) opacity;
    width: 322px;
    z-index: 9;
}
.spreadsheet-gradient-border {
	background-image: linear-gradient(270deg,#dcd8ff00,#dcd8ff00 48.96%,#fff0 100%,#dcd8ff00),linear-gradient(0deg,#dcd8ff29,#dcd8ff29);
	height: 100%;
	left: 0;
	opacity: .3125;
	top: 0;
	width: 100%;
	z-index: 6;
}
.magical-borders-content > * .magical-borders-inner {
	background-color: #0a0118;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	top: 1px;
	right: 1px;
	bottom: 1px;
	left: 1px;
	position: absolute;
	z-index: 2;
}
/* .magical-borders.spreadsheets-tabs {
	padding-bottom: 70px;
} */