@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;700&display=swap');

:root {
    --av-bg: #0b0c10;
    --av-surface: #1f2833;
    --av-border: #45a29e;
    --av-neon: #66fcf1;
    --av-text: #c5c6c7;
    --av-font-head: 'Orbitron', sans-serif;
    --av-font-body: 'Rajdhani', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--av-bg); color: var(--av-text); font-family: var(--av-font-body); line-height: 1.6; overflow-x: hidden; }


h1, h2, h3, h4, h5 { font-family: var(--av-font-head); color: #fff; text-transform: uppercase; letter-spacing: 2px; }
a { color: var(--av-neon); text-decoration: none; transition: all 0.3s ease; }
a:hover { color: #fff; text-shadow: 0 0 10px var(--av-neon); }


.av-header { position: fixed; top: 0; width: 100%; padding: 20px 50px; display: flex; justify-content: space-between; align-items: center; background: rgba(11, 12, 16, 0.9); border-bottom: 1px solid var(--av-border); z-index: 1000; backdrop-filter: blur(10px); clip-path: polygon(0 0, 100% 0, 100% 80%, 95% 100%, 0 100%); }
.av-logo { font-size: 24px; font-weight: 900; color: var(--av-neon); display: flex; align-items: center; gap: 10px; }
.av-logo img { width: 40px; height: 40px; }
.av-nav { display: flex; gap: 30px; }
.av-nav a { font-size: 18px; font-weight: 700; padding: 5px 10px; position: relative; }
.av-nav a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--av-neon); transition: width 0.3s; }
.av-nav a:hover::after { width: 100%; }
.av-menu-toggle { display: none; font-size: 30px; color: var(--av-neon); cursor: pointer; background: none; border: none; }


.av-hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.av-hero-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); z-index: -2; object-fit: cover; opacity: 0.4; }
.av-hero-overlay { position: absolute; top:0; left:0; right:0; bottom:0; background: radial-gradient(circle, rgba(11,12,16,0.2) 0%, rgba(11,12,16,0.9) 100%); z-index: -1; }
.av-hero-content { text-align: center; z-index: 1; padding: 20px; }
.av-hero-title { font-size: 5rem; text-shadow: 0 0 20px var(--av-neon); margin-bottom: 20px; }
.av-hero-subtitle { font-size: 1.5rem; font-weight: 500; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto; }


.av-cta { display: inline-block; padding: 15px 40px; background: rgba(102, 252, 241, 0.05); color: var(--av-neon); font-family: var(--av-font-head); font-size: 1.2rem; font-weight: 700; border: 1px solid var(--av-neon); position: relative; overflow: hidden; z-index: 1; cursor: pointer; text-transform: uppercase; transition: all 0.3s ease; border-radius: 4px; box-shadow: 0 0 10px rgba(102, 252, 241, 0.2); }
.av-cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--av-neon); transition: left 0.3s ease; z-index: -1; }
.av-cta:hover { color: var(--av-bg); box-shadow: 0 0 30px var(--av-neon); }
.av-cta:hover::before { left: 0; }


.av-section { padding: 100px 50px; max-width: 1400px; margin: 0 auto; }
.av-section-title { font-size: 2.5rem; margin-bottom: 50px; border-left: 5px solid var(--av-neon); padding-left: 20px; }


