.packs-section{padding:3rem;position:relative;overflow:hidden;background:transparent;text-align:center;box-sizing:border-box;font-family:'Montserrat',sans-serif}
.packs-section *{box-sizing:border-box}
.waves-top,.waves-bottom{position:absolute;top:0;left:0;width:100%;overflow:hidden;line-height:0;transform:rotate(180deg);z-index:1}
.waves-bottom{top:auto;bottom:0;transform:rotate(0)}
.waves-top svg,.waves-bottom svg{position:relative;display:block;width:calc(100% + 1.3px);height:80px}
.waves-top .shape-fill{fill:var(--light-bg)}
.waves-bottom .shape-fill{fill:var(--light-bg)}
body.dark-mode .waves-top .shape-fill,body.dark-mode .waves-bottom .shape-fill{fill:#10102ab3}
.packs-title{text-align:center;font-size:2rem;font-weight:800;margin-bottom:3.5rem;margin-top:0;background:var(--gradient-alt);background-size:100% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;text-transform:uppercase;letter-spacing:-.5px;position:relative;z-index:2;width:100%;display:block}
.packs-title::after{content:"";position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:100px;height:5px;background:var(--gradient);border-radius:5px}
.packs-description{text-align:center;max-width:800px;margin:0 auto 3.5rem;font-size:1.2rem;line-height:1.8;color:var(--text);position:relative;z-index:2}
.packs-container{display:flex;flex-wrap:nowrap;gap:25px;justify-content:center;padding:30px 20px;background:transparent;width:100%;max-width:1300px;margin:0 auto;position:relative;z-index:3}
.pack-structure{position:relative;background:linear-gradient(165deg,#fff,#f8f9fa);border-radius:20px;padding:25px 15px 15px;width:24%;min-width:240px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);z-index:1;border:2px solid var(--primary);transition:all .3s ease,background .6s ease,color .6s ease;height:auto;flex:1 1 auto;box-sizing:border-box}
body.dark-mode .pack-structure{background:linear-gradient(165deg,#14182acc,#0a0f1ee6);border:2px solid #2b7fff4d}
.pack-structure:hover{transform:translateY(-10px);box-shadow:0 15px 30px #2b7fff33}
.featured{background:linear-gradient(165deg,#fcfcff,#f5f7ff);box-shadow:var(--shadow-md);z-index:2;border:2px solid var(--secondary);transform:scale(1.03)}
body.dark-mode .featured{background:linear-gradient(165deg,#1e233ccc,#14192de6);border:2px solid #8338ec80}
.featured:hover{transform:translateY(-10px) scale(1.03);box-shadow:0 20px 40px #2b7fff33}
.business-border{border:3px solid #7209b7!important;box-shadow:0 10px 30px #7209b74d!important}
body.dark-mode .business-border{border:3px solid #7209b7b3!important;box-shadow:0 10px 30px #7209b733!important}
.badge-premium{position:absolute;top:-14px;left:0;right:0;margin:0 auto;z-index:10;height:28px;width:fit-content;animation:pulse 2s infinite ease-in-out}
.badge-content{background:linear-gradient(90deg,#2B7FFF,#8338ec);border-radius:20px;padding:4px 12px 4px 8px;display:flex;align-items:center;gap:4px;font-size:.7rem;font-weight:600;color:#fff;letter-spacing:.5px;box-shadow:0 2px 6px #2b7fff4d;height:100%;white-space:nowrap}
@keyframes pulse {
0%{transform:scale(1)}
50%{transform:scale(1.05)}
100%{transform:scale(1)}
}
.featured-badge .badge-content{background:linear-gradient(90deg,#2B7FFF,#3a0ca3);box-shadow:0 2px 8px #2b7fff66}
.elite-badge .badge-content{background:linear-gradient(90deg,#7209b7,#8338ec);box-shadow:0 2px 8px #8338ec66}
.badge-icon{display:flex;align-items:center;justify-content:center;background:#ffffff26;border-radius:50%;width:18px;height:18px;padding:2px}
.pack-header{margin-bottom:8px;width:100%}
.pack-price{margin-bottom:15px;text-align:center;position:relative}
.pack-price::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:40px;height:2px;background:var(--gradient);border-radius:2px}
.price-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;color:#707070;margin-bottom:2px;transition:color .6s ease}
body.dark-mode .price-label{color:#ffffffb3}
.price-value{font-size:1.3rem;font-weight:800;letter-spacing:.5px;background:var(--gradient-alt);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.pack-metrics{display:flex;justify-content:space-between;gap:8px;margin-top:15px;flex-wrap:wrap}
.metric{flex:1 1 45%;min-width:80px;background:#2b7fff0d;border-radius:8px;padding:8px;text-align:center;position:relative;overflow:hidden;transition:all .3s ease,background .6s ease;margin-bottom:5px}
body.dark-mode .metric{background:#2b7fff1a}
.metric:hover{transform:translateY(-3px);background:#2b7fff1f;box-shadow:0 5px 15px #2b7fff1a}
body.dark-mode .metric:hover{background:#2b7fff33;box-shadow:0 5px 15px #2b7fff26}
.metric-label{font-size:.6rem;color:#707070;margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px;transition:color .6s ease}
body.dark-mode .metric-label{color:#ffffffb3}
.metric-value{font-size:.9rem;font-weight:700;color:var(--primary);transition:color .6s ease}
body.dark-mode .metric-value{color:#4ebcff}
.metric-value span{font-size:.6rem;opacity:.7;font-weight:400}
.pack-separator{height:1px;background:linear-gradient(to right,transparent,#2b7fff1a,transparent);margin:15px 0;position:relative;transition:background .6s ease}
body.dark-mode .pack-separator{background:linear-gradient(to right,transparent,#2b7fff33,transparent)}
.pack-benefits{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.pack-benefits li{font-size:.72rem;color:var(--dark-grey);display:flex;align-items:flex-start;line-height:1.3;position:relative;padding-left:22px;transition:all .3s ease,color .6s ease;text-align:left}
body.dark-mode .pack-benefits li{color:#ffffffd9}
.pack-benefits li:hover{transform:translateX(3px);color:var(--dark)}
body.dark-mode .pack-benefits li:hover{color:#fff}
.benefit-icon{position:absolute;left:0;top:5px;width:8px;height:8px;background:#2B7FFF;border-radius:50%;box-shadow:0 0 4px #2b7fff66;transition:all .3s ease}
.benefit-icon.ambition{background:#4361ee}
.benefit-icon.business{background:#3a0ca3}
.benefit-icon.elite{background:#7209b7}
.chart-animation{height:45px;margin:12px 0;position:relative;overflow:hidden;border-radius:8px;background:#2b7fff0d;box-shadow:inset 0 0 10px #00000008;transition:background .6s ease,box-shadow .6s ease}
body.dark-mode .chart-animation{background:#2b7fff14;box-shadow:inset 0 0 10px #0003}
.starter-chart::before,.ambition-chart::before,.business-chart::before,.elite-chart::before{content:'';position:absolute;height:100%;width:100%;top:0;left:0;background-repeat:no-repeat;background-size:100% 100%}
.starter-chart::before{background:linear-gradient(90deg,#2B7FFF,#4361ee);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' d='M0,20 L10,18 L20,22 L30,19 L40,23 L50,17 L60,21 L70,18 L80,24 L90,16 L100,20'/%3E%3C/svg%3E");mask-size:100% 100%}
.ambition-chart::before{background:linear-gradient(90deg,#4361ee,#3a0ca3);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' d='M0,25 L10,20 L20,24 L30,15 L40,25 L50,10 L60,20 L70,15 L80,5 L90,15 L100,10'/%3E%3C/svg%3E");mask-size:100% 100%}
.business-chart::before{background:linear-gradient(90deg,#3a0ca3,#7209b7);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M0,30 L10,25 L20,30 L30,20 L40,25 L50,15 L60,5 L70,15 L80,10 L90,5 L100,15'/%3E%3C/svg%3E");mask-size:100% 100%}
.elite-chart::before{background:linear-gradient(90deg,#7209b7,#8338ec);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M0,35 L10,30 L20,35 L30,25 L40,30 L50,20 L60,10 L70,5 L80,10 L90,5 L100,2'/%3E%3C/svg%3E");mask-size:100% 100%}
.pack-button{background:linear-gradient(90deg,#2B7FFF,#4361ee);background-size:200% 200%;color:#fff;border:none;border-radius:8px;padding:12px;font-weight:600;font-size:.75rem;cursor:pointer;position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:.7px;margin-top:10px;text-decoration:none;display:block;text-align:center;box-shadow:0 3px 8px #2b7fff33;transition:all .3s ease,background .6s ease;width:100%}
.featured-button{background:linear-gradient(90deg,#4361ee,#3a0ca3);background-size:200% 200%;box-shadow:0 3px 8px #3a0ca340}
.elite-button{background:linear-gradient(90deg,#7209b7,#8338ec);background-size:200% 200%;box-shadow:0 3px 8px #8338ec40}
.button-text{position:relative;z-index:2}
.pack-button:hover{transform:translateY(-5px);box-shadow:0 8px 16px #2b7fff4d}
.featured-button:hover{background:linear-gradient(90deg,#3d57e5,#3508a0);background-size:200% 200%;box-shadow:0 8px 16px #3a0ca359}
.elite-button:hover{background:linear-gradient(90deg,#6a08ab,#7930e3);background-size:200% 200%;box-shadow:0 8px 16px #8338ec59}
.mobile-slider-container{position:relative;width:100%;max-width:350px;margin:0 auto;overflow:hidden;padding:.5rem 0 3rem;display:none}
.slider-wrapper{display:flex;width:100%;transition:transform .4s cubic-bezier(0.25,1,0.5,1)}
.slider-item{flex:0 0 100%;width:100%;padding:.5rem;box-sizing:border-box}
.slider-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;z-index:20;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;cursor:pointer;box-shadow:0 3px 10px #2b7fff4d;transition:all .3s ease}
.slider-nav.prev{left:5px}
.slider-nav.next{right:5px}
.slider-nav:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 5px 15px #2b7fff66}
.slider-nav:active{transform:translateY(-50%) scale(0.95)}
.slider-nav i{font-size:.9rem}
.slider-indicators{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:6px;margin-top:1rem;padding:.5rem 0}
.indicator{width:12px;height:12px;background:#2b7fff4d;border-radius:50%;cursor:pointer;transition:all .3s ease}
.indicator:hover{transform:scale(1.1);background:#2b7fff80}
.indicator.active{background:linear-gradient(90deg,var(--primary),var(--secondary));width:30px;border-radius:10px;box-shadow:0 2px 8px #2b7fff4d}
.swipe-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;z-index:19;pointer-events:none;opacity:0;transition:opacity .5s ease;display:flex;align-items:center;justify-content:center}
.swipe-hint::before{content:'';position:absolute;width:40px;height:40px;border-radius:50%;background:#fff3;animation:pulseSwipe 1.5s infinite}
.swipe-hint i{color:#fff;font-size:1.5rem;animation:swipeIndication 1.5s infinite}
@keyframes pulseSwipe {
0%{transform:scale(0.8);opacity:.2}
50%{transform:scale(1.2);opacity:.5}
100%{transform:scale(0.8);opacity:.2}
}
@keyframes swipeIndication {
0%{transform:translateX(-10px)}
50%{transform:translateX(10px)}
100%{transform:translateX(-10px)}
}
.swipe-hint.visible{opacity:1}
@media screen and (max-width: 768px) {
.pack-structure{box-shadow:0 8px 25px #00000026;margin:0 auto;min-width:260px}
body.dark-mode .pack-structure{box-shadow:0 8px 25px #0000004d}
.pack-price{margin-bottom:10px}
.price-value{font-size:1.2rem}
.pack-metrics{flex-wrap:wrap;gap:4px}
.metric{flex:1 1 45%;min-width:70px;padding:6px 5px;margin-bottom:4px}
.metric-label{font-size:.55rem}
.metric-value{font-size:.85rem}
.pack-benefits{margin-bottom:10px;gap:6px}
.pack-benefits li{font-size:.7rem;line-height:1.2}
.chart-animation{height:40px;margin:10px 0}
.pack-button{padding:10px;font-size:.7rem}
.packs-container{display:none!important}
.mobile-slider-container{display:block!important}
.badge-premium{top:-15px;transform:translateX(0) scale(0.9)}
}
@media (max-width: 320px) {
.mobile-slider-container{max-width:290px}
.slider-nav{width:28px;height:28px}
.slider-nav i{font-size:.8rem}
}
.theme-transition,.theme-transition *,.theme-transition :before,.theme-transition :after{transition:all .6s ease!important;transition-delay:0s!important}
html{overflow-y:scroll!important}
.badge-premium,.badge-content,.badge-icon,.badge-premium *,.badge-content *,.badge-icon *{animation:none!important;animation-delay:0s!important;animation-duration:0s!important}
.packs-container{overflow:visible!important;padding-top:30px!important}
.pack-structure{overflow:visible!important;position:relative!important}
.badge-premium{position:absolute!important;top:-14px!important;left:0!important;right:0!important;width:fit-content!important;margin:0 auto!important;transform:none!important;z-index:10!important}
@media (max-width: 768px) {
.mobile-slider-container{overflow:visible!important;padding-top:25px!important}
.slider-wrapper{overflow:visible!important}
.slider-item{overflow:visible!important}
.badge-premium{position:absolute!important;top:-14px!important;left:0!important;right:0!important;width:fit-content!important;margin:0 auto!important;transform:none!important}
}
.packs-section{overflow:visible!important}
@keyframes pulse {
0%{transform:none}
50%{transform:none}
100%{transform:none}
}
.packs-section{padding:2.5rem 2rem}
.packs-title{font-size:1.8rem;margin-bottom:2.5rem}
.packs-title::after{bottom:-15px;height:4px;width:90px}
.packs-description{margin:0 auto 2.5rem;font-size:1.1rem;line-height:1.6}
.packs-container{gap:20px;padding:20px 15px}
.pack-structure{padding:22px 14px 14px}
.pack-header{margin-bottom:8px}
.pack-price{margin-bottom:14px}
.pack-price::after{bottom:-8px;height:3px;width:40px}
.price-value{font-size:1.3rem}
.price-label{font-size:.65rem;margin-bottom:3px}
.pack-metrics{gap:6px;margin-top:14px}
.metric{padding:7px 8px;margin-bottom:5px;border-radius:8px}
.metric-label{font-size:.6rem;margin-bottom:3px}
.metric-value{font-size:.9rem}
.metric-value span{font-size:.6rem}
.pack-separator{margin:14px 0}
.pack-benefits{gap:8px;margin:0 0 16px}
.pack-benefits li{font-size:.72rem;padding-left:22px;line-height:1.4}
.benefit-icon{width:8px;height:8px;top:5px}
.chart-animation{height:42px;margin:10px 0;border-radius:8px}
.pack-button{padding:11px;font-size:.75rem;margin-top:10px;border-radius:8px;letter-spacing:.6px}
.badge-premium{top:-14px;height:28px}
.badge-content{padding:4px 12px 4px 8px;font-size:.68rem;border-radius:18px;letter-spacing:.6px}
.badge-icon{width:17px;height:17px}
.waves-top svg,.waves-bottom svg{height:60px}
@media (max-width: 1100px) {
.packs-section{padding:2.2rem 1.5rem}
.packs-title{font-size:1.7rem;margin-bottom:2.2rem}
.packs-description{font-size:1.05rem;margin-bottom:2.2rem}
.packs-container{gap:18px;padding:18px 12px}
.pack-structure{min-width:220px;padding:20px 12px 12px}
}
@media (max-width: 768px) {
.packs-section{padding:1.8rem 1.2rem}
.packs-title{font-size:1.5rem;margin-bottom:1.8rem}
.packs-description{font-size:1rem;margin-bottom:1.8rem;line-height:1.5}
.mobile-slider-container{padding:.5rem 0 2.8rem}
.slider-item{padding:.4rem}
.pack-structure{min-width:250px;padding:20px 12px 12px}
.pack-price{margin-bottom:12px}
.price-value{font-size:1.2rem}
.price-label{font-size:.58rem}
.pack-metrics{gap:5px}
.metric{padding:6px 7px;border-radius:6px}
.metric-label{font-size:.55rem}
.metric-value{font-size:.85rem}
.pack-benefits{gap:7px;margin-bottom:14px}
.pack-benefits li{font-size:.7rem;line-height:1.35;padding-left:20px}
.benefit-icon{width:7px;height:7px;top:5px}
.chart-animation{height:38px;margin:8px 0}
.pack-button{padding:10px;font-size:.7rem}
.badge-premium{top:-12px;height:25px}
.badge-content{padding:3px 10px 3px 7px;font-size:.63rem}
.badge-icon{width:15px;height:15px}
.slider-nav{width:32px;height:32px}
.slider-nav i{font-size:.9rem}
.slider-indicators{margin-top:1rem;padding:.5rem 0;gap:6px}
.indicator{width:10px;height:10px}
.indicator.active{width:26px;border-radius:10px}
}
@media (max-width: 480px) {
.packs-section{padding:0}
.packs-title{font-size:1.4rem;margin-bottom:1.5rem}
.packs-description{font-size:.95rem;margin-bottom:1.5rem;line-height:1.5}
.mobile-slider-container{padding:.4rem 0 2.5rem}
.pack-structure{min-width:230px;padding:18px 10px 10px}
.price-value{font-size:1.1rem}
.price-label{font-size:.55rem}
.metric{padding:5px 6px}
.metric-label{font-size:.52rem}
.metric-value{font-size:.82rem}
.pack-benefits li{font-size:.68rem;padding-left:18px}
.chart-animation{height:35px}
.pack-button{padding:9px;font-size:.68rem;letter-spacing:.5px}
.badge-content{padding:3px 8px 3px 6px;font-size:.6rem}
.badge-icon{width:14px;height:14px}
.slider-nav{width:28px;height:28px}
.slider-nav.prev{left:3px}
.slider-nav.next{right:3px}
}
@media (max-width: 376px) {
.packs-section{padding:1.2rem .8rem}
.packs-title{font-size:1.3rem;margin-bottom:1.2rem}
.packs-description{font-size:.9rem;margin-bottom:1.2rem}
.mobile-slider-container{max-width:290px}
.pack-structure{min-width:210px}
.waves-top svg,.waves-bottom svg{height:45px}
}
.waves-top svg,.waves-bottom svg{height:60px}
@media (max-width: 768px) {
.waves-top svg,.waves-bottom svg{height:50px}
}
@media (max-width: 480px) {
.waves-top svg,.waves-bottom svg{height:45px}
}
.featured{transform:scale(1.03)}
.featured:hover{transform:translateY(-10px) scale(1.03)}
.packs-container{padding-top:30px!important}
@media (max-width: 768px) {
.mobile-slider-container{padding-top:25px!important}
}
@media (max-width: 480px) {
.mobile-slider-container{padding-top:0!important}
}
.slider-bottom-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem;padding:0 2rem}
.mobile-slider-container .slider-nav{position:static;transform:none}
.mobile-slider-container .slider-nav:hover{transform:scale(1.1)}
.mobile-slider-container .slider-nav:active{transform:scale(0.95)}
.mobile-slider-container .slider-indicators{position:static;margin:0;padding:0}
@media (max-width: 768px) {
.mobile-slider-container{width:100vw;margin-left:-2rem;margin-right:-2rem;padding:0;overflow:hidden}
.slider-wrapper{display:flex;overflow-x:scroll;overflow-y:visible;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:20px 20px 10px;gap:15px}
.slider-wrapper::-webkit-scrollbar{display:none}
.slider-item.pack-structure{flex:0 0 calc(100vw - 40px);max-width:none;min-width:unset;width:calc(100vw - 40px);scroll-snap-align:center;scroll-snap-stop:always;margin:0;height:fit-content;overflow:visible}
.slider-item .pack-wrapper{padding:15px 12px}
.slider-item .pack-header{margin-bottom:10px}
.slider-item .price-value{font-size:1.3rem}
.slider-item .pack-metrics{margin-top:8px}
.slider-item .metric{padding:6px 8px}
.slider-item .pack-separator{margin:10px 0}
.slider-item .pack-benefits{gap:6px;margin-bottom:12px}
.slider-item .pack-benefits li{font-size:.72rem;line-height:1.3;margin-bottom:5px}
.slider-item .chart-animation{height:38px;margin:8px 0}
.slider-item .pack-button{padding:10px;font-size:.75rem;margin-top:8px}
.slider-bottom-nav{display:flex;align-items:center;justify-content:center;gap:15px;padding:15px 20px;background:var(--background);position:relative;z-index:10}
}
@media (max-width: 480px) {
.slider-wrapper{padding:20px 15px 10px;gap:12px}
.slider-item.pack-structure{flex:0 0 calc(100vw - 30px);width:calc(100vw - 30px)}
.slider-item .pack-wrapper{padding:12px 10px}
.slider-item .price-value{font-size:1.2rem}
.slider-item .pack-benefits li{font-size:.7rem}
}
@media (max-width: 768px) {
.packs-section{padding-left:0;padding-right:0;overflow:visible}
.mobile-slider-container{width:100%;max-width:100vw;overflow:hidden;position:relative;padding:0;margin:0}
.slider-wrapper{display:flex;overflow-x:scroll;overflow-y:visible;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:30px 20px 20px;gap:20px;margin:0}
.slider-wrapper::-webkit-scrollbar{display:none}
.mobile-slider-container .pack-structure.slider-item{flex:0 0 calc(100vw - 40px);min-width:calc(100vw - 40px);max-width:calc(100vw - 40px);width:calc(100vw - 40px);scroll-snap-align:center;margin:0;box-sizing:border-box}
.packs-section{overflow:visible;padding-left:0;padding-right:0}
.slider-bottom-nav{position:relative;z-index:10;background:var(--background);padding:15px 0;margin:0}
.mobile-slider-container{width:100%;overflow:hidden;position:relative}
.slider-wrapper{display:flex;overflow-x:scroll;overflow-y:visible;scroll-snap-type:x mandatory;scroll-padding:0;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:30px 0 20px;gap:40px;margin:0;padding-left:20px;padding-right:20px}
.slider-wrapper::-webkit-scrollbar{display:none}
.mobile-slider-container .pack-structure.slider-item{flex:0 0 calc(100vw - 40px);min-width:calc(100vw - 40px);max-width:calc(100vw - 40px);width:calc(100vw - 40px);scroll-snap-align:start;scroll-snap-stop:always;margin:0;box-sizing:border-box}
.slider-wrapper{scroll-padding-left:20px}
}