/* hero: three vertical cards stacked on each other; swipe to flip, hover to enlarge */
body .services .slides{position:relative;display:block;overflow:visible;height:clamp(322px,92vw,350px);border:0;border-radius:0;box-shadow:none;background:none;touch-action:pan-y;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
body .services .slides .service{--tx:0px;--ty:0px;--rot:0deg;--sc:1;position:absolute;left:50%;top:6px;width:min(62vw,236px);aspect-ratio:3/4;min-height:0;margin:0;padding:0;display:block;border-radius:24px;overflow:hidden;
 background:#1a1226;border:1px solid #ffffff2e;box-shadow:0 18px 38px #0009;transform-origin:50% 90%;
 transform:translateX(calc(-50% + var(--tx))) translateY(var(--ty)) rotate(var(--rot)) scale(var(--sc));
 transition:transform .45s cubic-bezier(.2,.9,.25,1),box-shadow .3s,opacity .3s;cursor:grab;scroll-snap-align:none}
body .services .slides .service[data-pos="0"]{z-index:3}
body .services .slides .service[data-pos="1"]{--tx:46px;--ty:12px;--rot:6deg;--sc:.93;z-index:2;filter:brightness(.8)}
body .services .slides .service[data-pos="2"]{--tx:-46px;--ty:20px;--rot:-6deg;--sc:.86;z-index:1;filter:brightness(.65)}
body .services .slides .service.dragging{transition:none;cursor:grabbing}
@media(hover:hover){
 body .services .slides .service[data-pos="0"]:hover{--sc:1.07;--ty:-8px;box-shadow:0 26px 52px #000b,0 0 34px #c43bd555}
 body .services .slides .service[data-pos="1"]:hover,body .services .slides .service[data-pos="2"]:hover{--sc:1;filter:brightness(1)}
}
body .services .slides .service:not([data-pos="0"]) .primary{pointer-events:none}

/* photo fills the card, text sits on a soft gradient at the bottom */
body .services .slides .service .service-art{position:absolute;inset:0;width:100%;max-width:none;height:100%;transform:none}
body .services .slides .service .service-art video,body .services .slides .service .service-art img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;box-shadow:none;pointer-events:none;-webkit-user-drag:none}
body .services .slides .service>div:first-child{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:46px 14px 14px;background:linear-gradient(180deg,transparent,#0b0614d9 55%,#0b0614f2)}
body .services .slides .service .eyebrow{display:block;font-size:8px;letter-spacing:.8px;color:#e6c8ff}
body .services .slides .service h1{margin:5px 0 3px;font-size:21px;line-height:1.1;letter-spacing:-.5px;color:#fff}
body .services .slides .service p{margin:0 0 10px;font-size:12px;line-height:1.4;color:#e9dcf3}
body .services .slides .service .primary{width:100%;min-height:36px;justify-content:center}
body .services .carousel-controls{margin-top:0;gap:12px}
body .services .carousel-controls>button{width:22px;height:22px;font-size:12px;line-height:1}
body .services .slide-dots{gap:6px}
body .services .slide-dots button{width:5px;height:5px}
body .services .slide-dots button[aria-current=true]{width:16px}
body .services{padding-bottom:8px!important}
@media(prefers-reduced-motion:reduce){body .services .slides .service{transition:none}}

.brand{white-space:nowrap;font-size:24px}

/* compact search + category picker */
#videoCategories{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:none}
#videoCategories::-webkit-scrollbar{display:none}
#videoCategories button{flex:none;white-space:nowrap}
.cat-row{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.cat-row .search{flex:1;min-width:0;width:auto;max-width:none;margin:0;height:38px;padding:0 11px;gap:7px;border-radius:12px}
.cat-row .search>span{font-size:19px;line-height:1}
.cat-row .search input{font-size:13.5px}
.cat-btn{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;max-width:46%;padding:0 12px;border-radius:12px;border:1px solid #714194;background:linear-gradient(115deg,#924bfa55,#c43bd544);color:#fff;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.cat-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-btn i{flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.cat-sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:min(100%,520px);max-height:78dvh;overflow:hidden;padding:10px 14px calc(14px + env(safe-area-inset-bottom));border:1px solid var(--line,#ffffff22);border-bottom:0;border-radius:24px 24px 0 0;background:var(--surface,#1b1c27);color:var(--text,#fff);box-sizing:border-box}
.cat-sheet[open]{display:flex;flex-direction:column;animation:gf-up .22s ease-out}
.cat-sheet::backdrop{background:#000a;backdrop-filter:blur(4px)}
.cat-sheet h2{margin:4px 4px 10px;font-size:19px}
.cat-list{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0}
.cat-list button{display:flex;justify-content:space-between;align-items:center;padding:13px 12px;border-radius:14px;background:none;border:0;color:inherit;font:inherit;font-size:15px;text-align:left;cursor:pointer}
.cat-list button:hover{background:var(--surface2,#ffffff12)}
.cat-list button.on{background:linear-gradient(115deg,#924bfa44,#e54e9e33);font-weight:700}
.cat-list button.on::after{content:"✓";color:#e9c8ff}

/* «В тренде» chip: pink dot + caps, like the «СЕЙЧАС» pill */
.chip-trend{display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px!important;font-weight:750!important;color:#ffd3ea!important;background:linear-gradient(115deg,#e54e9e33,#924bfa2e)!important;border:1px solid #e54e9e80!important}
.chip-trend::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#ff5fae;box-shadow:0 0 8px #ff5fae;animation:gf-pulse 1.6s ease-in-out infinite}
.chip-trend.active{color:#fff!important;background:linear-gradient(115deg,#e54e9e,#c43bd5)!important;border-color:transparent!important}
.chip-trend.active::before{background:#fff;box-shadow:0 0 8px #fff}
body .services .slides .service[data-pos="3"]{--tx:0px;--ty:26px;--rot:0deg;--sc:.8;z-index:0;opacity:0;pointer-events:none}

.hero-btns{display:flex;gap:6px}
body .services .slides .service .hero-btns .primary{flex:1;width:auto;min-width:0;padding:0 8px!important}
.hero-all{flex:none;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid #ffffff55;background:#ffffff1f;color:#fff;font:inherit;font-size:12.5px;font-weight:650;white-space:nowrap;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body .services .slides .service:not([data-pos="0"]) .hero-all{pointer-events:none}
body .services .slides .service .service-art video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
body .services .slides .service[data-pos="4"]{--tx:0px;--ty:26px;--rot:0deg;--sc:.8;z-index:0;opacity:0;pointer-events:none}

/* round theme button: never squeezed by the header */
#theme{flex:none;width:40px;height:40px;min-width:40px;padding:0;font-size:22px}
.brand{min-width:0;flex:0 1 auto}

/* header: everything fits in one tidy row */
header{gap:6px!important;padding-left:16px!important;padding-right:16px!important}
.brand{font-size:21px!important;gap:6px;overflow:visible}
.brand-icon{font-size:20px}
.bal-chip{flex:none;padding:3px 4px 3px 8px!important;gap:5px!important;font-size:13px!important}
.bal-chip .bal-buy{padding:0 10px!important;min-height:28px!important;height:28px;font-size:12.5px!important;display:inline-flex;align-items:center}
#theme{width:38px;height:38px;min-width:38px;font-size:20px}

/* «Осень» chip: warm autumn colours with a falling leaf */
.chip-autumn{position:relative;display:inline-flex;align-items:center;gap:6px;overflow:hidden;color:#ffe2bf!important;font-weight:700!important;background:linear-gradient(115deg,#7a2e0e,#b5501a 55%,#d98a1e)!important;border:1px solid #f0a54a99!important;box-shadow:0 0 10px #e0782a44}
.chip-autumn::before{content:"🍁";font-size:13px;line-height:1;display:inline-block;animation:chip-leaf 2.8s ease-in-out infinite}
.chip-autumn::after{content:"🍂";position:absolute;right:4px;top:-12px;font-size:9px;opacity:.85;animation:chip-fall 3.2s linear infinite}
.chip-autumn.active{color:#fff!important;background:linear-gradient(115deg,#c2410c,#ea7a1a 55%,#f5b02e)!important;border-color:transparent!important;box-shadow:0 0 16px #f08a2a88}
@keyframes chip-leaf{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(14deg) translateY(-1px)}}
@keyframes chip-fall{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:.9}100%{transform:translateY(40px) rotate(160deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.chip-autumn::before,.chip-autumn::after{animation:none}.chip-autumn::after{display:none}}

/* «Хэллоуин» chip: night purple with orange glow and a pumpkin */
.chip-halloween{position:relative;display:inline-flex;align-items:center;gap:6px;overflow:hidden;color:#ffd9b0!important;font-weight:700!important;background:linear-gradient(115deg,#1d0b2e,#3b1150 55%,#5a1a3a)!important;border:1px solid #ff8a1f99!important;box-shadow:0 0 10px #ff7a1a44}
.chip-halloween::before{content:"🎃";font-size:13px;line-height:1;display:inline-block;animation:chip-pumpkin 2.4s ease-in-out infinite}
.chip-halloween::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 50%,#ff8a1f55,transparent 45%);animation:chip-glow 2.4s ease-in-out infinite;pointer-events:none}
.chip-halloween.active{color:#fff!important;background:linear-gradient(115deg,#ff7a1a,#e0461a 55%,#7a1fa2)!important;border-color:transparent!important;box-shadow:0 0 16px #ff7a1a88}
@keyframes chip-pumpkin{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-2px) rotate(6deg)}}
@keyframes chip-glow{0%,100%{opacity:.5}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.chip-halloween::before,.chip-halloween::after{animation:none}}

/* all category chips: one font size, weight and height */
#filters button,#videoCategories button{font-size:12px!important;font-weight:500!important;text-transform:none!important;letter-spacing:normal!important;height:32px;line-height:1}

/* logo picture instead of the star + wordmark */
.brand-logo{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0}
.brand-logo img{display:block;height:58px;width:58px;margin:-6px 0 -6px -6px}

/* bigger star next to the name */
.brand .brand-icon{font-size:30px!important;line-height:1;margin-right:2px;filter:drop-shadow(0 0 8px #c43bd599)}

/* name a little smaller than the star */
.brand{font-size:18px!important}

/* light theme: the star must be visible on a light background */
body.light .brand .brand-icon{color:#8a3fd8!important;text-shadow:none;filter:drop-shadow(0 1px 5px #8a3fd855)}

/* name back to its size, star and text on one centre line */
.brand{font-size:21px!important;display:inline-flex!important;align-items:center;gap:7px!important}
.brand .brand-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:30px!important;line-height:1;margin:0}

/* the star: tiny sparks flash around it now and then (small and slow) */
.brand .brand-icon{position:relative;animation:none;transform:none;filter:drop-shadow(0 0 8px #c43bd599)}
.brand .brand-icon::after{content:none}
.brand-icon i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 4px 1px #e9c8ff;opacity:0;transform:scale(0);pointer-events:none;animation:brand-spark 7s ease-in-out infinite}
.brand-icon i:nth-of-type(1){left:1px;top:3px;animation-delay:0s}
.brand-icon i:nth-of-type(2){right:0;top:1px;animation-delay:1.8s;width:2px;height:2px}
.brand-icon i:nth-of-type(3){right:2px;bottom:2px;animation-delay:3.6s}
.brand-icon i:nth-of-type(4){left:4px;bottom:0;animation-delay:5.2s;width:2px;height:2px}
@keyframes brand-spark{0%,100%{opacity:0;transform:scale(0)}8%{opacity:1;transform:scale(1)}18%{opacity:.9;transform:scale(.8)}32%{opacity:0;transform:scale(0)}}
body.light .brand .brand-icon{animation:none;filter:drop-shadow(0 1px 5px #8a3fd855)}
body.light .brand-icon i{background:#8a3fd8;box-shadow:0 0 4px 1px #b98cf0}
@media(prefers-reduced-motion:reduce){.brand-icon i{animation:none;display:none}}

/* round icon buttons: the drawing sits exactly in the middle */
.dialog-top>button,.gf-close,.fx-close{display:grid!important;place-items:center;padding:0!important;line-height:1;font-size:0}
.dialog-top>button svg,.gf-close svg,.fx-close svg{width:16px;height:16px;display:block;margin:0}
#theme{font-size:0!important;line-height:0;position:relative;color:var(--text,#fff)}
#theme::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;background:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8'/%3E%3C/svg%3E") center/contain no-repeat}
body.light #theme::before{
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4 8.5 8.5 0 1 0 20 14.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4 8.5 8.5 0 1 0 20 14.5Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* a light glint runs across the star every few seconds */
.brand .brand-icon{-webkit-text-fill-color:transparent;color:transparent;
 background:linear-gradient(115deg,#e49aff 38%,#ffffff 50%,#e49aff 62%) 140% 0/260% 100%;-webkit-background-clip:text;background-clip:text;animation:brand-glint 4.5s ease-in-out infinite}
@keyframes brand-glint{0%,30%{background-position:140% 0}65%,100%{background-position:-40% 0}}
body.light .brand .brand-icon{background:linear-gradient(115deg,#8a3fd8 38%,#e7cdff 50%,#8a3fd8 62%) 140% 0/260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:brand-glint 4.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.brand .brand-icon,body.light .brand .brand-icon{animation:none;background-position:0 0;background-image:linear-gradient(#e49aff,#e49aff)}body.light .brand .brand-icon{background-image:linear-gradient(#8a3fd8,#8a3fd8)}}

/* name: a still gradient in the letters (white → lilac → pink) */
.brand .brand-name{background:linear-gradient(100deg,#ffffff,#e4b8ff 55%,#ff8fc9);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:1px}
body.light .brand .brand-name{background:linear-gradient(100deg,#2a1250,#7a35c9 55%,#d6338f);-webkit-background-clip:text;background-clip:text}

/* balance chip and theme button: a bit smaller and lower in height */
.bal-chip{padding:2px 3px 2px 7px!important;gap:5px!important;font-size:12px!important}
.bal-chip .bal-coin{width:17px;height:17px;font-size:10px}
.bal-chip .bal-buy{height:24px!important;min-height:24px!important;padding:0 9px!important;font-size:11.5px!important}
#theme{width:32px!important;height:32px!important;min-width:32px!important}
#theme::before{width:17px;height:17px;margin:-8.5px 0 0 -8.5px}

/* chip and theme button level with the logo's visual centre */
.bal-chip,#theme{position:relative;top:2px}

/* «+ Создать» on the cards, same look as in the catalogue */
body .services .slides .service .hero-btns .primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700}
body .services .slides .service .hero-btns .primary svg{width:16px;height:16px;flex:none}