.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px; }
.av-card { background: var(--av-surface); position: relative; border-bottom: 3px solid var(--av-neon); transition: all 0.3s; clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%); display: flex; flex-direction: column; }
.av-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; border: 2px solid transparent; transition: 0.3s; box-sizing:border-box; pointer-events:none; }
.av-card:hover { transform: translateY(-10px); z-index: 2; border-color: var(--av-neon); box-shadow: 0 10px 30px rgba(102, 252, 241, 0.2); }
.av-card-img-wrap { width: 100%; height: 200px; overflow: hidden; position: relative; }
.av-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; filter: grayscale(50%); }
.av-card:hover .av-card-img { transform: scale(1.1); filter: grayscale(0%); }
.av-card-body { padding: 25px; flex-grow:1; display:flex; flex-direction:column; }
.av-card-tags { margin-bottom: 15px; }
.av-card-tag { display: inline-block; background: rgba(69, 162, 158, 0.2); color: var(--av-neon); font-size: 0.8rem; font-weight: 700; padding: 4px 10px; margin-right: 5px; border: 1px solid var(--av-border); clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.av-card-title { font-size: 1.5rem; margin-bottom: 10px; }
.av-card-rating { font-size: 1.2rem; color: #f1c40f; margin-bottom: 15px; font-weight:700;}
.av-card-desc { font-size: 1.1rem; margin-bottom: 25px; flex-grow:1; }


.av-filters { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 40px; justify-content: center; }
.av-filter-btn { background: var(--av-surface); color: var(--av-text); border: 1px solid var(--av-border); padding: 10px 20px; font-family: var(--av-font-head); cursor: pointer; transition: 0.3s; border-radius: 4px; }
.av-filter-btn:hover, .av-filter-btn.active { background: var(--av-neon); color: var(--av-bg); }


.av-ticker { background: var(--av-neon); color: var(--av-bg); padding: 10px 0; overflow: hidden; white-space: nowrap; font-family: var(--av-font-head); font-weight: 700; font-size: 1.2rem; display: flex; }
.av-ticker-content { display: inline-block; padding-left: 100%; animation: av-ticker 20s linear infinite; }
@keyframes av-ticker { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }


.av-review-header { position: relative; height: 60vh; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding-bottom: 50px; }
.av-review-header::before { content:''; position:absolute; inset:0; background: linear-gradient(to top, var(--av-bg) 0%, transparent 100%); }
.av-review-container { display: flex; gap: 50px; }
.av-review-main { flex: 2; }
.av-review-sidebar { flex: 1; }
.av-hud-panel { background: rgba(31, 40, 51, 0.8); border: 1px solid var(--av-border); padding: 30px; clip-path: polygon(0 0, 100% 0, 100% 95%, 95% 100%, 0 100%); backdrop-filter: blur(5px); margin-bottom: 30px; }
.av-hud-title { font-size: 1.2rem; color: var(--av-neon); margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.av-hud-stat { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 1.2rem; font-weight: 700; }
.av-hud-bar { height: 8px; background: #333; width: 100%; margin-bottom: 25px; position:relative; }
.av-hud-bar-fill { height: 100%; background: var(--av-neon); position:absolute; left:0; top:0; box-shadow: 0 0 10px var(--av-neon); }


.av-legal-container { max-width: 900px; margin: 0 auto; }
.av-legal-block { background: var(--av-surface); padding: 40px; border-left: 4px solid var(--av-neon); margin-bottom: 30px; }
.av-faq-item { margin-bottom: 20px; border: 1px solid #333; }
.av-faq-q { background: var(--av-surface); padding: 20px; font-family: var(--av-font-head); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.av-faq-q:hover { background: #2c3847; }
.av-faq-a { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: #141a21; }
.av-faq-item.active .av-faq-a { padding: 20px; max-height: 500px; }
.av-faq-icon { font-size: 1.5rem; color: var(--av-neon); transition: transform 0.3s; }
.av-faq-item.active .av-faq-icon { transform: rotate(45deg); }


.av-form-group { margin-bottom: 25px; }
.av-form-group label { display: block; font-family: var(--av-font-head); margin-bottom: 10px; color: var(--av-neon); }
.av-input { width: 100%; background: #141a21; border: 1px solid #333; color: #fff; padding: 15px; font-family: var(--av-font-body); font-size: 1.1rem; transition: border 0.3s; }
.av-input:focus { outline: none; border-color: var(--av-neon); }
.av-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background: var(--av-surface); border: 2px solid var(--av-neon); padding: 40px; z-index: 2000; text-align: center; box-shadow: 0 0 50px rgba(102, 252, 241, 0.5); opacity: 0; visibility: hidden; transition: 0.3s; }
.av-popup.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }


.av-footer { background: var(--av-surface); padding: 50px; border-top: 2px solid var(--av-neon); text-align: center; margin-top: 100px; }
.av-footer-links { display: flex; justify-content: center; gap: 30px; margin-bottom: 30px; flex-wrap: wrap; }
.av-footer-links a { color: var(--av-text); font-weight: 700; }
.av-footer-links a:hover { color: var(--av-neon); }

@media (max-width: 768px) {
    .av-nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: var(--av-surface); padding: 20px; border-bottom: 1px solid var(--av-neon); }
    .av-nav.active { display: flex; }
    .av-menu-toggle { display: block; }
    .av-hero-title { font-size: 3rem; }
    .av-review-container { flex-direction: column; }
    .av-section { padding: 50px 20px; }
}