.story__row{display: flex; justify-content: center; gap: 40px}
.story__link{display: flex; width:calc((100% - 240px) / 7);flex-direction: column; text-align: center; gap: 20px; font: 700 20px/22px 'Philosopher'; color: #402714; text-decoration: none; cursor: pointer; transition: transform 0.3s ease; position: relative; align-items: center}
.story__link:hover{transform: scale(1.05)}
.story__image-wrapper{position: relative; width: 120px; height: 120px; border-radius: 20px; overflow: visible; display: flex; align-items: center; justify-content: center}
.story-border-single{transition: all 0.3s ease; box-shadow: 0 0 0 6px #402714}
.story__image{width: 100%; height: 100%; object-fit: cover; border-radius: 20px; transition: opacity 0.3s ease; position: absolute; top: 0; left: 0; box-shadow: 0 0 0 3px #D5C5BA}
.story__image--static{opacity: 1}
.category-slide-in .btn{text-align: center; position: relative; z-index: 1000}
.story__image--gif{opacity: 0}
.story__link:hover .story__image--gif{opacity: 1}
.story-cubes-wrapper{position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; display: flex; flex-wrap: wrap; gap: 5px; pointer-events: none; z-index: -1; border-radius: 25px; overflow: hidden}
.story-cube{transition: all 0.3s ease; background: #402714; border-radius: 0; flex: 1 0 calc(50% - 2.5px); min-height: 6px}
.story__title{font: 700 20px/22px 'Philosopher'; color: #402714}
.story__link:hover .story-cube{background: #CA6C25}
.story__link:hover .story-border-single{box-shadow: 0 0 0 6px #CA6C25}
.story-modal{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000}
.story-modal.active{display: block}
.story-modal__overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9)}
.story-modal__content{position: relative; width: 100%; height: 100%; overflow: hidden}
.story-modal__close{position: absolute;top: 20px;right: 20px;background: #fff;border: none;border-radius: 5px;width: 40px;height: 40px;color: #402714;cursor: pointer;z-index: 1000;display: flex;align-items: center;justify-content: center;transition: background 0.3s ease}
.story-modal__close:hover{background: #402714;color: #fff;}
.categories-carousel{position: relative; width: 100%; height: 100%; display: flex; align-items: center; overflow: hidden}
.categories-carousel__track{display: flex; height: 80%; transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94); align-items: center; gap: 30px; padding: 0 calc(50% - 200px)}
.category-slide{flex: 0 0 400px; max-width: 400px; height: 700px; max-height: 700px; position: relative; display: flex; flex-direction: column}
.category-slide-in{width: 100%; height: 100%; background: #fff; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: all 0.3s ease; opacity: 0.6; transform: scale(0.85)}
.category-slide.active .category-slide-in{opacity: 1; transform: scale(1); box-shadow: 0 8px 30px rgba(0,0,0,0.15); z-index: 2}
.category-slide:not(.active) .category-slide-in{cursor: pointer}
.category-slide:not(.active) .category-slide-in:hover{opacity: 0.8; transform: scale(0.9)}
.category-progress{position: absolute; top: 10px; left: 10px; right: 90px; height: 3px; display: flex; gap: 3px; z-index: 20}
.category-progress__item{flex: 1; height: 100%; background: rgba(255,255,255,0.4); border-radius: 2px; overflow: hidden}
.category-progress__fill{height: 100%; background: #ffffff; border-radius: 2px; width: 0%; transition: width 0.1s linear}
.category-progress__fill.completed{width: 100% !important}
.stories-carousel{position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 20px}
.stories-carousel__track{display: flex; height: 100%; width: 100%; transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94)}
.story-content{flex: 0 0 100%; height: 100%; display: flex; flex-direction: column; position: relative; z-index: 1}
.story-content__logo{position: absolute; top: 63px; left: 30px; z-index: 15}
.story-content__logo img{height: 30px; width: auto;}
.story-content__image{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1}
.story-content__image::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 2}
.story-content__image img,.story-content__image video{width: 100%; height: 100%; object-fit: cover; border-radius: 20px; position: relative; z-index: 1}
.story-content__text{flex: 1; padding: 30px; color: #FFFFFF; display: flex; flex-direction: column; justify-content: flex-end; position: relative; z-index: 10; min-height: 100%}
.story-content__subtitle{font: 700 26px/30px 'Philosopher'; color: #FFFFFF; margin: 0 0 15px 0}
.story-content__description{font-size: 16px; line-height: 22px; color: #FFFFFF; margin-bottom: 20px}
.story-content__features{list-style: none; padding: 0; /* margin:0 0 50px 0; */}
.story-content__features li{font-size: 16px; line-height: 22px; color: #FFFFFF; margin-bottom: 8px; padding-left: 15px; position: relative}
.story-content__features li::before{content: '•'; position: absolute; left: 0; color: #FFFFFF}
.story-nav{display: none}
.swipe-indicator{white-space: nowrap; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); color: white; font-size: 14px; background: rgba(0,0,0,0.5); padding: 8px 16px; border-radius: 20px; z-index: 30; opacity: 0; transition: opacity 0.3s ease}
.swipe-indicator.show{opacity: 1}
.story-top-panel{position: absolute; top: 20px; left: 20px; right: 20px; display: flex; align-items: center; z-index: 1000; height: 30px}
.progress-section{flex: 0 0 75%; padding-right: 15px}
.navigation-section{flex: 0 0 25%; margin: -10px 0 0 0px; display: flex; gap: 10px; justify-content: flex-end;}
.nav-btn{width: 32px; height: 32px; background: #fff; color: #402714; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; padding: 0;}
.nav-btn:hover{color: #fff; background: #402714;}
.story-content::before,.story-content::after{content: ''; position: absolute; top: 100px; bottom:100px; width: 50%; z-index: 25}
.story-content::before{left: 0}
.story-content::after{right: 0}
.story-content__controls{position: absolute; top: 60px; z-index: 1000; right: 20px;}
.story-content__controls .sound-control{height: 30px; display: flex; align-items: center; gap: 5px; background: #fff; border-radius: 5px; padding: 0 5px; color: #402714; cursor: pointer; transition: all 0.3s ease; font-size: 14px; font-weight: 700; line-height: 1;}
.story-content__controls .sound-control:hover{background: #402714; color: #fff}
.story-content__controls .sound-control span{display:flex; height:100%; align-items:center}
.category-slide.slide-next{animation: slideFromRight 0.4s ease-out forwards}
.category-slide.slide-prev{animation: slideFromLeft 0.4s ease-out forwards}
.category-slide.slide-out-next{animation: slideToLeft 0.4s ease-out forwards}
.category-slide.slide-out-prev{animation: slideToRight 0.4s ease-out forwards}
@keyframes slideFromRight{
	from{opacity: 0; transform: translateX(100px) scale(0.9)}
    to{opacity: 1; transform: translateX(0) scale(1)}
}
@keyframes slideFromLeft{
	from{opacity: 0; transform: translateX(-100px) scale(0.9)}
    to{opacity: 1; transform: translateX(0) scale(1)}
}
@keyframes slideToLeft{
	from{opacity: 1; transform: translateX(0) scale(1)}
    to{opacity: 0; transform: translateX(-100px) scale(0.9)}
}
@keyframes slideToRight{
	from{opacity: 1; transform: translateX(0) scale(1)}
    to{opacity: 0; transform: translateX(100px) scale(0.9)}
}
@media(min-width: 576px){.swipe-indicator{display:none !important}
    .categories-carousel{position: relative; width: 100%; height: 100%; display: flex; align-items: center; overflow: hidden}
    .categories-carousel__track{display: flex; height: 80%; transition: transform 0.5s ease; align-items: center; gap: 30px; padding: 0; margin: 0 auto}
    .category-slide{flex: 0 0 400px; height: 700px; transition: all 0.3s ease}
    .category-slide.active{transform: scale(1); opacity: 1; z-index: 2}
    .category-slide:not(.active){transform: scale(0.85); opacity: 0.6}}
@media(max-width: 1499px){
	.story__row{gap:30px}
    .story__link{width:calc((100% - 180px) / 7); gap: 15px}
    .story__image-wrapper{width: 110px; height: 110px}
    .story-cube{min-height: 5px}
    .story__title{font: 700 18px/20px 'Philosopher'}
}
@media(max-width: 1199px){
	.story__row{gap:20px}
    .story__link{width:calc((100% - 120px) / 7); gap: 10px}
    .story__image-wrapper{width: 95px; height: 95px}
    .story-cube{min-height: 4px}
    .story__title{font: 700 16px/18px 'Philosopher'}
}
@media(max-width: 991px){
	.story__row{gap:30px; flex-wrap: wrap}
    .story__link{width: calc((100% - 90px) / 4)}
    .story__image-wrapper{width: 150px; height: 150px}
    .story-cube{min-height: 6px}
}
@media(max-width: 767px){
	.story__row{gap:20px}
    .story__link{width: calc((100% - 60px) / 4)}
    .story__image-wrapper{width: 110px; height: 110px}
    .story-cube{min-height: 5px}
}
@media(max-width: 575px){
	.categories-carousel{width:100%; height: 100%; align-items: stretch}
    .categories-carousel__track{height: 100%; padding: 0; gap: 0; transform: none !important; width: 100%}
    .category-slide{flex: 0 0 100%; max-width: 100%; height: 100%; max-height: 100%; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.3s ease; pointer-events: none}
    .category-slide.active{opacity: 1; pointer-events: all}
    .category-slide-in{width: 100%; height: 100%; border-radius: 0; opacity: 1; transform: scale(1); box-shadow: none}
    .category-slide:not(.active) .category-slide-in{cursor: default; opacity: 0}
    .category-slide:not(.active) .category-slide-in:hover{opacity: 0; transform: scale(1)}
    .stories-carousel{border-radius: 0; width: 100%; height: 100%}
    .stories-carousel__track{height: 100%; width: 100%}
    .story-content{border-radius: 0; width: 100%; height: 100%; position: relative; cursor: pointer}
    .story-content::before{content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 70%; z-index: 25}
    .story-content::after{content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 70%; z-index: 25}
    .story-content__image,.story-content__image img,.story-content__image video{border-radius: 0; width: 100%; height: 100%}
    .story-content__logo{top: 65px; left: 20px}
    .story-content__logo img{height: 30px;}
    .story-content__text{padding: 20px; justify-content: flex-end; width: 100%; height: 100%}
    .story-content__subtitle{font: 700 22px/26px 'Philosopher'}
    .story-content__description,.story-content__features li{font-size: 14px; line-height: 20px}
       .story-modal__close{top: 15px; right: 15px; width: 36px; height: 36px; background: #fff; border-radius: 5px;}
    .story-modal__close svg{width: 24px; height: 24px}
    .category-progress{top: 15px; left: 15px; right: 15px}
    .story__image-wrapper{width: 20vw; height: 20vw; min-width: 80px; min-height: 80px}
    .story-cube{min-height: 4px}
    .story-content__image img{height: 100vh !important}
    .categories-carousel__track{transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94)}
    .category-slide{transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94)}
    .story-top-panel{top: 17px; left: 5px; right: 55px; height: 25px}
    .nav-btn{width: 28px; height: 28px}
    .story-content__controls{top: 65px; right: 15px;}
    .story-content__controls .sound-control{padding: 5px 10px; font-size: 13px}
    .story-content::before,.story-content::after{top: 115px; bottom: 70px}
	.navigation-section{display:none}
}
@media(max-width: 460px){
	.story__link{width:calc((100% - 20px) / 2)}
    .story__image-wrapper{width: 43vw; height: 43vw; min-width: 70px; min-height: 70px}
    .story-cube{min-height: 5px}
}