:root  {
  --bg-dark:#f8fafc;
  --bg-card:#ffffff;
  --bg-nav:rgba(255,255,255,0.85);
  --bg-input:#ffffff;
  --primary:#0066ff;
  --primary-hover:#0052cc;
  --primary-glow:rgba(15,23,42,0.06);
  --secondary:#d4af37;
  --secondary-hover:#b5942b;
  --secondary-glow:rgba(15,23,42,0.06);
  --accent:#00a651;
  --accent-glow:rgba(15,23,42,0.06);
  --text-white:#0f172a;
  --text-gray:#334155;
  --text-muted:#64748b;
  --border-color:rgba(0,102,255,0.08);
  --border-active:rgba(0,102,255,0.25);
  --border-cyan:rgba(212,175,55,0.25);
  --font-main:'Outfit',sans-serif;
  --font-title:'Montserrat',sans-serif;
  --transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
  --border-radius:20px;
  --max-width:1200px;

}
 *,*::before,*::after  {
  box-sizing:border-box;
  margin:0;
  padding:0;
  overflow-wrap:break-word;

}
 html  {
  scroll-behavior:smooth;
  font-size:16px;
  overflow-x:hidden;

}
 body  {
  background-color:var(--bg-dark);
  background-image:linear-gradient(rgba(0,102,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,102,255,0.02) 1px,transparent 1px);
  background-size:50px 50px;
  background-attachment:fixed;
  color:var(--text-white);
  font-family:var(--font-main);
  line-height:1.62;
  overflow-x:hidden;
  position:relative;

}
 body::before  {
  content:'';
  position:absolute;
  top:-5%;
  left:-5%;
  width:45vw;
  height:45vw;
  background:none;
  z-index:-2;
  pointer-events:none;

}
 body::after  {
  content:'';
  position:absolute;
  bottom:5%;
  right:-5%;
  width:50vw;
  height:50vw;
  background:none;
  z-index:-2;
  pointer-events:none;

}
 .floating-balls-container  {
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;

}
 @media (max-width:768px)  {
  .floating-balls-container  {
  display:none;

}

}
 .floating-ball  {
  position:absolute;
  width:40px;
  height:40px;
  background-image:url('data:image/svg+xml;
  utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(212,175,55,0.08)" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 2v20M2 12h20M12 12l7-7M12 12l-7 7M12 12l7 7M12 12L5 5"/></svg>');
  background-size:contain;
  opacity:0.8;
  animation:float-around 25s infinite linear;

}
 .fb-1  {
  top:15%;
  left:10%;
  animation-duration:20s;

}
 .fb-2  {
  top:45%;
  right:8%;
  animation-duration:28s;
  transform:scale(1.5);

}
 .fb-3  {
  bottom:15%;
  left:25%;
  animation-duration:22s;
  transform:scale(0.8);

}
 .fb-4  {
  top:75%;
  left:70%;
  animation-duration:32s;

}
 .fb-5  {
  top:5%;
  right:30%;
  animation-duration:18s;
  transform:scale(1.2);

}
 @keyframes float-around  {
  0%  {
  transform:translateY(0) rotate(0deg);

}
 50%  {
  transform:translateY(-30px) rotate(180deg);

}
 100%  {
  transform:translateY(0) rotate(360deg);

}

}
 a  {
  text-decoration:none;
  color:inherit;
  transition:var(--transition);

}
 ul  {
  list-style:none;

}
 img  {
  max-width:100%;
  height:auto;
  display:block;

}
 button,input,textarea,select  {
  font-family:inherit;
  font-size:inherit;
  background:none;
  border:none;
  color:inherit;

}
 ::-webkit-scrollbar  {
  width:8px;

}
 ::-webkit-scrollbar-track  {
  background:var(--bg-dark);

}
 ::-webkit-scrollbar-thumb  {
  background:rgba(15,23,42,0.1);
  border-radius:10px;
  border:2px solid var(--bg-dark);

}
 ::-webkit-scrollbar-thumb:hover  {
  background:var(--primary);

}
 a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible  {
  outline:2px solid var(--secondary);
  outline-offset:4px;

}
 .visually-hidden  {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;

}
 .container  {
  width:100%;
  padding-left:24px;
  padding-right:24px;
  max-width:var(--max-width);
  margin-left:auto;
  margin-right:auto;

}
 .text-gradient-primary  {
  color:var(--text-white);
}
 .text-gradient-cyan  {
  color:var(--primary);
}
 .section-padding  {
  padding-top:80px;
  padding-bottom:80px;

}
 .section-header  {
  margin-bottom:50px;

}
 .section-header--lg  {
  margin-bottom:70px;

}
 .section-header--center  {
  text-align:center;

}
 .section-header--split  {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;

}
 .section-subtitle--center  {
  margin-left:auto;
  margin-right:auto;

}
 .section-title--tight  {
  margin-bottom:10px;

}
 .section-subtitle--tight  {
  margin-bottom:0;

}
 .section-title  {
  font-family:var(--font-title);
  font-size:2.5rem;
  font-weight:700;
  line-height:1.2;
  margin-bottom:20px;
  letter-spacing:-0.02em;
  color:#0f172a;

}
 .section-subtitle  {
  color:var(--text-gray);
  font-size:1.1rem;
  margin-bottom:50px;
  max-width:700px;
  font-weight:300;

}
 @media (min-width:768px)  {
  .section-padding  {
  padding-top:100px;
  padding-bottom:100px;

}
 .section-title  {
  font-size:3.5rem;

}

}
 .btn  {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:8px;
  font-family:var(--font-title);
  font-weight:700;
  font-size:0.95rem;
  cursor:pointer;
  transition:var(--transition);
  letter-spacing:0.05em;
  gap:10px;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  z-index:1;

}
 .btn-primary  {
  background:var(--primary);
  color:#ffffff;
  box-shadow:0 4px 14px var(--primary-glow);
  border:1px solid rgba(16,185,129,0.2);

}
 .btn-primary::after  {
  content:'';
  position:absolute;
  top:0;
  left:-50%;
  width:0;
  height:100%;
  background:rgba(255,255,255,0.2);
  transform:skewX(-20deg);
  transition:all 0.75s ease;
  z-index:-1;

}
 .btn-primary:hover  {
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(15,23,42,0.08);

}
 .btn-primary:hover::after  {
  left:150%;
  width:300%;

}
 .btn-secondary  {
  background:#ffffff;
  color:var(--text-white);
  border:1px solid var(--border-color);
  box-shadow:0 4px 10px rgba(15,23,42,0.03);

}
 .btn-secondary::after  {
  content:'';
  position:absolute;
  inset:0;
  background:var(--secondary-glow);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
  z-index:-1;

}
 .btn-secondary:hover  {
  border-color:var(--secondary);
  color:var(--secondary-hover);
  transform:translateY(-2px);
  box-shadow:0 6px 20px var(--secondary-glow);

}
 .btn-secondary:hover::after  {
  transform:scaleX(1);
  transform-origin:left;

}
 .btn-accent  {
  background:var(--secondary);
  color:#ffffff;
  box-shadow:0 4px 15px var(--secondary-glow);
  border:1px solid rgba(14,165,233,0.2);

}
 .btn-accent:hover  {
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(15,23,42,0.12);

}
 .btn-sm  {
  padding:8px 18px;
  font-size:0.8rem;
  border-radius:6px;

}
 .header_cmp  {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background-color:var(--bg-nav);
  border-bottom:1px solid var(--border-color);
  transition:var(--transition);

}
 .header_cmp.scrolled  {
  padding:4px 0;
  border-bottom-color:rgba(16,185,129,0.15);
  box-shadow:0 8px 30px rgba(15,23,42,0.06);

}
 .nav-container  {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:76px;

}
 .logo  {
  font-family:var(--font-title);
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-0.01em;
  display:flex;
  align-items:center;
  gap:8px;

}
 .logo span  {
  color:var(--primary);
  font-weight:400;

}
 .logo-svg  {
  color:var(--primary);
  filter:drop-shadow(0 0 8px var(--primary-glow));

}
 @media (max-width:767px)  {
  .logo  {
  font-size:0 !important;
  gap:0 !important;

}
 .logo span  {
  display:none !important;

}
 .nav-right  {
  gap:12px;

}
 .btn-sm  {
  padding:6px 14px;
  font-size:0.75rem;

}
 .nav-container  {
  padding-left:16px;
  padding-right:16px;

}

}
 @media (min-width:768px)  {
  .logo  {
  font-size:1.45rem;
  gap:12px;

}

}
 .nav-right  {
  display:flex;
  align-items:center;
  gap:20px;

}
 .btn-menu-toggle  {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:5px;
  width:44px;
  height:44px;
  cursor:pointer;
  position:relative;
  z-index:2001;
  background:rgba(15,23,42,0.03);
  border:1px solid var(--border-color);
  border-radius:50%;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  padding:0 12px;

}
 .btn-menu-toggle:hover  {
  border-color:var(--primary);
  background:rgba(15,23,42,0.04);
  box-shadow:0 0 15px rgba(15,23,42,0.08);

}
 .burger-line  {
  display:block;
  height:2px;
  background-color:var(--text-white);
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  border-radius:2px;

}
 .burger-line-1  {
  width:20px;

}
 .burger-line-2  {
  width:14px;

}
 .btn-menu-toggle:hover .burger-line-2  {
  width:20px;

}
 .btn-menu-toggle.open  {
  align-items:center;
  padding:0;
  border-color:var(--accent);
  box-shadow:0 2px 8px rgba(15,23,42,0.08);

}
 .btn-menu-toggle.open:hover  {
  background:rgba(124,58,237,0.05);

}
 .btn-menu-toggle.open .burger-line-1  {
  transform:translateY(3.5px) rotate(45deg);
  width:18px;
  background-color:var(--accent);

}
 .btn-menu-toggle.open .burger-line-2  {
  transform:translateY(-3.5px) rotate(-45deg);
  width:18px;
  background-color:var(--accent);

}
 .nav-menu  {
  position:fixed;
  top:0;
  right:-100%;
  width:100%;
  max-width:420px;
  height:100vh;
  background:var(--bg-card);
  border-left:1px solid rgba(16,185,129,0.15);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:95px 40px 40px 40px;
  transition:right 0.6s cubic-bezier(0.16,1,0.3,1);
  z-index:2000;
  box-shadow:-15px 0 50px rgba(15,23,42,0.02),-30px 0 100px rgba(0,0,0,0.05);
  overflow-y:auto;

}
 .nav-menu::-webkit-scrollbar  {
  width:4px;

}
 .nav-menu::-webkit-scrollbar-track  {
  background:transparent;

}
 .nav-menu::-webkit-scrollbar-thumb  {
  background:rgba(15,23,42,0.1);
  border-radius:2px;

}
 .nav-menu.active  {
  right:0;

}
 .nav-list-wrapper  {
  display:flex;
  flex-direction:column;
  gap:10px;

}
 .nav-list-wrapper::before  {
  content:'Mitsubishi Surabaya SIMULATOR';
  display:block;
  font-family:var(--font-title);
  font-size:0.7rem;
  font-weight:700;
  color:var(--text-muted);
  letter-spacing:0.25em;
  margin-bottom:20px;
  padding-left:16px;
  position:relative;
  opacity:0.7;

}
 .nav-item  {
  opacity:0;
  transform:translateX(40px) skewX(-10deg);
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1),opacity 0.5s ease;

}
 .nav-menu.active .nav-item  {
  opacity:1;
  transform:translateX(0) skewX(0);

}
 .nav-menu.active .nav-item:nth-child(1)  {
  transition-delay:0.03s;

}
 .nav-menu.active .nav-item:nth-child(2)  {
  transition-delay:0.06s;

}
 .nav-menu.active .nav-item:nth-child(3)  {
  transition-delay:0.09s;

}
 .nav-menu.active .nav-item:nth-child(4)  {
  transition-delay:0.12s;

}
 .nav-menu.active .nav-item:nth-child(5)  {
  transition-delay:0.15s;

}
 .nav-menu.active .nav-item:nth-child(6)  {
  transition-delay:0.18s;

}
 .nav-menu.active .nav-item:nth-child(7)  {
  transition-delay:0.21s;

}
 .nav-menu.active .nav-item:nth-child(8)  {
  transition-delay:0.24s;

}
 .nav-menu.active .nav-item:nth-child(9)  {
  transition-delay:0.27s;

}
 .nav-menu.active .nav-item:nth-child(10)  {
  transition-delay:0.30s;

}
 .nav-link  {
  font-family:var(--font-title);
  font-size:1.4rem;
  font-weight:700;
  color:var(--text-gray);
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 16px;
  border-radius:8px;
  position:relative;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  text-transform:uppercase;
  letter-spacing:0.03em;
  width:100%;

}
 .nav-link::before  {
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%) scaleY(0);
  width:4px;
  height:24px;
  background:var(--primary);
  border-radius:4px;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  opacity:0;

}
 .nav-link span  {
  font-family:var(--font-title);
  font-size:0.75rem;
  font-weight:700;
  color:var(--primary);
  opacity:0.8;
  background:rgba(16,185,129,0.06);
  border:1px solid rgba(16,185,129,0.15);
  padding:3px 8px;
  border-radius:6px;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;

}
 .nav-link:hover  {
  color:var(--text-white);
  background:rgba(15,23,42,0.02);
  padding-left:24px;

}
 .nav-link:hover::before,.nav-link.active::before  {
  transform:translateY(-50%) scaleY(1);
  opacity:1;

}
 .nav-link:hover span,.nav-link.active span  {
  background:var(--primary);
  color:#ffffff;
  border-color:transparent;
  opacity:1;
  box-shadow:none;

}
 .nav-link.active  {
  color:var(--primary);
  background:rgba(16,185,129,0.04);

}
 .nav-menu-footer  {
  border-top:1px solid rgba(15,23,42,0.06);
  padding-top:25px;
  display:flex;
  flex-direction:column;
  gap:15px;

}
 .nav-menu-legal  {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  font-size:0.8rem;
  color:var(--text-muted);

}
 .nav-menu-legal a  {
  color:var(--text-muted);
  font-weight:500;

}
 .nav-menu-legal a:hover  {
  color:var(--secondary-hover);

}
 .nav-menu-footer::after  {
  content:'© 2026 Sales Mitsubishi Surabaya Kft.';
  display:block;
  font-size:0.7rem;
  color:var(--text-muted);
  opacity:0.6;
  margin-top:5px;

}
 .hero  {
  padding-top:140px;
  padding-bottom:70px;
  position:relative;

}
 .hero-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;

}
 @media (min-width:992px)  {
  .hero-grid  {
  grid-template-columns:1.1fr 0.9fr;

}

}
 .hero-content  {
  display:flex;
  flex-direction:column;
  align-items:flex-start;

}
 .hero-badge  {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(16,185,129,0.06);
  border:1px solid var(--border-color);
  padding:6px 14px;
  border-radius:20px;
  font-size:0.8rem;
  font-weight:500;
  margin-bottom:25px;
  text-transform:uppercase;

}
 .hero-badge span  {
  display:inline-block;
  width:8px;
  height:8px;
  background-color:var(--primary);
  border-radius:50%;
  box-shadow:none;
  animation:pulse 1.8s infinite;

}
 @keyframes pulse  {
  0%  {
  transform:scale(0.9);
  opacity:0.6;

}
 50%  {
  transform:scale(1.2);
  opacity:1;

}
 100%  {
  transform:scale(0.9);
  opacity:0.6;

}

}
 .hero-title  {
  font-family:var(--font-title);
  font-size:2.8rem;
  line-height:1.1;
  font-weight:700;
  margin-bottom:20px;
  letter-spacing:-0.03em;
  color:#0f172a;

}
 .hero-title span  {
  color:var(--primary);
}
 .hero-description  {
  font-size:1.05rem;
  color:var(--text-gray);
  margin-bottom:35px;
  line-height:1.7;
  font-weight:300;

}
 .hero-actions  {
  display:flex;
  flex-wrap:wrap;
  gap:15px;

}
 .hero-image-container  {
  position:relative;

}
 .hero-image-wrapper  {
  position:relative;
  border-radius:var(--border-radius);
  overflow:hidden;
  border:1px solid var(--border-color);
  box-shadow:0 15px 40px rgba(15,23,42,0.08);
  background-color:#ffffff;

}
 .hero-image  {
  width:100%;
  height:auto;
  object-fit:cover;
  transition:transform 0.8s ease;

}
 .hero-image-wrapper:hover .hero-image  {
  transform:scale(1.02);

}
 .card-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:25px;

}
 @media (min-width:768px)  {
  .card-grid  {
  grid-template-columns:repeat(2,1fr);

}

}
 @media (min-width:992px)  {
  .card-grid  {
  grid-template-columns:repeat(3,1fr);

}

}
 .card  {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:35px 30px;
  border-radius:var(--border-radius);
  box-shadow:0 4px 15px rgba(15,23,42,0.02);
  transition:var(--transition);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  position:relative;

}
 .card-grid--featured .card:first-child  {
  background:var(--bg-dark);
  border-color:var(--primary);

}
 @media (min-width:768px)  {
  .card-grid--featured .card:first-child  {
  flex-direction:row;
  align-items:center;
  gap:30px;

}
 .card-grid--featured .card:first-child .card-icon  {
  font-size:3.5rem;
  margin-bottom:0;
  flex-shrink:0;

}

}
 @media (min-width:992px)  {
  .card-grid--featured .card:first-child  {
  grid-column:1 / -1;

}

}
 .card::before  {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:var(--border-radius);
  background:rgba(15,23,42,0.02);
  opacity:0;
  transition:var(--transition);
  z-index:-1;

}
 .card:hover  {
  transform:translateY(-5px);
  border-color:var(--primary);
  box-shadow:0 10px 30px rgba(15,23,42,0.08);

}
 .card:hover::before  {
  opacity:1;

}
 .card-icon  {
  font-size:2.2rem;
  margin-bottom:20px;
  filter:drop-shadow(0 0 10px var(--primary-glow));

}
 .card-icon svg  {
  color:var(--primary);

}
 .card-title  {
  font-family:var(--font-title);
  font-size:1.4rem;
  font-weight:700;
  margin-bottom:12px;
  color:#0f172a;

}
 .card-desc  {
  color:var(--text-gray);
  font-size:0.95rem;
  font-weight:300;
  line-height:1.6;
  margin-bottom:25px;

}
 .card-link  {
  font-family:var(--font-title);
  font-weight:700;
  font-size:0.85rem;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:0.05em;
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:auto;

}
 .card:hover .card-link  {
  color:var(--primary-hover);

}
 .stadiums-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:40px;

}
 .stadium-card  {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  box-shadow:0 4px 15px rgba(15,23,42,0.02);
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr;
  transition:var(--transition);

}
 @media (min-width:992px)  {
  .stadium-card  {
  grid-template-columns:1.1fr 0.9fr;

}
 .stadium-card.reverse  {
  grid-template-columns:0.9fr 1.1fr;

}

}
 .stadium-card:hover  {
  border-color:var(--primary);
  box-shadow:0 15px 40px rgba(15,23,42,0.06);

}
 .stadium-info  {
  padding:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;

}
 .stadium-title  {
  font-family:var(--font-title);
  font-size:1.8rem;
  font-weight:700;
  margin-bottom:15px;
  color:#0f172a;

}
 .stadium-desc  {
  color:var(--text-gray);
  font-size:1rem;
  margin-bottom:20px;
  font-weight:300;
  line-height:1.6;

}
 .coaches-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:30px;

}
 @media (min-width:768px)  {
  .coaches-grid  {
  grid-template-columns:repeat(2,1fr);

}

}
 .coach-card  {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  overflow:hidden;
  box-shadow:0 4px 15px rgba(15,23,42,0.02);
  transition:var(--transition);
  display:flex;
  flex-direction:column;

}
 .coach-card:hover  {
  transform:translateY(-5px);
  border-color:var(--secondary);
  box-shadow:0 10px 30px var(--secondary-glow);

}
 .coach-img-container  {
  width:100%;
  height:280px;
  overflow:hidden;
  position:relative;

}
 .coach-img-container img  {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.6s ease;

}
 .coach-card:hover .coach-img-container img  {
  transform:scale(1.03);

}
 .coach-details  {
  padding:30px;
  flex-grow:1;
  display:flex;
  flex-direction:column;

}
 .coach-name  {
  font-family:var(--font-title);
  font-size:1.4rem;
  font-weight:700;
  margin-bottom:6px;
  color:#0f172a;

}
 .coach-meta  {
  font-size:0.8rem;
  color:var(--secondary-hover);
  font-family:var(--font-title);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:15px;
  font-weight:700;

}
 .coach-specialty  {
  color:var(--text-gray);
  font-size:0.95rem;
  font-weight:300;
  margin-bottom:15px;
  line-height:1.6;

}
 .coach-style  {
  font-size:0.85rem;
  color:var(--text-muted);
  border-top:1px solid var(--border-color);
  padding-top:15px;
  margin-top:auto;

}
 .players-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:25px;

}
 @media (min-width:768px)  {
  .players-grid  {
  grid-template-columns:repeat(2,1fr);

}

}
 @media (min-width:992px)  {
  .players-grid  {
  grid-template-columns:repeat(3,1fr);

}

}
 .player-card  {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  overflow:hidden;
  box-shadow:0 4px 15px rgba(15,23,42,0.02);
  transition:var(--transition);
  position:relative;

}
 .player-card:hover  {
  transform:translateY(-5px);
  border-color:var(--primary);
  box-shadow:0 10px 30px var(--primary-glow);

}
 .player-img-container  {
  position:relative;
  height:250px;
  overflow:hidden;

}
 .player-img-container img  {
  width:100%;
  height:100%;
  object-fit:cover;

}
 .player-rating  {
  position:absolute;
  top:15px;
  right:15px;
  background:var(--primary);
  color:#ffffff;
  font-family:var(--font-title);
  font-size:1.1rem;
  font-weight:700;
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;

}
 .player-details  {
  padding:25px;

}
 .player-meta  {
  font-size:0.75rem;
  color:var(--secondary-hover);
  font-family:var(--font-title);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:6px;
  font-weight:700;

}
 .player-name  {
  font-family:var(--font-title);
  font-size:1.3rem;
  font-weight:700;
  margin-bottom:15px;
  color:#0f172a;

}
 .player-stats  {
  display:flex;
  flex-direction:column;
  gap:10px;

}
 .stat-bar-wrapper  {
  font-size:0.85rem;

}
 .stat-info  {
  display:flex;
  justify-content:space-between;
  margin-bottom:4px;
  color:var(--text-gray);

}
 .stat-bar-bg  {
  width:100%;
  height:6px;
  background:rgba(15,23,42,0.05);
  border-radius:3px;
  overflow:hidden;

}
 .stat-bar-fill  {
  height:100%;
  border-radius:3px;
  background:var(--primary);

}
 .blog-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:30px;

}
 @media (min-width:768px)  {
  .blog-grid  {
  grid-template-columns:repeat(2,1fr);

}

}
 @media (min-width:992px)  {
  .blog-grid  {
  grid-template-columns:repeat(3,1fr);

}

}
 .blog-card  {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  overflow:hidden;
  box-shadow:0 4px 15px rgba(15,23,42,0.02);
  transition:var(--transition);
  display:flex;
  flex-direction:column;

}
 .blog-card:hover  {
  transform:translateY(-5px);
  border-color:var(--secondary);
  box-shadow:0 10px 30px var(--secondary-glow);

}
 .blog-card-img  {
  height:200px;
  overflow:hidden;
  background-color:rgba(15,23,42,0.02);

}
 .blog-card-img img  {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.5s ease;

}
 .blog-card:hover .blog-card-img img  {
  transform:scale(1.02);

}
 .blog-card-content  {
  padding:25px;
  flex-grow:1;
  display:flex;
  flex-direction:column;

}
 .blog-category  {
  font-size:0.75rem;
  color:var(--secondary-hover);
  font-family:var(--font-title);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:700;
  margin-bottom:10px;

}
 .blog-title  {
  font-family:var(--font-title);
  font-size:1.25rem;
  font-weight:700;
  line-height:1.3;
  margin-bottom:12px;
  color:#0f172a;

}
 .blog-excerpt  {
  color:var(--text-gray);
  font-size:0.9rem;
  font-weight:300;
  line-height:1.6;
  margin-bottom:20px;

}
 .blog-meta  {
  font-size:0.8rem;
  color:var(--text-muted);
  border-top:1px solid var(--border-color);
  padding-top:15px;
  margin-top:auto;
  display:flex;
  justify-content:space-between;

}
 .testimonios-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:25px;

}
 @media (min-width:768px)  {
  .testimonios-grid  {
  grid-template-columns:repeat(2,1fr);

}

}
 .testimonio-card  {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:30px;
  border-radius:var(--border-radius);
  box-shadow:0 4px 15px rgba(15,23,42,0.02);
  transition:var(--transition);
  display:flex;
  flex-direction:column;

}
 .testimonio-card:hover  {
  border-color:var(--primary);
  box-shadow:0 8px 25px var(--primary-glow);

}
 .testimonio-rating  {
  color:#eab308;
  font-size:1.1rem;
  margin-bottom:15px;

}
 .testimonio-text  {
  color:var(--text-white);
  font-size:0.95rem;
  line-height:1.6;
  font-weight:300;
  margin-bottom:20px;
  font-style:italic;

}
 .testimonio-author  {
  font-family:var(--font-title);
  font-size:0.95rem;
  font-weight:700;
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:10px;
  color:#0f172a;

}
 .testimonio-author::before  {
  content:'';
  display:inline-block;
  width:10px;
  height:10px;
  background-color:var(--primary);
  border-radius:50%;

}
 .form-container,.testimonios-form-container  {
  background:#ffffff;
  border:1px solid var(--border-color);
  padding:24px 16px;
  border-radius:var(--border-radius);
  box-shadow:0 10px 30px rgba(15,23,42,0.03);

}
 @media (min-width:768px)  {
  .form-container,.testimonios-form-container  {
  padding:40px;

}

}
 .pricing-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:30px;

}
 @media (min-width:768px)  {
  .pricing-grid  {
  grid-template-columns:repeat(3,1fr);

}

}
 .pricing-card  {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:40px 30px;
  border-radius:var(--border-radius);
  box-shadow:0 4px 15px rgba(15,23,42,0.02);
  transition:var(--transition);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;

}
 .pricing-card.active  {
  border-color:var(--primary);
  background:rgba(16,185,129,0.02);
  box-shadow:0 8px 30px rgba(15,23,42,0.08);

}
 .pricing-card.active::before  {
  content:'RECOMMENDED';
  position:absolute;
  top:20px;
  right:-35px;
  background:var(--primary);
  color:#ffffff;
  font-family:var(--font-title);
  font-size:0.65rem;
  font-weight:800;
  padding:6px 30px;
  transform:rotate(45deg);
  letter-spacing:0.08em;

}
 .pricing-card:hover  {
  transform:translateY(-5px);
  border-color:var(--secondary);

}
 .pricing-badge  {
  font-size:0.75rem;
  color:var(--secondary-hover);
  font-family:var(--font-title);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:15px;

}
 .pricing-card.active .pricing-badge  {
  color:var(--primary);

}
 .pricing-title  {
  font-family:var(--font-title);
  font-size:1.6rem;
  font-weight:700;
  margin-bottom:10px;
  color:#0f172a;

}
 .pricing-price  {
  font-family:var(--font-title);
  font-size:2.5rem;
  font-weight:700;
  margin-bottom:25px;
  display:flex;
  align-items:baseline;
  color:#0f172a;

}
 .pricing-price span  {
  font-size:0.9rem;
  color:var(--text-gray);
  font-weight:400;
  margin-left:5px;

}
 .pricing-features  {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:35px;
  flex-grow:1;

}
 .pricing-feature  {
  font-size:0.9rem;
  color:var(--text-gray);
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:300;

}
 .pricing-feature::before  {
  content:'✓';
  color:var(--primary);
  font-weight:bold;

}
 .faq-list  {
  display:flex;
  flex-direction:column;
  gap:15px;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;

}
 .faq-item  {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  overflow:hidden;
  transition:var(--transition);

}
 .faq-item:hover  {
  border-color:rgba(14,165,233,0.3);

}
 .faq-item.active  {
  border-color:var(--secondary);
  box-shadow:0 5px 20px var(--secondary-glow);

}
 .faq-trigger  {
  width:100%;
  padding:24px 30px;
  text-align:left;
  font-family:var(--font-title);
  font-size:1.15rem;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  color:#0f172a;

}
 .faq-icon  {
  font-size:1.4rem;
  color:var(--primary);
  transition:transform 0.4s ease;

}
 .faq-item.active .faq-icon  {
  transform:rotate(45deg);
  color:var(--secondary);

}
 .faq-content  {
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s cubic-bezier(0.16,1,0.3,1);

}
 .faq-item.active .faq-content  {
  max-height:500px;

}
 .faq-content p  {
  padding:0 30px 24px 30px;
  color:var(--text-gray);
  font-weight:300;
  font-size:0.95rem;
  line-height:1.7;

}
 .form-group  {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:20px;

}
 .form-label  {
  font-size:0.85rem;
  color:var(--text-gray);
  font-family:var(--font-title);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;

}
 .form-input,.form-textarea,.form-select  {
  background:var(--bg-input);
  border:1px solid var(--border-color);
  padding:14px 20px;
  border-radius:8px;
  color:var(--text-white);
  font-size:0.95rem;
  transition:var(--transition);
  width:100%;

}
 .form-input:focus,.form-textarea:focus,.form-select:focus  {
  border-color:var(--secondary);
  outline:none;
  box-shadow:0 0 15px var(--secondary-glow);

}
 .form-checkbox-group  {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:25px;
  font-size:0.85rem;
  color:var(--text-gray);
  line-height:1.5;

}
 .form-checkbox  {
  margin-top:3px;
  width:16px;
  height:16px;
  accent-color:var(--primary);

}
 .contact-wrapper  {
  display:grid;
  grid-template-columns:1fr;
  gap:50px;

}
 @media (min-width:992px)  {
  .contact-wrapper  {
  grid-template-columns:0.9fr 1.1fr;

}

}
 .contact-info  {
  display:flex;
  flex-direction:column;
  gap:30px;

}
 .contact-info-card  {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:25px;
  border-radius:var(--border-radius);
  display:flex;
  gap:15px;

}
 .contact-info-icon  {
  font-size:1.8rem;
  filter:drop-shadow(0 0 8px var(--primary-glow));

}
 .contact-info-details h3  {
  font-family:var(--font-title);
  font-size:1.1rem;
  margin-bottom:6px;
  color:#0f172a;

}
 .contact-info-details p  {
  color:var(--text-gray);
  font-size:0.95rem;
  font-weight:300;

}
 .policy-container  {
  width:100%;
  max-width:850px;
  margin-left:auto;
  margin-right:auto;
  background:#ffffff;
  border:1px solid var(--border-color);
  padding:24px 16px;
  border-radius:var(--border-radius);
  box-shadow:0 10px 35px rgba(15,23,42,0.02);

}
 @media (min-width:768px)  {
  .policy-container  {
  padding:40px;

}

}
 .policy-title  {
  font-family:var(--font-title);
  font-size:2.2rem;
  font-weight:700;
  margin-bottom:10px;
  color:#0f172a;

}
 .policy-meta  {
  font-size:0.85rem;
  color:var(--text-muted);
  margin-bottom:30px;
  text-transform:uppercase;

}
 .policy-list  {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:25px;

}
 .policy-item h2  {
  font-family:var(--font-title);
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:10px;
  color:var(--secondary-hover);

}
 .policy-item p  {
  color:var(--text-gray);
  font-size:0.95rem;
  line-height:1.7;
  font-weight:300;

}
 .auth-container  {
  width:100%;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
  background:#ffffff;
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  overflow:hidden;
  box-shadow:0 10px 35px rgba(15,23,42,0.03);

}
 .auth-header  {
  display:flex;
  border-bottom:1px solid var(--border-color);

}
 .auth-tab  {
  flex:1;
  padding:20px;
  text-align:center;
  font-family:var(--font-title);
  font-weight:700;
  cursor:pointer;
  transition:var(--transition);
  background:rgba(15,23,42,0.01);
  color:var(--text-gray);

}
 .auth-tab.active  {
  background:none;
  color:var(--primary);
  border-bottom:3px solid var(--primary);

}
 .auth-body  {
  padding:24px 16px;

}
 @media (min-width:768px)  {
  .auth-body  {
  padding:40px;

}

}
 .auth-form  {
  display:none;

}
 .auth-form.active  {
  display:block;

}
 .footer_cmp  {
  background:#ffffff;
  border-top:1px solid var(--border-color);
  padding-top:80px;
  padding-bottom:40px;
  position:relative;
  z-index:10;
  box-shadow:0 -10px 30px rgba(15,23,42,0.02);

}
 .footer-top  {
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  margin-bottom:45px;

}
 @media (min-width:768px)  {
  .footer-top  {
  grid-template-columns:repeat(2,1fr);

}

}
 @media (min-width:992px)  {
  .footer-top  {
  grid-template-columns:1.2fr 0.8fr 0.8fr 1.2fr;

}

}
 .footer-brand h2  {
  font-family:var(--font-title);
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:15px;
  color:#0f172a;

}
 .footer-brand h2 span  {
  color:var(--primary);

}
 .footer-brand-text  {
  color:var(--text-gray);
  font-size:0.9rem;
  font-weight:300;
  line-height:1.6;
  margin-bottom:20px;

}
 .footer-socials  {
  display:flex;
  gap:12px;

}
 .footer-socials a  {
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(15,23,42,0.03);
  color:var(--text-gray);
  border:1px solid var(--border-color);
  transition:var(--transition);

}
 .footer-socials a:hover  {
  background:var(--primary);
  color:#ffffff;
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 4px 12px var(--primary-glow);

}
 .footer-title  {
  font-family:var(--font-title);
  font-size:1rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:20px;
  color:var(--secondary-hover);

}
 .footer-links  {
  display:flex;
  flex-direction:column;
  gap:12px;

}
 .footer-link  {
  font-size:0.9rem;
  color:var(--text-gray);
  font-weight:300;

}
 .footer-link:hover  {
  color:var(--primary);
  padding-left:5px;

}
 .footer-contact-item  {
  font-size:0.85rem;
  color:var(--text-gray);
  margin-bottom:12px;
  line-height:1.5;

}
 .footer-contact-item span  {
  display:block;
  font-family:var(--font-title);
  font-weight:700;
  color:#0f172a;

}
 .footer-middle  {
  border-top:1px solid var(--border-color);
  border-bottom:1px solid var(--border-color);
  padding:40px 0;
  margin-bottom:40px;

}
 .footer-newsletter  {
  max-width:550px;

}
 .footer-newsletter h4  {
  font-family:var(--font-title);
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:8px;
  color:#0f172a;

}
 .footer-newsletter p  {
  color:var(--text-gray);
  font-size:0.9rem;
  margin-bottom:20px;
  font-weight:300;

}
 .footer-newsletter-form  {
  display:flex;
  gap:10px;

}
 @media (max-width:576px)  {
  .footer-newsletter-form  {
  flex-direction:column;

}

}
 .footer-bottom  {
  display:flex;
  flex-direction:column;
  gap:20px;

}
 @media (min-width:768px)  {
  .footer-bottom  {
  flex-direction:row;
  justify-content:space-between;
  align-items:flex-start;

}

}
 .footer-copy  {
  font-size:0.8rem;
  color:var(--text-muted);
  white-space:nowrap;

}
 .footer-legal-summary  {
  font-size:0.78rem;
  color:var(--text-muted);
  line-height:1.6;
  max-width:750px;
  font-weight:300;

}
 .live-ticker-strip  {
  background:var(--primary);
  color:#ffffff;
  padding:10px 0;
  overflow:hidden;
  white-space:nowrap;
  box-shadow:0 4px 12px var(--primary-glow);

}
 .ticker-content  {
  display:inline-block;
  animation:ticker 35s linear infinite;
  padding-left:100%;

}
 .ticker-item  {
  display:inline-block;
  margin-right:50px;
  font-family:var(--font-title);
  font-size:0.85rem;
  font-weight:500;

}
 .ticker-item strong  {
  font-weight:700;
  text-transform:uppercase;

}
 .badge-live  {
  background:#ffffff;
  color:var(--primary-hover);
  padding:2px 6px;
  border-radius:4px;
  font-size:0.7rem;
  font-weight:700;
  margin-right:8px;

}
 @keyframes ticker  {
  0%  {
  transform:translate3d(0,0,0);

}
 100%  {
  transform:translate3d(-100%,0,0);

}

}
 .simulated-map  {
  width:100%;
  height:250px;
  background-color:#ffffff;
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 20px rgba(15,23,42,0.05);

}
 .map-grid-lines  {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(14,165,233,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,0.05) 1px,transparent 1px);
  background-size:20px 20px;

}
 .map-glow-point  {
  position:absolute;
  width:16px;
  height:16px;
  background-color:var(--primary);
  border-radius:50%;
  box-shadow:none;
  top:50%;
  left:60%;
  transform:translate(-50%,-50%);
  animation:map-ping 2s infinite;

}
 @keyframes map-ping  {
  0%  {
  transform:translate(-50%,-50%) scale(0.8);
  opacity:0.5;

}
 50%  {
  transform:translate(-50%,-50%) scale(1.4);
  opacity:1;
  box-shadow:none;

}
 100%  {
  transform:translate(-50%,-50%) scale(0.8);
  opacity:0.5;

}

}
 .map-glow-ring  {
  position:absolute;
  border:1.5px solid var(--secondary);
  border-radius:50%;
  width:100px;
  height:100px;
  top:50%;
  left:60%;
  transform:translate(-50%,-50%);
  box-shadow:inset 0 0 20px var(--secondary-glow);
  opacity:0.3;

}
 .map-labels  {
  position:absolute;
  bottom:15px;
  left:15px;
  font-family:var(--font-title);
  font-size:0.75rem;
  color:var(--secondary-hover);
  text-transform:uppercase;
  letter-spacing:0.05em;
  background:rgba(255,255,255,0.9);
  padding:4px 10px;
  border-radius:4px;
  border:1px solid var(--border-color);
  font-weight:700;

}
 .motion-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;

}
 @media (min-width:992px)  {
  .motion-grid  {
  grid-template-columns:1fr 1fr;
  gap:60px;

}

}
 .scroll-zoom-container  {
  width:100%;
  aspect-ratio:4/3;
  border-radius:var(--border-radius);
  overflow:hidden;
  position:relative;
  border:1px solid var(--border-color);
  box-shadow:0 15px 40px rgba(15,23,42,0.08);
  background-color:#ffffff;

}
 .scroll-zoom-img  {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.15s cubic-bezier(0.1,0.8,0.2,1);
  will-change:transform;

}
 .telemetry-hud-overlay  {
  position:absolute;
  inset:0;
  pointer-events:none;
  border:2px dashed rgba(16,185,129,0.3);
  margin:15px;
  border-radius:8px;

}
 .hud-item  {
  position:absolute;
  background:rgba(15,23,42,0.85);
  color:#ffffff;
  font-family:var(--font-title);
  font-size:0.75rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:4px;
  letter-spacing:0.05em;

}
 .hud-top-left  {
  top:10px;
  left:10px;
  border-left:3px solid var(--primary);

}
 .hud-bottom-right  {
  bottom:10px;
  right:10px;
  border-right:3px solid var(--secondary);

}
 .alert-box  {
  background:rgba(124,58,237,0.04);
  border:1px solid rgba(124,58,237,0.15);
  padding:20px;
  border-radius:8px;
  font-size:0.9rem;
  color:var(--text-gray);
  margin-bottom:30px;

}
 .chalkboard-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  padding:24px;
  box-shadow:0 10px 30px rgba(0,102,255,0.02);

}
 @media (min-width:992px)  {
  .chalkboard-grid  {
  grid-template-columns:1.2fr 0.8fr;
  gap:40px;
  padding:40px;

}

}
 .pitch-container  {
  width:100%;
  background:#166534;
  border-radius:12px;
  padding:15px;
  box-shadow:inset 0 0 40px rgba(0,0,0,0.4);
  border:4px solid #15803d;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;

}
 .soccer-pitch  {
  position:relative;
  width:100%;
  height:100%;
  border:2px solid rgba(255,255,255,0.25);
  border-radius:4px;

}
 .pitch-marking  {
  position:absolute;
  border:2px solid rgba(255,255,255,0.25);
  pointer-events:none;

}
 .penalty-area-top  {
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:50%;
  height:20%;
  border-top:none;

}
 .penalty-area-bottom  {
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:50%;
  height:20%;
  border-bottom:none;

}
 .center-circle  {
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:25%;
  aspect-ratio:1;
  border-radius:50%;

}
 .center-line  {
  top:50%;
  left:0;
  width:100%;
  height:0;
  border-top:2px solid rgba(255,255,255,0.25);
  border-bottom:none;
  border-left:none;
  border-right:none;

}
 .player-node  {
  position:absolute;
  left:var(--pos-x);
  top:var(--pos-y);
  transform:translate(-50%,-50%);
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--primary);
  border:2px solid #ffffff;
  color:#ffffff;
  font-family:var(--font-title);
  font-size:0.8rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
  transition:left 0.8s cubic-bezier(0.25,1,0.5,1),top 0.8s cubic-bezier(0.25,1,0.5,1),background 0.3s;
  cursor:pointer;

}
 .player-node:hover::after  {
  content:attr(data-name);
  position:absolute;
  bottom:38px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(15,23,42,0.95);
  color:#ffffff;
  padding:4px 8px;
  border-radius:4px;
  font-size:0.7rem;
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
  z-index:10;

}
 .player-node.mid  {
  background:var(--secondary);

}
 .player-node.fwd  {
  background:var(--accent);

}
 .tactical-controls  {
  display:flex;
  flex-direction:column;
  justify-content:center;

}
 .controls-card  {
  display:flex;
  flex-direction:column;
  gap:20px;

}
 .controls-title  {
  font-family:var(--font-title);
  font-size:1.5rem;
  font-weight:700;
  color:#0f172a;

}
 .controls-desc  {
  color:var(--text-gray);
  font-size:0.95rem;
  font-weight:300;
  line-height:1.6;

}
 .formation-buttons  {
  display:flex;
  flex-direction:column;
  gap:10px;

}
 .formation-btn  {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:12px 18px;
  border:1px solid var(--border-color);
  border-radius:10px;
  background:rgba(15,23,42,0.02);
  cursor:pointer;
  transition:all 0.3s ease;
  text-align:left;

}
 .formation-btn strong  {
  font-family:var(--font-title);
  font-size:0.9rem;
  color:#0f172a;

}
 .formation-btn span  {
  font-size:0.75rem;
  color:var(--text-muted);

}
 .formation-btn:hover  {
  border-color:var(--primary);
  background:rgba(0,102,255,0.02);

}
 .formation-btn.active  {
  border-color:var(--primary);
  background:rgba(0,102,255,0.05);
  box-shadow:0 4px 15px rgba(0,102,255,0.05);

}
 .formation-analysis  {
  background:rgba(15,23,42,0.02);
  border-left:4px solid var(--primary);
  padding:16px;
  border-radius:0 8px 8px 0;
  font-size:0.85rem;
  line-height:1.6;

}
 .formation-analysis h3  {
  font-family:var(--font-title);
  font-weight:700;
  color:#0f172a;
  margin-bottom:6px;

}
 .analysis-stat-row  {
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  font-size:0.8rem;
  font-weight:600;
  border-top:1px solid rgba(0,0,0,0.05);
  padding-top:8px;

}
 .poll-cards-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:25px;

}
 @media (min-width:768px)  {
  .poll-cards-grid  {
  grid-template-columns:1fr 1fr;
  gap:30px;

}

}
 .poll-option-card  {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:30px;
  border-radius:var(--border-radius);
  box-shadow:0 4px 15px rgba(15,23,42,0.02);
  transition:var(--transition);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;

}
 .poll-option-card:hover  {
  transform:translateY(-3px);
  box-shadow:0 8px 25px rgba(0,102,255,0.05);
  border-color:rgba(0,102,255,0.15);

}
 .poll-option-header  {
  display:flex;
  align-items:center;
  gap:15px;

}
 .poll-badge-icon  {
  font-size:1.8rem;

}
 .poll-option-title  {
  font-family:var(--font-title);
  font-size:1.3rem;
  font-weight:700;
  color:#0f172a;

}
 .poll-option-desc  {
  color:var(--text-gray);
  font-size:0.95rem;
  font-weight:300;
  line-height:1.6;

}
 .poll-vote-container  {
  display:flex;
  flex-direction:column;
  gap:15px;
  margin-top:auto;

}
 .poll-result-bar-wrapper  {
  display:flex;
  align-items:center;
  gap:12px;

}
 .poll-result-bar  {
  height:8px;
  border-radius:4px;
  transition:width 1s cubic-bezier(0.16,1,0.3,1);

}
 .poll-percentage  {
  font-family:var(--font-title);
  font-size:0.85rem;
  font-weight:700;
  color:#0f172a;
  min-width:35px;

}
 .btn-group  {
  display:flex;
  gap:15px;

}
 .leaderboard-filters  {
  display:flex;
  gap:10px;
  flex-wrap:wrap;

}
 .leaderboard-table-container  {
  width:100%;
  overflow-x:auto;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  box-shadow:0 4px 15px rgba(15,23,42,0.02);

}
 .leaderboard-table  {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:0.95rem;

}
 .leaderboard-table th  {
  background:rgba(15,23,42,0.02);
  font-family:var(--font-title);
  font-weight:700;
  color:#0f172a;
  padding:16px 24px;
  border-bottom:1px solid var(--border-color);
  text-transform:uppercase;
  font-size:0.8rem;
  letter-spacing:0.05em;

}
 .leaderboard-table td  {
  padding:16px 24px;
  border-bottom:1px solid rgba(0,102,255,0.04);
  vertical-align:middle;

}
 .leaderboard-table tbody tr  {
  transition:background 0.3s;

}
 .leaderboard-table tbody tr:hover  {
  background:rgba(0,102,255,0.01);

}
 .rank-col  {
  font-family:var(--font-title);
  font-weight:800;
  color:var(--primary);

}
 .player-cell  {
  display:flex;
  flex-direction:column;

}
 .player-cell strong  {
  color:#0f172a;

}
 .player-cell span  {
  font-size:0.75rem;
  color:var(--text-muted);

}
 .pos-badge  {
  font-family:var(--font-title);
  font-size:0.7rem;
  font-weight:700;
  padding:3px 8px;
  border-radius:4px;
  display:inline-block;

}
 .pos-badge.mid  {
  background:rgba(212,175,55,0.1);
  color:var(--secondary-hover);

}
 .pos-badge.fwd  {
  background:rgba(0,166,81,0.1);
  color:var(--accent);

}
 .pos-badge.def  {
  background:rgba(0,102,255,0.1);
  color:var(--primary);

}
 .metric-bar-wrapper  {
  display:flex;
  flex-direction:column;
  gap:6px;
  width:140px;

}
 .metric-bar-wrapper span  {
  font-size:0.75rem;
  font-weight:600;
  color:var(--text-gray);

}
 .metric-bar  {
  width:100%;
  height:6px;
  background:rgba(15,23,42,0.05);
  border-radius:3px;
  overflow:hidden;

}
 .metric-progress  {
  height:100%;
  border-radius:3px;
  transition:width 0.5s ease;

}
 .aerodynamics-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:25px;

}
 @media (min-width:768px)  {
  .aerodynamics-grid  {
  grid-template-columns:repeat(3,1fr);

}

}
 .aero-stat-card  {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:30px;
  border-radius:var(--border-radius);
  box-shadow:0 4px 15px rgba(15,23,42,0.02);
  transition:var(--transition);

}
 .aero-stat-card:hover  {
  transform:translateY(-3px);
  border-color:var(--primary);
  box-shadow:0 8px 25px rgba(0,102,255,0.05);

}
 .aero-stat-header  {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:15px;

}
 .aero-icon  {
  font-size:1.5rem;

}
 .aero-stat-header h3  {
  font-family:var(--font-title);
  font-size:1rem;
  font-weight:700;
  color:#0f172a;

}
 .aero-big-number  {
  font-family:var(--font-title);
  font-size:2.2rem;
  font-weight:800;
  color:var(--primary);
  display:block;
  margin-bottom:10px;

}
 .aero-big-number small  {
  font-size:0.9rem;
  font-weight:500;
  color:var(--text-muted);

}
 .aero-card-desc  {
  font-size:0.85rem;
  color:var(--text-gray);
  line-height:1.5;
  margin-bottom:20px;

}
 .aero-status-bar  {
  width:100%;
  height:4px;
  background:rgba(15,23,42,0.05);
  border-radius:2px;
  overflow:hidden;

}
 .aero-status-fill  {
  height:100%;
  border-radius:2px;

}
 .quotes-grid  {
  display:grid;
  grid-template-columns:1fr;
  gap:30px;

}
 @media (min-width:992px)  {
  .quotes-grid  {
  grid-template-columns:1fr 1fr;
  gap:40px;

}

}
 .quote-card  {
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:35px;
  border-radius:var(--border-radius);
  box-shadow:0 4px 15px rgba(15,23,42,0.02);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  margin:0;
  position:relative;

}
 .quote-card::before  {
  content:'"';
  position:absolute;
  top:15px;
  left:25px;
  font-size:6rem;
  color:rgba(0,102,255,0.05);
  font-family:var(--font-title);
  line-height:1;

}
 .quote-content  {
  position:relative;
  z-index:2;
  margin-bottom:25px;

}
 .quote-content p  {
  font-size:1.05rem;
  line-height:1.62;
  color:var(--text-gray);
  font-style:italic;
  font-weight:300;

}
 .quote-author  {
  display:flex;
  align-items:center;
  gap:15px;

}
 .quote-author-info  {
  display:flex;
  flex-direction:column;

}
 .quote-author-info strong  {
  font-family:var(--font-title);
  color:#0f172a;
  font-size:0.95rem;

}
 .quote-author-info span  {
  font-size:0.75rem;
  color:var(--text-muted);

}