.main-content{margin-top:80px;padding:2rem 0}.page-header{text-align:center;margin-bottom:3rem;padding:4rem 2rem;position:relative;background:linear-gradient(135deg,#436b9514,#4e518014);border-radius:20px;overflow:hidden}.page-header:before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 20 0 L 0 0 0 20' fill='none' stroke='%23436b95' stroke-width='0.5' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23grid)'/%3E%3Cg opacity='0.1'%3E%3Ccircle cx='20' cy='20' r='2' fill='%23436b95'/%3E%3Ccircle cx='50' cy='30' r='3' fill='%234e5180'/%3E%3Ccircle cx='80' cy='25' r='2' fill='%23436b95'/%3E%3Ccircle cx='30' cy='60' r='2.5' fill='%234e5180'/%3E%3Ccircle cx='70' cy='70' r='2' fill='%23436b95'/%3E%3Cpath d='M20,20 L50,30 L80,25' stroke='%23436b95' stroke-width='1' fill='none'/%3E%3Cpath d='M50,30 L30,60 L70,70' stroke='%234e5180' stroke-width='1' fill='none'/%3E%3C/g%3E%3C/svg%3E");background-size:80px 80px;animation:backgroundMove 20s linear infinite;z-index:-1}.page-header:after{content:"";position:absolute;top:20px;right:20px;width:60px;height:60px;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3'%3E%3Crect x='10' y='10' width='40' height='40' rx='8' fill='none' stroke='%23436b95' stroke-width='2'/%3E%3Crect x='15' y='20' width='12' height='8' rx='2' fill='%23436b95'/%3E%3Crect x='33' y='20' width='12' height='8' rx='2' fill='%234e5180'/%3E%3Crect x='15' y='32' width='30' height='4' rx='1' fill='%23436b95'/%3E%3Crect x='15' y='40' width='20' height='4' rx='1' fill='%234e5180'/%3E%3C/g%3E%3C/svg%3E");animation:float 6s ease-in-out infinite}@keyframes backgroundMove{0%{transform:translate(0) translateY(0)}25%{transform:translate(-10px) translateY(-10px)}50%{transform:translate(-20px) translateY(0)}75%{transform:translate(-10px) translateY(10px)}to{transform:translate(0) translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.page-title{font-size:2.5rem;color:#436b95;margin-bottom:1rem;font-weight:700}.page-subtitle{font-size:1.2rem;color:#666;max-width:600px;margin:0 auto}.config-layout{display:grid;grid-template-columns:1fr 400px;gap:3rem;margin-bottom:3rem}.config-main{background:#fff;border-radius:16px;box-shadow:0 10px 40px #436b951a;overflow:hidden}.config-sidebar{background:#fff;border-radius:16px;box-shadow:0 10px 40px #436b951a;padding:2rem;height:-moz-fit-content;height:fit-content;position:sticky;top:120px}.base-plan-section{padding:2rem;border-bottom:1px solid rgba(67,107,149,.1)}.section-title{font-size:1.5rem;color:#436b95;margin-bottom:1.5rem;font-weight:600}.plan-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.plan-option{border:2px solid rgba(67,107,149,.1);border-radius:12px;padding:1.5rem;cursor:pointer;transition:all .3s ease;position:relative}.plan-option:hover{border-color:#436b95;transform:translateY(-2px)}.plan-option.selected{border-color:#436b95;background:#436b950d}.plan-option.selected:after{content:"✓";position:absolute;top:10px;right:10px;color:#436b95;font-weight:700;font-size:1.2rem}.plan-name{font-size:1.2rem;font-weight:600;color:#436b95;margin-bottom:.5rem}.plan-price{font-size:1.8rem;font-weight:700;color:#436b95;margin-bottom:.3rem}.plan-period{font-size:.9rem;color:#666;margin-bottom:1rem}.plan-features{list-style:none}.plan-features li{font-size:.9rem;color:#666;margin-bottom:.3rem;position:relative;padding-left:20px}.plan-features li:before{content:"•";position:absolute;left:0;color:#436b95}.payment-period-section{padding:1rem;border-bottom:1px solid rgba(67,107,149,.1)}.payment-period-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.payment-option{border:2px solid rgba(67,107,149,.1);border-radius:12px;padding:.5rem;cursor:pointer;transition:all .3s ease;position:relative;text-align:center}.payment-option:hover{border-color:#436b95;transform:translateY(-2px)}.payment-option.selected{border-color:#436b95;background:#436b950d}.payment-option.selected:after{content:"✓";position:absolute;top:10px;right:15px;color:#436b95;font-weight:700;font-size:1.2rem}.payment-period-name{font-size:1rem;font-weight:500;color:#436b95;margin-bottom:.5rem}.payment-discount{font-size:.9rem;color:#4e5180;font-weight:500}.modules-section{padding:2rem}.modules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.module-card{border:2px solid rgba(67,107,149,.1);border-radius:12px;padding:1.5rem;transition:all .3s ease;position:relative}.module-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #436b951a}.module-card.selected{border-color:#436b95;background:#436b950d}.module-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.module-checkbox{width:20px;height:20px;border:2px solid #436b95;border-radius:4px;cursor:pointer;position:relative;transition:all .3s ease}.module-checkbox.checked{background:#436b95}.module-checkbox.checked:after{content:"✓";position:absolute;top:-2px;left:2px;color:#fff;font-size:14px;font-weight:700}.module-icon{flex-shrink:0}.module-info{flex:1}.module-name{font-size:1.2rem;font-weight:600;color:#436b95;margin-bottom:.5rem}.module-description{font-size:.9rem;color:#666;line-height:1.5;margin-bottom:1rem}.module-pricing{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(67,107,149,.1)}.module-price{font-size:1.1rem;font-weight:600;color:#436b95}.module-badge{background:#4e51801a;color:#4e5180;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:600}.summary-header{text-align:center;margin-bottom:2rem}.summary-title{font-size:1.3rem;color:#436b95;margin-bottom:1rem}.current-plan{background:#436b951a;padding:1rem;border-radius:8px;margin-bottom:2rem}.current-plan-name{font-weight:600;color:#436b95;margin-bottom:.5rem}.selected-modules{margin-bottom:2rem}.selected-modules h4{color:#436b95;margin-bottom:1rem}.module-list{list-style:none}.module-list li{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(67,107,149,.1)}.module-list li:last-child{border-bottom:none}.module-list-name{font-size:.9rem;color:#333}.module-list-price{font-size:.9rem;font-weight:600;color:#436b95}.total-section{background:#436b950d;padding:1.5rem;border-radius:8px;margin-bottom:2rem}.subtotal,.total{display:flex;justify-content:space-between;margin-bottom:.5rem}.subtotal{font-size:.9rem;color:#666}.total{font-size:1.3rem;font-weight:700;color:#436b95;padding-top:.5rem;border-top:2px solid #436b95}.final-price{font-size:1.5rem;font-weight:700;color:#4e5180;padding-top:.5rem;border-top:2px solid #4e5180;background:#4e51800d;margin-top:.5rem;padding:1rem;border-radius:8px}.discount-info{font-size:.8rem;color:#4e5180;text-align:center;margin-bottom:1rem}.action-buttons{display:flex;flex-direction:column;gap:1rem}.btn-primary{background:linear-gradient(135deg,#436b95,#4e5180);color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s ease;text-align:center;text-decoration:none}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #436b954d}.btn-secondary{background:transparent;color:#436b95;padding:12px 24px;border:2px solid #436b95;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s ease;text-align:center;text-decoration:none}.btn-secondary:hover{background:#436b95;color:#fff}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.animate-fadeInUp{animation:fadeInUp .6s ease-out forwards}@media (max-width: 1024px){.config-layout{grid-template-columns:1fr;gap:2rem}.config-sidebar{position:static;order:-1}.modules-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media (max-width: 768px){.plan-selector{grid-template-columns:1fr}.payment-period-selector{grid-template-columns:repeat(2,1fr)}.modules-grid{grid-template-columns:1fr}.page-title{font-size:2rem}.config-main,.config-sidebar{margin:0 -20px;border-radius:0}}@media (max-width: 480px){.payment-period-selector{grid-template-columns:1fr}.module-header,.module-pricing{flex-direction:column;align-items:flex-start;gap:.5rem}}
