/* styles.css - Custom styles for DMO Game Protect site */

body {
  background-color: #071018; /* deep dark background */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #e6eef6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Navbar logo sizing */
.navbar-brand img {
  height: 80px; /* smaller in navbar */
  transition: transform .15s ease-in-out;
}
.navbar-brand img:hover { transform: scale(1.03); }

/* Hero header */
.hero {
  background: radial-gradient(circle at top center, rgba(18, 32, 48, 1) 0%, rgba(7, 16, 24, 1) 80%);
  padding: 80px 0;
  color: #e6eef6;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(124, 227, 170, 0.15) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-wrap { position: relative; z-index: 1; }
.hero .logo-hero {
  max-height: 420px;
  display: block;
  margin: 0 auto;
  width: auto;
  filter: drop-shadow(0 0 30px rgba(124, 227, 170, 0.2));
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.hero h1 { font-weight: 800; font-size: 3.5rem; margin-top: 20px; letter-spacing: -0.02em; }
.hero p.lead { color: #c9d6e0; font-size: 1.25rem; max-width: 800px; margin: 20px auto 0; line-height: 1.6; }

/* Custom Button Styling */
.btn-discord {
  background-color: #5865F2;
  color: white;
  border: none;
  padding: 12px 30px;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(88, 101, 242, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-discord:hover {
  background-color: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(88, 101, 242, 0.5);
  color: white;
}

/* Gradient Text */
.text-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

h3 s {
  color: #888;
  text-decoration: line-through;
}

/* Matrix Text Effect */
.matrix-text {
  font-family: 'Courier New', monospace;
  color: #00ff00;
  text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
  animation: matrix-flicker 2s infinite alternate;
}

@keyframes matrix-flicker {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* Section Titles */
h2 {
  font-weight: 700;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}
h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: #7ce3aa;
  margin-top: 10px;
  border-radius: 2px;
}

/* Video Section */
.ratio iframe {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Contact Form */
.form-control {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e6eef6 !important;
  border-radius: 8px;
  padding: 12px 15px;
}
.form-control:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: #7ce3aa !important;
  box-shadow: 0 0 0 0.25rem rgba(124, 227, 170, 0.25);
}
.form-label {
  font-weight: 600;
  color: #d7e6ee;
  margin-bottom: 8px;
}

/* Small header for pages without hero */
.page-header-small {
  background: linear-gradient(90deg, rgba(8, 14, 22, 0.95), rgba(12, 18, 26, 0.95));
  padding: 18px 0;
}

/* Footer adjustments */
/* Footer adjustments */
footer.footer { border-top: 1px solid rgba(255,255,255,0.03); }
footer.footer a { color: #d7e2ea; text-decoration: none; }
footer.footer a:hover { color: #7ce3aa; text-decoration: none; }
footer.footer .footer-logo { height: 74px; }
footer.footer .social-link svg { transition: transform .12s ease-in-out, fill .15s ease-in-out; }
footer.footer .social-link:hover svg { transform: translateY(-3px); fill: #7ce3aa; }
footer.footer h6 { color: #9aa6b2; }

/* Navbar link contrast */
.navbar .nav-link { color: #d7e6ee !important; }
.navbar .nav-link.active, .navbar .nav-link:hover { color: #7ce3aa !important; }

/* Ensure mobile responsiveness */
@media (max-width: 768px) {
  .hero { padding: 36px 0; }
  .hero h1 { font-size: 1.8rem; }
  .navbar-brand img { height: 64px; }
  .hero .logo-hero { max-height: 330px; }
}

/* Feature list grid */
.features-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; padding: 0; margin: 0; }
.features-list li { background: rgba(255,255,255,0.02); padding: 12px 16px; border-radius: 8px; display:flex; align-items:flex-start; gap:8px; }
/* removed the checkmark pseudo-element to keep a clean look */

/* Card styling */
.card { 
  background: rgba(255,255,255,0.03); 
  border: 1px solid rgba(255,255,255,0.05); 
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
  color: #e6eef6; 
  backdrop-filter: blur(10px);
  border-radius: 16px;
}
.card p { color: #b0c4d6; line-height: 1.6; }
.feature-subtitle { 
  font-weight: 700; 
  color: #ffffff; 
  text-transform: none; 
  font-size: 1.1rem; 
  margin-bottom: 12px !important;
  display: flex;
  align-items: center;
}
/* Icon in feature subtitle */
.feature-icon { 
  color: #7ce3aa; 
  font-size: 1.2rem; 
  background: rgba(124, 227, 170, 0.1);
  padding: 8px;
  border-radius: 8px;
  margin-right: 12px !important;
}
.features-grid { margin: 0 -15px; }
.features-grid .col-md-6, .features-grid .col-lg-4 { padding-left: 15px; padding-right: 15px; }

/* Responsive single column for features on small screens */
@media (max-width: 600px) {
  .features-grid { display:block; }
  .features-grid .col-md-6 { width: 100%; }
  .features-subtitle { font-size: 0.95rem; }
}

/* Feature card animation */
.feature-card { 
  opacity: 0; 
  transform: translateY(20px); 
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
}
.feature-card.in-view { opacity: 1; transform: translateY(0); }
.feature-card:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 20px 40px rgba(0,0,0,0.4); 
  border-color: rgba(124, 227, 170, 0.3);
  background: rgba(255,255,255,0.05);
}
.feature-card { will-change: transform, opacity; }
.feature-card[style] { transition-delay: var(--delay,0ms); }
.card .card-header { background: rgba(255,255,255,0.025); border-bottom: 1px solid rgba(0,0,0,0.08); }
.card .card-body ul { padding-left: 1rem; }

/* Forms */
.form-control { background: rgba(255,255,255,0.02); border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); color: #e6eef6; }
.form-control:focus { box-shadow: 0 0 0 3px rgba(124,227,170,0.12); border-color: rgba(124,227,170,0.4); }

/* Footers small text */
.footer .small.text-muted { color: #b7c8d0 !important; }

/* Back to top button */
#back-to-top {
  display: none;
  width: 40px; height: 40px; border-radius: 50%;
  position: fixed; left: 20px; bottom: 24px; z-index: 1060;
  border: none; background: rgba(124,227,170,0.95); color: #041219; font-weight: 700;
  cursor: pointer; box-shadow: 0 6px 18px rgba(2,3,6,0.5);
}
#back-to-top:focus { outline: none; box-shadow: 0 0 0 4px rgba(124,227,170,0.12); }

/* WhatsApp Floating Icon */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: #25d366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: all 0.3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}