@font-face {
    font-family: "TT Supermolot Neue";
    font-display: swap;
    src: url('../fonts/tt_supermolot_neue_trl_ext_db_rg-webfont.woff2') format('woff2'),
        url('../fonts/tt_supermolot_neue_trl_ext_db_rg-webfont.woff') format('woff');
    font-weight: 900;
}
@font-face {
    font-family: "TT Supermolot Neue";
    font-display: swap;
    src: url('../fonts/tt_supermolot_neue_trl_ext_lt_rg-webfont.woff2') format('woff2'),
        url('../fonts/tt_supermolot_neue_trl_ext_lt_rg-webfont.woff') format('woff');
    font-weight: 300;
}
@font-face {
    font-family: "TT Supermolot Neue";
    font-display: swap;
    src: url('../fonts/tt_supermolot_neue_trl_ext_rg-webfont.woff2') format('woff2'),
        url('../fonts/tt_supermolot_neue_trl_ext_rg-webfont.woff') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: "TT Supermolot Neue";
    font-display: swap;
    src: url('../fonts/tt_supermolot_neue_trl_ext_md_rg-webfont.woff2') format('woff2'),
        url('../fonts/tt_supermolot_neue_trl_ext_md_rg-webfont.woff') format('woff');
    font-weight: 500;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
::before,
::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    position: relative;
    overflow-x: hidden;
}
body {
    font-family: "TT Supermolot Neue", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.1875;
    background-color: #F5F5F5;
    transition: background-color 0.5s ease-in-out;
    min-height: 100vh;
}
.page--dark {
    background-color: #111111;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}
::-webkit-scrollbar-thumb {
    border-radius: .2rem;
    background: linear-gradient(330deg, #00FFFF50, #8A2BE250, #FF149350, #FFFF0050);
    visibility: hidden;
}
.page--dark ::-webkit-scrollbar-track {
    background: #111111;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(330deg, #00FFFF, #8A2BE2, #FF1493, #FFFF00);
}
::-webkit-scrollbar-thumb {
    visibility: visible;
}

/* Animations */
@keyframes animate-rotate-in-right {
    0% { transform: translate(1000px,0px) rotate(0deg) ; opacity: 0;  }
   50% { opacity: 1;  }
   100% { transform: translate(0px,0px) rotate(360deg) ; opacity: 1; }
}
@keyframes slide-left-in {
   0% { transform: translate(-100%,0px) rotate(1deg) ; opacity: 0; transform-origin: 0 0;  }
   100% { opacity: 1; transform: translate(0px,0px) rotate(0deg) ; transform-origin: 0 0;  }
}
@keyframes swash-in {
   0% { transform: rotate(0deg) scale(0,0) ; opacity: 0; transform-origin: 50% 50%;  }
   90% { transform: rotate(0deg) scale(0.9,0.9) ; transform-origin: 50% 50%; opacity: 1;  }
   100% { transform: rotate(0deg) scale(1,1) ; transform-origin: 50% 50%;  }
}
@keyframes transform-rotate {
   0% { transform: rotate(0deg) ;  }
   100% { transform: rotate(359deg) ;  }
}
@keyframes transform-scale-out {
   0% { transform: rotate(0deg) ; opacity: 1;  }
   100% { transform: rotate(0deg) scale(0,0) ; opacity: 0;  }
}
@keyframes fold {
   0% { transform: rotateX(0deg) ;  }
   30% { transform: rotateX(0deg) scale3d(1.0,0.4,1.0) ;  }
   50% { opacity: 1;  }
   60% { transform: rotateX(0deg) scale3d(0.4,0.4,1.0) ;  }
   100% { opacity: 0; transform: rotateX(0deg) scale3d(0.2,0.2,0.2) ;  }
}
@keyframes border-cards {
    0% { background-position: 0% 0; }
    100% { background-position: 800% 0; }  
}
@keyframes glow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes btn-border {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }      
}

/* Layout */
.main-content {
    position: relative;
    text-align: center;
    width: 100%;
    min-height: 100vh;
    display: block;
}
.content-container {
    max-width: 1440px;
    width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 40px; 
}

/* Header Controls */
.header-controls {
    display: flex;
	position: relative;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.logo-container {
    display: flex;
	position: relative;
    align-items: center;
	cursor: pointer;
}

/* Logo */
.logo {
	transform: translateY(-15%);
    transition: opacity 2s ease;
}
.logo--light img, 
.logo--dark img {
    width: 64px;
    height: auto;
    object-fit: contain;
	display: block;
}
.logo--light { 
    opacity: 1; 
}
.logo--dark { 
    opacity: 0; 
    position: absolute; /* dark поверх light */
}
.page--dark .logo--light { opacity: 0; }
.page--dark .logo--dark { opacity: 1; }

.logo-text {
    font-weight: 900;
    font-size: 32px;
    line-height: 30px;
	margin-left: 0.5px;
	cursor: pointer;
}
.page--dark .logo-text {
    color: #fff;
}

/* Theme toggle */
.theme-toggles {
    display: flex;
	position: relative;
	align-items: center;
	height: 40px; 
}
.theme-toggle {
    border: none;
    background: none;
    cursor: pointer;
	padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 2s ease;
}
.theme-toggle--sun {
    position: relative; /* в потоке документа */
}
.theme-toggle--moon {
    position: absolute; /* поверх sun */
    top: 0;
    left: 0;
}
.theme-toggle img {
    width: 42px;
    height: 40px;
    object-fit: contain;
    display: block; 
}

.page--dark .theme-toggle--sun,
.page:not(.page--dark) .theme-toggle--moon {
    opacity: 0;
    pointer-events: none;
}
.page--dark .theme-toggle--moon,
.page:not(.page--dark) .theme-toggle--sun {
    opacity: 1;
    pointer-events: auto;
}

/* Cards Grid */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;  	
	/* width: 100%; */
   justify-content: center; 
   position: relative; 
}
.card__content {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding-bottom: 10px;
    z-index: 3;
    flex-shrink: 0;
}
/*.card__content>* {
    margin: 0 !important;
    flex-shrink: 0;
}*/
/* Cards */
.card {
    /* width: 340px; */
	width: 100%; 
    max-width: 340px;
    height: 580px;
    position: relative;
    /*display: flex;*/
    /*flex-direction: column;*/
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;	
    padding: 20px;
    text-align: center; 
    border-radius: 25px;
    transition: backdrop-filter 500ms linear;
    will-change: backdrop-filter;
    transform: translateZ(0);
    isolation: isolate;
}

.card--website {
    background-image: linear-gradient(315deg, rgba(0, 254, 254, 0.35) 0%, rgba(255, 0, 255, 0.35) 100%);
    backdrop-filter: blur(3px) saturate(150%);
}
.card--website:hover {
    backdrop-filter: blur(15px) saturate(180%);
}
.card--cashback {
    background-image: linear-gradient(315deg, rgba(6, 249, 167, 0.35) 0%, rgba(29, 160, 245, 0.35) 100%);
    backdrop-filter: blur(3px) saturate(150%);
}
.card--promocodes {
    background-image: linear-gradient(315deg, rgba(255, 0, 255, 0.35) 0%, rgba(255, 255, 0, 0.35) 100%);
    backdrop-filter: hue-rotate(260deg) blur(3px) saturate(150%);
}

/* Dark theme card styles */
.page--dark .card--website {
    background-image: linear-gradient(45deg, rgba(255, 0, 255, 0.04) 0%, rgba(0, 254, 254, 0.04) 100%);
}
.page--dark .card--cashback {
    background-image: linear-gradient(315deg, rgba(0, 0, 255, 0.04) 0%, rgba(0, 254, 254, 0.04) 100%);
}
.page--dark .card--promocodes {
    background-image: linear-gradient(315deg, rgba(255, 0, 255, 0.04) 0%, rgba(255, 255, 0, 0.04) 100%);
}
.page--dark .card--website {
    box-shadow: rgb(0, 0, 0) -10px 0px 15px inset;
    transition: backdrop-filter 500ms linear, box-shadow 5s ease;
}
.page--dark .card--cashback {
    box-shadow: rgb(0, 0, 0) -10px 0px 15px inset;
				/* rgba(40, 0, 80, 0.5) 10px 0px 15px inset; */
    transition: backdrop-filter 500ms linear, box-shadow 5s ease;
}
.page--dark .card--promocodes {
    box-shadow: rgb(0, 0, 0) 10px 0px 15px inset;
    transition: backdrop-filter 500ms linear, box-shadow 5s ease;
}
.page--dark .card--website:hover {
    backdrop-filter: blur(15px) saturate(180%);
    background-color: rgba(17, 25, 40, 0.25);
    box-shadow: none;
}

/* Hover effects */
.card--website:hover .card__animation-heart,
.card--cashback:hover .card__animation-cashback,
.card--promocodes:hover .card__animation-gift,
.card-hover .card__animation {
    filter: brightness(1) contrast(1);
    transform: scale(1.15);
}
.page--dark .card--cashback:hover,
.page--dark .card--promocodes:hover {
    box-shadow: none;
}

/* Card border effects */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 25px;
    padding: 1px;
    -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);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    clip-path: inset(0 round 25px);
    transition: clip-path 0.3s ease-out;
}

