/* Custom styles for PUBGBot.io */

/* Discord icon */
.discord-icon { 
  width: 16px; 
  height: 16px; 
}

/* Layout fixes */
.hero { 
  padding: 72px 0 36px; 
}

.hero-grid { 
  display: grid; 
  grid-template-columns: 1.35fr .65fr; 
  gap: 28px; 
  align-items: center; 
}

.hero h1 { 
  font-size: clamp(28px, 4vw, 46px); 
  line-height: 1.1; 
  margin: 0 0 16px; 
}

.hero p { 
  color: #9aa4b2; 
  margin: 0 0 24px; 
  font-size: 1.05rem; 
}

.hero-cta { 
  display: flex; 
  gap: 12px; 
  flex-wrap: wrap; 
}

.hero-card { 
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); 
  border: 1px solid rgba(255,255,255,.08); 
  border-radius: 16px; 
  padding: 20px; 
  box-shadow: 0 10px 30px rgba(0,0,0,.35); 
}

.hero-video { 
  aspect-ratio: 16/9; 
  width: 100%; 
  border: 0; 
  border-radius: 12px; 
  box-shadow: 0 10px 30px rgba(0,0,0,.35); 
}

/* Section styling */
section { 
  padding: 40px 0; 
}

.section-title { 
  font-size: clamp(22px, 3vw, 32px); 
  margin: 0 0 10px; 
}

.section-sub { 
  color: #9aa4b2; 
  margin: 0 0 24px; 
}

/* Features grid */
.features { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 18px; 
}

.card { 
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); 
  border: 1px solid rgba(255,255,255,.08); 
  border-radius: 16px; 
  padding: 18px; 
  box-shadow: 0 10px 30px rgba(0,0,0,.35); 
}

.card h3 { 
  margin: 6px 0 8px; 
  font-size: 18px; 
}

.card p { 
  margin: 0; 
  color: #9aa4b2; 
}

/* Gallery grid */
.gallery { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 18px; 
}

.figure { 
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); 
  border: 1px solid rgba(255,255,255,.08); 
  border-radius: 16px; 
  box-shadow: 0 10px 30px rgba(0,0,0,.35); 
  overflow: hidden; 
  cursor: pointer; 
  transition: transform .2s ease, box-shadow .2s ease; 
}

.figure:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 15px 40px rgba(0,0,0,.4); 
}

.figure img { 
  width: 100%; 
  height: 200px; 
  object-fit: contain; 
  display: block; 
  background: rgba(0,0,0,.2); 
}

.figure figcaption { 
  padding: 12px 14px; 
  color: #9aa4b2; 
  font-size: .95rem; 
  border-top: 1px solid rgba(255,255,255,.06); 
}

/* Commands grid */
.cmd-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 18px; 
}

.cmd h4 { 
  margin: 6px 0 8px; 
}

.kbd { 
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
  background: #0e121a; 
  border: 1px solid rgba(255,255,255,.08); 
  padding: 3px 8px; 
  border-radius: 8px; 
}

/* Header and navigation */
header { 
  position: sticky; 
  top: 0; 
  z-index: 20; 
  background: rgba(11,13,18,.7); 
  backdrop-filter: blur(8px); 
  border-bottom: 1px solid rgba(255,255,255,.06);
  min-height: 80px;
  display: flex;
  align-items: center;
}

.nav { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  width: 100%;
  padding: 0;
}

.brand { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  font-weight: 700; 
  letter-spacing: .3px; 
  color: var(--tg-heading-color);
  text-decoration: none;
}

.brand img { 
  width: 36px; 
  height: 36px; 
  border-radius: 8px; 
}

.nav-links { 
  display: flex; 
  gap: 18px; 
  align-items: center; 
}

.nav-links a { 
  color: var(--tg-body-color); 
  text-decoration: none; 
  transition: color 0.3s ease; 
}

.nav-links a:hover { 
  color: var(--tg-theme-primary); 
}

/* Special hexagonal button style */
.btn-hexagonal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: #0b0d12 !important;
  color: #e6ebf1 !important;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #27ef96 !important;
  transition: all 0.3s ease;
  height: 48px;
  min-height: 48px;
  cursor: pointer;
  border-radius: 8px;
  outline: none !important;
  box-sizing: border-box;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #27ef96 !important;
}

.btn-hexagonal:hover {
  background: #27ef96;
  color: #0b0d12;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(39, 239, 150, 0.3);
}

.btn-hexagonal .discord-icon {
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}

.btn-hexagonal:hover .discord-icon {
  filter: brightness(0);
}

/* Button styles */
.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: .5rem; 
  padding: 12px 20px; 
  border-radius: 12px; 
  font-weight: 600; 
  border: 1px solid transparent; 
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease; 
  cursor: pointer;
  height: 48px;
  min-height: 48px;
  text-decoration: none;
}

.btn:hover { 
  transform: translateY(-1px); 
}

/* Container */
.container { 
  max-width: 1140px; 
  padding: 0 20px; 
  margin: 0 auto; 
}

/* Footer */
footer { 
  padding: 36px 0 50px; 
  color: #9aa4b2; 
  border-top: 1px solid rgba(255,255,255,.06); 
  margin-top: 24px; 
}

/* Modal for images */
.modal { 
  display: none; 
  position: fixed; 
  z-index: 1000; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0,0,0,0.9); 
}

.modal-content { 
  margin: auto; 
  display: block; 
  width: 90%; 
  max-width: 800px; 
  max-height: 90%; 
  margin-top: 5%; 
}

.modal img { 
  width: 100%; 
  height: auto; 
  border-radius: 8px; 
}

.close { 
  position: absolute; 
  top: 15px; 
  right: 35px; 
  color: #f1f1f1; 
  font-size: 40px; 
  font-weight: bold; 
  cursor: pointer; 
}

.close:hover { 
  color: #bbb; 
}

/* Command examples for documentation */
.command-example { 
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); 
  border: 1px solid rgba(255,255,255,.08); 
  border-radius: 16px; 
  padding: 18px; 
  margin: 12px 0; 
  box-shadow: 0 10px 30px rgba(0,0,0,.35); 
}

.command-example h4 { 
  color: var(--tg-theme-primary); 
  margin-bottom: 8px; 
}

.command-example .usage { 
  background: #0e121a; 
  border: 1px solid rgba(255,255,255,.08); 
  padding: 12px; 
  border-radius: 8px; 
  margin: 8px 0; 
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
}

.command-example .description { 
  color: #9aa4b2; 
  margin-top: 8px; 
}

/* Responsive */
@media (max-width: 980px) {
  .hero-grid { 
    grid-template-columns: 1fr; 
  }
  .features, .gallery, .cmd-grid { 
    grid-template-columns: 1fr; 
  }
}