/* META CLASSES - BLACK OPS 7 STYLE */
.meta-hero{padding:8rem 0 4rem;background:radial-gradient(circle at 50% 20%,rgba(255,69,0,0.15),transparent 50%),linear-gradient(180deg,#000,#05070d);position:relative;overflow:hidden}
.meta-hero::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,69,0,0.03) 2px,rgba(255,69,0,0.03) 4px);animation:scanlines 8s linear infinite}
@keyframes scanlines{0%{transform:translateY(0)}100%{transform:translateY(50px)}}
.meta-badge{display:inline-block;padding:.4rem 1rem;background:rgba(255,69,0,0.2);border:1px solid rgba(255,69,0,0.5);color:#ff4500;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.5rem}
.meta-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:900;letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(135deg,#fff,#ff4500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem}
.meta-subtitle{font-size:1.1rem;color:#cfd8e3;max-width:600px;margin:0 auto}
.meta-classes-section{background:#05070d}
.class-card{background:linear-gradient(135deg,#0a0d12,#0f1419);border:1px solid rgba(255,69,0,0.3);border-radius:16px;padding:2.5rem;margin-bottom:3rem;position:relative;overflow:hidden;transition:all .3s ease}
.class-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#ff4500,transparent);opacity:0;transition:opacity .3s ease}
.class-card:hover::before{opacity:1}
.class-card:hover{border-color:rgba(255,69,0,0.6);transform:translateY(-4px);box-shadow:0 20px 40px rgba(255,69,0,0.2)}
.class-header{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-bottom:2.5rem;align-items:start}
.class-role{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.25em;color:#ff4500;background:rgba(255,69,0,0.1);padding:.3rem .75rem;border-radius:4px;margin-bottom:.75rem}
.class-name{font-size:2rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem;color:#fff}
.class-desc{color:#9ca3af;font-size:.95rem}
.class-stats{display:flex;flex-direction:column;gap:1rem}
.stat-item{display:flex;flex-direction:column;gap:.4rem}
.stat-label{font-size:.7rem;font-weight:700;letter-spacing:.15em;color:#9ca3af;text-transform:uppercase}
.stat-bar{height:8px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden;position:relative}
.stat-fill{height:100%;background:linear-gradient(90deg,#ff4500,#ff6b00);border-radius:4px;position:relative;overflow:hidden}
.stat-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.class-content{display:grid;grid-template-columns:450px 1fr;gap:2.5rem;margin-bottom:2rem}
.weapon-viewer{position:relative;background:rgba(0,0,0,0.4);border:1px solid rgba(255,69,0,0.2);border-radius:12px;overflow:hidden}
.weapon-canvas{width:100%;height:300px;display:block}
.viewer-controls{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;background:rgba(0,0,0,0.7);padding:.5rem;border-radius:8px;backdrop-filter:blur(10px)}
.viewer-btn{width:36px;height:36px;background:rgba(255,69,0,0.2);border:1px solid rgba(255,69,0,0.4);border-radius:6px;color:#ff4500;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
.viewer-btn:hover{background:rgba(255,69,0,0.4);border-color:#ff4500;transform:scale(1.1)}
.attachments-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.attachment-slot{display:flex;gap:1rem;padding:1rem;background:rgba(255,69,0,0.05);border:1px solid rgba(255,69,0,0.2);border-radius:10px;transition:all .2s ease}
.attachment-slot:hover{background:rgba(255,69,0,0.1);border-color:rgba(255,69,0,0.4);transform:translateX(4px)}
.slot-icon{width:48px;height:48px;background:rgba(255,69,0,0.2);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#ff4500;font-size:1.5rem;flex-shrink:0}
.slot-content{display:flex;flex-direction:column;justify-content:center}
.slot-type{font-size:.65rem;font-weight:700;letter-spacing:.2em;color:#9ca3af;text-transform:uppercase}
.slot-name{font-size:.95rem;font-weight:600;color:#fff;margin-top:.2rem}
.class-perks{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding-top:2rem;border-top:1px solid rgba(255,69,0,0.2)}
.perk-category h4{font-size:.8rem;font-weight:700;letter-spacing:.15em;color:#9ca3af;text-transform:uppercase;margin-bottom:1rem}
.perks-list{display:flex;flex-wrap:wrap;gap:.5rem}
.perk-badge{padding:.5rem 1rem;background:rgba(255,69,0,0.15);border:1px solid rgba(255,69,0,0.3);border-radius:6px;font-size:.85rem;font-weight:600;color:#fff;transition:all .2s ease}
.perk-badge:hover{background:rgba(255,69,0,0.25);border-color:#ff4500;transform:scale(1.05)}
.meta-tips{padding:5rem 0}
.meta-tips h2{font-size:2rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.tip-card{padding:2rem;background:rgba(255,69,0,0.05);border:1px solid rgba(255,69,0,0.2);border-radius:12px;text-align:center;transition:all .3s ease}
.tip-card:hover{background:rgba(255,69,0,0.1);border-color:rgba(255,69,0,0.4);transform:translateY(-6px)}
.tip-icon{font-size:3rem;color:#ff4500;margin-bottom:1rem}
.tip-card h4{font-size:1.2rem;font-weight:700;margin-bottom:.75rem;color:#fff}
.tip-card p{color:#9ca3af;font-size:.9rem;line-height:1.6;margin:0}
@media (max-width:1200px){.class-content{grid-template-columns:1fr}.weapon-viewer{max-width:450px;margin:0 auto}}
@media (max-width:768px){.class-header{grid-template-columns:1fr;gap:2rem}.class-perks{grid-template-columns:1fr;gap:1.5rem}.attachments-grid{grid-template-columns:1fr}.meta-title{font-size:2rem}.class-name{font-size:1.5rem}}