/* Card specific border styles */
.page--dark .card--website::before {
    background: linear-gradient(to bottom right, #ff00ff1a 20%, #ff00ff 35%, #ad00ff, #0000ff, #00ffff2e 80%);
}
.card--website::before {
    background: linear-gradient(315deg, rgba(0, 254, 254, 0.16) 0%, rgba(255, 0, 255, 0.16) 100%);
}
.card--website:hover::before {
    clip-path: inset(-1px round 25px);
    padding: 2px;
    background: linear-gradient(90deg, #00ffff, #7f7fff, #ff00ff, #7f7fff, #00ffff);
    background-size: 400% 100%;
    animation: border-cards 20s linear infinite;
}

.page--dark .card--cashback::before {
    background: linear-gradient(to bottom right, #0076ff1a 20%, #0000FF, #00d5ff, #00ffff2e 80%);
}
.card--cashback::before {
    background: linear-gradient(315deg, rgba(6, 249, 167, 0.5) 0%, rgba(29, 160, 245, 0.5) 100%);
}
.card--cashback:hover::before {
    clip-path: inset(-1px round 25px);
    padding: 2px;
    background: linear-gradient(90deg, #00fd6c, #00d5ff, #006dff, #00d5ff, #00fd6c);
    background-size: 400% 100%;
    animation: border-cards 20s linear infinite;
}

.page--dark .card--promocodes::before {
    background: linear-gradient(to bottom left, #fffb001a 20%, #FFFF00, #ff00ff, #fb00ff2e 80%);
}
.card--promocodes::before {
    background: linear-gradient(315deg, rgba(255, 0, 255, 0.5) 0%, rgba(255, 255, 0, 0.5) 100%);
}
.card--promocodes:hover::before {
    clip-path: inset(-1px round 25px);
    padding: 2px;
    background: linear-gradient(90deg, #FFA500, #FFFF00, #ff00ff, #FFFF00, #FFA500);
    background-size: 400% 100%;
    animation: border-cards 20s linear infinite;
}

/* Card content */
.card__heading,
.card__text,
.card__counter,
.card__timer,
.card__tooltip {
    position: relative;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card__heading {
    width: 100%;
    height: auto;
    color: #FFFFFF;
    font-weight: 900;
    font-size: 17px;
    text-transform: uppercase;
    /*margin: 15px 0;*/
}
.card__text {
    height: auto;
	margin-left: 0; 
    margin-right: 0;
	color: #FFFFFF;
    font-weight: 300;
    font-size: 16px;
    line-height: 23px;
}
.card__counter {
    width: 100%;
    font-weight: 500;
    font-size: 2.2rem;
    margin: 0;
    padding: 0 3rem;
}

/* Gradient text effects */
.card--website .card__counter,
.card--website .card__heading,
.card__timer,
.popup__timer,
.logo-text,
.page--dark .logo-text:hover,
.popup__time-labels span {
    background: linear-gradient(45deg, #ff0000, #E200E2, #7878FA, #00ffff, #37C4F7, #7878FA, #E200E2, #ff0000);
    background-size: 600%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: glow 25s linear infinite;
}

.card--cashback .card__counter,
.card--cashback .card__heading,
.card--cashback .card__timer {
    background: linear-gradient(45deg, #00ff00, #00ff00, #00ff55, #00ffaa, #00ffff, #00aaff, #0055ff, #0000ff, #0055ff, #00aaff, #00ffff, #00ffaa, #00ff55, #00ff00, #00ff00);
    background-size: 600%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: glow 25s linear infinite;
}

.card--promocodes .card__counter,
.card--promocodes .card__heading,
.card--promocodes .card__timer {
    background: linear-gradient(45deg, #ffff00, #fffc00, #fff800, #ffcc00, #ff9900, #ff6600, #ff00aa, #ff00ff, #ff00aa, #ff6600, #ff9900, #ffcc00, #fff800, #fffc00, #ffff00);
    background-size: 600%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: glow 25s linear infinite;
}

/* Counter labels */
.card__counter::before,
.card__counter::after {
    position: absolute;
    color: white;
    font-weight: 300;
    font-size: 1rem;
    background: none !important;
    -webkit-text-fill-color: white !important;
    text-fill-color: white !important;
    top: 50%;
    transform: translateY(-50%);
}

.card--website .card__counter::before {
    content: "более";
    right: calc(100% - 5.5rem);
}
.card--cashback .card__counter::before,
.card--promocodes .card__counter::before {
    content: "до";
    right: calc(100% - 7rem);
}
.card--website .card__counter::after {
    content: "шт";
    left: calc(100% - 5.5rem);
}
.card--cashback .card__counter::after,
.card--promocodes .card__counter::after {
    content: "%";
    left: calc(100% - 7rem);
}

/* Timer */
.card__timer {
    width: 100%;
    font-size: 2.2rem;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    /*margin: 15px 0;*/
}

.card__timer>div {
    display: inline-block;
    min-width: 40px;
}

/* Buttons */
.btn {
    position: relative;
    width: 230px;
    height: 55px;
    line-height: 53px;
    text-decoration: none;
    vertical-align: top;
    font-weight: 400;
    font-size: 16px;
    padding: 1px 6px;
    text-align: center;
    -webkit-appearance: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    color: #fff;
    border: none;
    outline: none;
    background-color: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    /*margin: 20px 0;*/
    
}

.btn:focus {
    outline: 0;
}

.btn--gradient-1 {
    background: linear-gradient(45deg, #ff0000, #E200E2, #7878FA, #00ffff, #37C4F7, #7878FA, #E200E2, #ff0000);
    background-size: 600%;
    animation: glow 25s linear infinite;
    z-index: 1;
}

.page--dark .btn--gradient-1::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: inherit;
    background-size: inherit;
    border-radius: 1.2rem;
    z-index: -1;
    opacity: 0;
    filter: blur(20px);
    transition: opacity 0.5s ease;
    animation: glow 10s linear infinite;
}

.btn--gradient-1:hover::before {
    opacity: 1;
}

.page--dark .btn--stroke-2,
.page--dark .btn--stroke-3 {
    z-index: 1;
}

.page--dark .btn--stroke-2::before,
.page--dark .btn--stroke-3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 800%;
    z-index: -2;
    border-radius: 1rem;
    animation: btn-border 10s linear infinite;
    border: 1px solid transparent;
}

.page--dark .btn--stroke-2::after,
.page--dark .btn--stroke-3::after {
    content: "";
    position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    left: 1px;
    top: 1px;
    border-radius: 0.9rem;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.page--dark .btn--stroke-2::after,
.page--dark .btn--stroke-3::after {
    background-color: transparent;
    mix-blend-mode: normal;
    filter: none;
}

.page--dark .btn--stroke-2::after,
.page--dark .btn--stroke-3::after {
    filter: contrast(1.2) brightness(1.1);
}

.page--dark .btn--stroke-2.timer-ended::after,
.page--dark .btn--stroke-3.timer-ended::after {
    background-color: #0000ff;
    mix-blend-mode: luminosity;
    filter: contrast(1.2) brightness(1.1);
}

.page--dark .btn--stroke-2:hover::before,
.page--dark .btn--stroke-2:hover::after,
.page--dark .btn--stroke-3:hover::before,
.page--dark .btn--stroke-3:hover::after {
    opacity: 0;
}

.btn--gradient-2.btn--stroke-2 {
    background: linear-gradient(45deg, #00ff00, #00ff00, #00ff55, #00ffaa, #00ffff, #00aaff, #0055ff, #0000ff, #0055ff, #00aaff, #00ffff, #00ffaa, #00ff55, #00ff00, #00ff00);
    background-size: 800%;
    animation: btn-border 8s linear infinite;
}

.btn--gradient-3.btn--stroke-3 {
    background: linear-gradient(45deg, #ffff00, #fffc00, #fff800, #ffcc00, #ff9900, #ff6600, #ff00aa, #ff00ff, #ff00aa, #ff6600, #ff9900, #ffcc00, #fff800, #fffc00, #ffff00);
    background-size: 800%;
    animation: btn-border 8s linear infinite;
}

.page--dark .btn--stroke-2::before {
    background: linear-gradient(45deg, #00FFD5, #00ffff, #002BFF, #7B00FF, #00ffff, #002BFF, #00ffff);
    background-size: 800%;
}

.page--dark .btn--stroke-3::before {
    background: linear-gradient(45deg, #FF00FF, #F5FF00, #FF00FF, #F5FF00, #FF00FF, #F5FF00, #FF00FF);
    background-size: 800%;
}

/* Card animations */
.card__animation {
    position: absolute;
    transition: filter 1s ease, transform 1s ease;
    will-change: filter, transform;
    pointer-events: none;
    z-index: 2;
}

.card__animation img,
.card__animation dotlottie-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.card__animation-heart,
.card__animation-cashback,
.card__animation-gift {	
    left: 50%; 
    transform: translate(-50%, 0); 
    transform-origin: center center;
    transition: all 1s ease;
    margin: 0 auto; 
    display: block;
}
.card__animation-heart {
    top: 10px;
    width: 190px;
    height: auto;
}
.card__animation-cashback {
    top: 20px;
    width: 230px;
    height: auto;
}
.card__animation-gift {
    top: 3px;
    width: 165px;
    height: auto;
}

.page--dark .card__animation-heart,
.page--dark .card__animation-cashback,
.page--dark .card__animation-gift {
    filter: brightness(0.5) contrast(1.5);
}

@media (hover: hover) and (pointer: fine) {
    .card:hover .card__animation-heart,
    .card:hover .card__animation-cashback,
    .card:hover .card__animation-gift {
        filter: brightness(1) contrast(1);
		/* transform: scale(1.15); */
        transform: translate(-50%, 0) scale(1.15); 
    }
}
@media (max-width: 1023px) {
    .card__animation-heart,
    .card__animation-cashback,
    .card__animation-gift {
        left: 50% !important; 
        transform: translate(-50%, 0) !important; 
		margin: 0 auto; 
    }
    .card--active .card__animation-heart,
    .card--active .card__animation-cashback,
    .card--active .card__animation-gift {
        filter: brightness(1) contrast(1);
		/* transform: scale(1.15); */ 
        transform: translate(-50%, 0) scale(1.15) !important; 
    }
}


.card__animation-sparkle {
    left: 44px;
    top: 6px;
    width: 252px;
    height: 220px;
}

.card__animation-celebration {
    left: 26px;
    top: 378px;
    width: 288px;
    height: 187px;
}

.card__animation-white-star {
    left: 48px;
    top: 485px;
    width: 32px;
    height: 32px;
}

.card__animation-aqua-star {
    left: 266px;
    top: 510px;
    width: 40px;
    height: 40px;
}

.card__animation-yellow-star {
    left: 220px;
    top: 457px;
    width: 78px;
    height: 78px;
}

.card__animation-yellow-magenta-stars {
    left: 40px;
    top: 450px;
    width: 150px;
    height: 75px;
}

.card__animation-white-star-2 {
    left: 79px;
    top: 209px;
    width: 48px;
    height: 48px;
}

.card__animation-white-double-stars {
    left: 246px;
    top: 53px;
    width: 64px;
    height: 64px;
}

.card__animation-yellow-double-stars {
    left: 224px;
    top: 23px;
    width: 64px;
    height: 64px;
}

/* Blur elements */
.blur-element {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0;
    transform: translateZ(0);
    will-change: transform, filter, opacity;   
    z-index: -1;
}
/* Активное состояние для blur элементов */
.card--active .blur-element {
    opacity: 1 !important;
    transition: opacity 0.5s ease !important;
}

/* Hover effects for specific blur elements */
.page--dark .card--website:hover .blur-element--website-1,
.page--dark .card--website:hover .blur-element--website-2,
.page--dark .card--website:hover .blur-element--website-3,
.page--dark .card--cashback:hover .blur-element--cashback-1,
.page--dark .card--promocodes:hover .blur-element--promocodes-1,
.page--dark .card--promocodes:hover .blur-element--promocodes-2 {
    opacity: 1;
}

.blur-element--website-1 {
    left: 40px;
    top: 30px;
    width: 250px;
    height: 250px;
    background: linear-gradient(1deg, #0000ff 0%, #FF00FF 100%);
    filter: blur(70px) saturate(150%) contrast(150%);
}
.blur-element--cashback-1 {
    left: 45px;
    top: 10px;
    width: 230px;
    height: 230px;
    background: radial-gradient(ellipse, #ff00ff 0%, #0079ff 100%);
    filter: blur(70px) saturate(150%) contrast(150%);
}
.blur-element--promocodes-1 {
    left: 45px;
    top: 30px;
    width: 220px;
    height: 220px;
    background: linear-gradient(135deg, #ffff00 0%, #FF00FF 100%);
    filter: blur(70px) saturate(150%) contrast(150%);
}


/* Tooltips */
.card__tooltip {
    height: 0;
    opacity: 0;
    visibility: hidden;
    color: #FF0000;
    font-weight: 700;
    font-size: 17px;
    line-height: 15px;
    transition: opacity 0.3s ease, height 0.3s ease;
    overflow: hidden;
    width: 100%;
}
.card__tooltip p {
    margin-top: -15px;
}
.card__tooltip.active {
    height: 15px;
    opacity: 1;
    visibility: visible;
}

/* Popups */
.popup {
    position: absolute;
    overflow: hidden;
    text-align: left;
    visibility: hidden;
    left: 385px;
    top: 235px;
    width: 690px;
    height: 360px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;
    border-radius: 25px;
    z-index: 10;
}
.popup.active {
    visibility: visible;
    display: block;
    opacity: 1;
}
.popup--cashback {
    background-image: url('../images/popup_cashback.avif');
}
.popup--promocodes {
    background-image: url('../images/popup_promocodes.avif');
}
.popup__text {
    position: absolute;
    height: 42px;
    text-align: center;
    background-color: transparent;
    background-image: none;
    color: #FFFFFF;
    font-weight: 400;
}
.popup--cashback .popup__text {
    left: 32px;
    top: 130px;
    width: 276px;
}
.popup--promocodes .popup__text {
    left: 19px;
    top: 126px;
    width: 320px;
}
.popup__text div {
    text-align: center;
}

.popup__timer {
    position: absolute;
    left: 30px;
    top: 200px;
    width: 300px;
    text-align: center;
    font-size: 2.85rem;
    font-weight: 900;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

.popup__blur {
    position: absolute;
    filter: blur(70px);
    transition: filter 500ms linear;
}
.popup__blur--blue-1,
.popup__blur--blue-2 {
    filter: blur(70px);
    transition: filter 500ms linear;
	background: linear-gradient(45deg, #FFFF00 0%, #FE00FE 100%);
}
.popup__blur--green-yellow-1,
.popup__blur--green-yellow-2 {
    filter: blur(60px) saturate(150%);
    transition: filter 500ms linear;
}
.popup__blur--magenta-1,
.popup__blur--magenta-2 {
    filter: blur(40px) saturate(150%);
    transition: filter 500ms linear;
}
.popup__blur--blue-1 {
    left: 16px;
    top: 256px;
    width: 174px;
    height: 102px;
    animation: slide-left-in 4000ms linear 0ms infinite alternate-reverse;
}
.popup__blur--blue-2 {
    left: 26px;
    top: 256px;
    width: 174px;
    height: 102px;
    animation: swash-in 3000ms linear 0ms infinite alternate-reverse;
}
.popup__blur--green-yellow-1 {
    left: 0px;
    top: 200px;
    width: 72px;
    height: 90px;
    animation: fold 3000ms ease-in-out 0ms infinite alternate-reverse both;
}
.popup__blur--green-yellow-2 {
    left: 10px;
    top: 200px;
    width: 72px;
    height: 90px;
    animation: fold 3000ms ease-in-out 0ms infinite alternate-reverse both;
}
.popup__blur--magenta-1 {
    left: 0px;
    top: 260px;
    width: 97px;
    height: 100px;
    animation: transform-rotate 5000ms linear 0ms infinite normal both;
}
.popup__blur--magenta-2 {
    left: 10px;
    top: 260px;
    width: 97px;
    height: 100px;
    animation: transform-rotate 5000ms linear 0ms infinite normal both;
}

.popup__time-labels {
    position: absolute;
    left: 58px;
    top: 260px;
    width: 240px;
    height: 14px;
}

.popup__time-labels p {
    display: flex;
    justify-content: space-between;
    width: 240px;
    font-weight: 700;
    font-size: 15px;
    line-height: 14px;
    gap: 50px;
}

.popup__time-labels span {
    flex: 1;
    text-align: center;
}

.popup__time-labels p span:nth-child(1) {
    position: relative;
    left: 2px;
}

.popup__time-labels p span:nth-child(3) {
    position: relative;
    right: 1px;
}

.popup__close-btn {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    right: 1rem;
    top: 0.75rem;
}
.popup__close-btn::before,
.popup__close-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #281435;
    transform-origin: center;
    border-radius: 2px;
}
.popup__close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.popup__close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}



.donut-container {
    position: absolute;
    left: 20px;
    top: 111px;
    width: 207px;
    height: 207px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;;
}

/* Animation circles */
.page--dark .animation-circle {
    position: absolute;
    display: block;
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.page--dark .animation-circle--left {
    left: -15rem;
    top: 25rem;
}
.page--dark .animation-circle--right {
    right: clamp(-300px, -10rem, -100px);
    top: clamp(200px, 25rem, 600px);
    width: min(100%, 1920px);
    margin-right: -10%;
}
.page--dark .animation-circle__item {
    position: absolute;
    border-radius: 50%;
    width: clamp(150px, 30vmin, 550px);
    height: clamp(150px, 30vmin, 550px);
    filter: blur(80px);
    pointer-events: none;
    will-change: transform;
}
.page--dark .animation-circle__item--magenta {
    background: #FF00FF;
    left: 20vmin;
    top: 20vmin;
    animation: magenta 8s ease alternate infinite;
}
.page--dark .animation-circle__item--aqua {
    background: #0093ff;
    left: 60vmin;
    top: 40vmin;
    animation: aqua 10s ease alternate infinite;
}
.page--dark .animation-circle__item--blue {
    background: #9800ff;
    left: 30vmin;
    top: 50vmin;
    animation: blue 5s ease alternate infinite;
}
.page--dark .animation-circle__item--yellow {
    background: #FFD700;
    right: min(30%, 400px);
    top: min(20%, 280px);
    filter: blur(80px) brightness(1.1);
    animation: yellow 6s ease alternate infinite;
}
.page--dark .animation-circle__item--deeppink {
    background: #FF1493;
    right: min(30%, 300px);
    top: min(50%, 350px);
    filter: blur(80px) contrast(1.2);
    animation: deeppink 7s ease alternate infinite;
}
.page--dark .animation-circle__item--blueviolet {
    background: #8A2BE2;
    right: min(100%, 500px);
    top: min(50%, 340px);
    filter: blur(80px) saturate(1.5);
    animation: blueviolet 10s ease alternate infinite;
}
.page:not(.page--dark) .animation-circle {
    display: none;
}
 @keyframes magenta {
     100% { transform: translate(100%, -50%); }
 }  
 @keyframes aqua {
     100% { transform: translate(-150%, 50%); }
 }  
 @keyframes blue {
     100% { transform: translate(50%, -100%) scale(0.5, 1); }
 }   
 @keyframes yellow {
     100% { transform: translate(min(80%, 200px), min(-10%, -100px)); }
 }   
 @keyframes deeppink {
     100% { transform: translate(min(40%, 100px), min(-30%, -150px)) scale(0.7, 1.3); }
 }  
 @keyframes blueviolet {
     100% { transform: translate(min(150%, 600px), min(30%, 200px)); }
 }








@media (max-width: 479px) {
.blur-element--cashback-1 {
    left: 45px;
    /*top: 550px;*/
	}
.blur-element--promocodes-1 {
    left: 45px;
    /*top: 1200px;*/
	}
}






/* @media (max-width: 1439px) { */
    /* .cards-grid { */
        /* grid-template-columns: repeat(3, 1fr); */
        /* gap: 30px; */
        /* margin: 0 auto; */
    /* }    */
    /* .card { */
        /* width: 100%; */
        /* max-width: 340px; */
		/* height: 580px; */
    /* } */
	/* .card__text {  */
		/* max-width: 90%; */
	/* } */
/* } */



@media (min-width: 1440px) {
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin: 0 auto;
    }   
    .card {
        width: 100%;
        max-width: 355px;
		height: 580px;
    }
	.card__text { 
		max-width: 95%;
	}
	.card__tooltip {
    width: min(90%, 300px);
	}
}

/* Hover effects */
@media (hover: none) or (pointer: coarse) {
    .blur-element {
        opacity: 0;
    }
}

@media (hover: hover) {
    .popup__close-btn:hover::before,
    .popup__close-btn:hover::after {
        background: linear-gradient(90deg, #FF00FF, #00FFFF);
        transition: background 1s ease;
    }
}