.brand-card{position:relative;padding:2rem;border-radius:20px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden;border:2px solid transparent;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(240,250,255,.95));box-shadow:0 4px 20px rgba(0,100,150,.08)}.brand-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(0,180,255,.05),rgba(0,120,200,.08));opacity:0;transition:opacity .4s ease;z-index:0}.brand-card:hover:before{opacity:1}.brand-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 40px rgba(0,150,255,.2);border-color:rgba(0,180,255,.5)}.brand-gradient-blue:after{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(0,180,255,.15) 0,transparent 70%);opacity:0;transition:opacity .4s ease;z-index:0}.brand-gradient-blue:hover:after{opacity:1}.brand-gradient-cyan:after{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(0,200,255,.15) 0,transparent 70%);opacity:0;transition:opacity .4s ease;z-index:0}.brand-gradient-cyan:hover:after{opacity:1}.brand-gradient-teal:after{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(0,150,200,.15) 0,transparent 70%);opacity:0;transition:opacity .4s ease;z-index:0}.brand-gradient-teal:hover:after{opacity:1}.brand-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;position:relative;z-index:1}.brand-card-title{font-size:1.25rem;font-weight:800;color:#0a192f;transition:all .3s ease;text-shadow:0 2px 4px rgba(0,0,0,.05)}.brand-card:hover .brand-card-title{color:#0077b6;transform:translateX(4px)}.brand-card-arrow{width:24px;height:24px;color:#94a3b8;transition:all .3s ease}.brand-card:hover .brand-card-arrow{color:#00b4d8;transform:translateX(8px) scale(1.2)}.brand-card-count{font-size:.95rem;color:#475569;font-weight:600;margin-bottom:1.5rem;position:relative;z-index:1}.brand-card-progress{height:4px;background:linear-gradient(90deg,rgba(0,120,200,.15),rgba(0,180,255,.15));border-radius:10px;overflow:hidden;position:relative;z-index:1}.brand-card-progress-bar{height:100%;width:0;background:linear-gradient(90deg,#00b4d8,#0096c7 50%,#0077b6);border-radius:10px;transition:width .6s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px rgba(0,180,255,.5)}.brand-card:hover .brand-card-progress-bar{width:100%}.brand-card:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(0,180,255,.1);transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease;z-index:0}.brand-card:active:after{width:300px;height:300px}@media (max-width:768px){.brand-card{padding:1.5rem}.brand-card-title{font-size:1.1rem}.brand-card:hover{transform:translateY(-4px) scale(1.01)}}.subcategory-card{position:relative;background:var(--card-bg);border-radius:16px;padding:1.5rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;border:2px solid rgba(0,180,255,.1);box-shadow:0 2px 15px rgba(0,100,200,.08)}.subcategory-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(0,180,255,.03),rgba(0,120,200,.05));opacity:0;transition:opacity .3s ease;z-index:0}.subcategory-card:hover:before{opacity:1}.subcategory-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,150,255,.15);border-color:rgba(0,180,255,.4)}.subcategory-card-content{display:flex;align-items:center;gap:1rem;position:relative;z-index:1}.subcategory-icon-wrapper{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,#00b4d8,#0096c7 50%,#0077b6);display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 4px 15px rgba(0,150,255,.3);position:relative;overflow:hidden}.subcategory-icon-wrapper:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.3) 0,transparent 70%);opacity:0;transition:opacity .3s ease}.subcategory-card:hover .subcategory-icon-wrapper:before{opacity:1}.subcategory-card:hover .subcategory-icon-wrapper{transform:scale(1.1) rotate(5deg);box-shadow:0 6px 20px rgba(0,180,255,.4)}.subcategory-icon{width:28px;height:28px;color:white;position:relative;z-index:1}.subcategory-info{flex:1 1}.subcategory-title{font-size:1.1rem;font-weight:700;color:#0a192f;margin:0 0 .25rem;transition:color .3s ease}.subcategory-card:hover .subcategory-title{color:#0077b6}.subcategory-count{font-size:.9rem;color:#64748b;margin:0;font-weight:500}.subcategory-arrow{width:24px;height:24px;color:#cbd5e1;transition:all .3s ease;flex-shrink:0}.subcategory-card:hover .subcategory-arrow{color:#00b4d8;transform:translateX(6px)}.subcategory-hover-bar{position:absolute;bottom:0;left:0;width:0;height:3px;background:linear-gradient(90deg,#00b4d8,#0096c7 50%,#0077b6);transition:width .4s cubic-bezier(.4,0,.2,1);border-radius:10px 10px 0 0}.subcategory-card:hover .subcategory-hover-bar{width:100%}.subcategory-card:active{transform:translateY(-2px) scale(.98)}@media (max-width:768px){.subcategory-card{padding:1.25rem}.subcategory-icon-wrapper{width:48px;height:48px}.subcategory-icon{width:24px;height:24px}.subcategory-title{font-size:1rem}}.category-page{min-height:100vh;background:linear-gradient(180deg,#f0f9ff,#e0f2fe 25%,#bae6fd 50%,#e0f2fe 75%,#f0f9ff);padding:3rem 1.5rem;position:relative;overflow:hidden}.category-page:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 20% 30%,rgba(0,180,255,.08) 0,transparent 50%),radial-gradient(circle at 80% 70%,rgba(0,120,200,.06) 0,transparent 50%);animation:float 20s ease-in-out infinite;pointer-events:none}@keyframes float{0%,to{transform:translate(0) rotate(0deg)}33%{transform:translate(30px,-30px) rotate(120deg)}66%{transform:translate(-30px,30px) rotate(240deg)}}.category-container{max-width:1400px;margin:0 auto;position:relative;z-index:1}.back-button{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:white;border:2px solid rgba(0,180,255,.2);border-radius:12px;color:#475569;font-weight:600;cursor:pointer;transition:all .3s ease;margin-bottom:2rem;box-shadow:0 2px 10px rgba(0,100,200,.08)}.back-button:hover{background:rgba(0,180,255,.05);border-color:rgba(0,180,255,.4);color:#0077b6;transform:translateX(-4px)}.back-icon{width:20px;height:20px;transition:transform .3s ease}.back-button:hover .back-icon{transform:translateX(-4px)}.page-header{text-align:center;margin-bottom:3.5rem;animation:fadeInDown .6s ease-out}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.header-icon-wrapper{width:80px;height:80px;margin:0 auto 1.5rem;background:linear-gradient(135deg,#00b4d8,#0096c7 50%,#0077b6);border-radius:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,150,255,.3);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 8px 30px rgba(0,150,255,.3)}50%{transform:scale(1.05);box-shadow:0 10px 40px rgba(0,180,255,.4)}}.header-icon{width:40px;height:40px;color:white}.page-title{font-size:3rem;font-weight:800;color:#0a192f;margin:0 0 1rem;background:linear-gradient(135deg,#0a192f,#0077b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 8px rgba(0,0,0,.05)}.page-subtitle{font-size:1.25rem;color:#475569;font-weight:500;margin:0}.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:2rem;gap:2rem;animation:fadeInUp .8s ease-out .2s backwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.subcategory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-gap:1.5rem;gap:1.5rem;max-width:1000px;margin:0 auto;animation:fadeInUp .8s ease-out .2s backwards}@media (max-width:1024px){.category-page{padding:2rem 1rem}.page-title{font-size:2.5rem}.brand-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem}.subcategory-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media (max-width:768px){.category-page{padding:1.5rem 1rem}.page-title{font-size:2rem}.page-subtitle{font-size:1rem}.brand-grid,.subcategory-grid{grid-template-columns:1fr}.header-icon-wrapper{width:64px;height:64px}.header-icon{width:32px;height:32px}}.brand-grid>*{animation:fadeInScale .5s ease-out backwards}.brand-grid>:first-child{animation-delay:.1s}.brand-grid>:nth-child(2){animation-delay:.15s}.brand-grid>:nth-child(3){animation-delay:.2s}.brand-grid>:nth-child(4){animation-delay:.25s}.brand-grid>:nth-child(5){animation-delay:.3s}.brand-grid>:nth-child(6){animation-delay:.35s}.brand-grid>:nth-child(7){animation-delay:.4s}.brand-grid>:nth-child(8){animation-delay:.45s}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}