*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
body{background:#0f172a;color:#e2e8f0}
.bg-gradient{position:fixed;width:100%;height:100%;
background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.15),transparent 50%),
radial-gradient(circle at 80% 80%,rgba(99,102,241,.15),transparent 50%);z-index:-1}
.navbar{max-width:1100px;margin:auto;padding:30px 20px;display:flex;justify-content:space-between;align-items:center}
.logo{font-weight:800;font-size:34px;background:linear-gradient(90deg,#3b82f6,#6366f1);
-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.container{max-width:1100px;margin:auto;padding:40px 20px}
.hero{text-align:center;margin-bottom:80px}
.hero h1{font-size:40px;margin-bottom:20px;color:white}
.hero p{max-width:700px;margin:auto;color:#94a3b8;line-height:1.6}
.hero-buttons{margin-top:30px;display:flex;justify-content:center;gap:15px;flex-wrap:wrap}
.btn-primary{background:linear-gradient(135deg,#6366f1,#3b82f6);padding:12px 22px;border-radius:8px;text-decoration:none;color:white;border:none;cursor:pointer;transition:.3s}
.btn-primary:hover{transform:translateY(-2px)}
.btn-secondary{border:1px solid #334155;padding:12px 22px;border-radius:8px;text-decoration:none;color:#cbd5f5}
.stats-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
border-radius:12px;padding:25px;display:flex;justify-content:space-around;margin-bottom:80px;flex-wrap:wrap;text-align:center}
.skills h2,.servers h2{text-align:center;margin-bottom:40px;color:white}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:80px}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:20px}
.card:hover{transform:translateY(-5px);transition:.3s}
.contact-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
border-radius:12px;padding:30px;text-align:center}
.contact-form{display:flex;flex-direction:column;gap:15px;margin-top:20px;max-width:500px;margin-left:auto;margin-right:auto}
.contact-form input,.contact-form textarea{
padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.05);color:white}
.form-message{margin-top:10px;font-size:14px}
footer{text-align:center;padding:40px;color:#64748b}


/* ===== MOBILE STATS IMAGE LAYOUT ===== */
@media (max-width: 768px) {

  .stats-card {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    text-align: center !important;
  }

  .stats-card > div:nth-child(3) {
    grid-column: span 2 !important;
  }

  .card-grid {
    grid-template-columns: 1fr !important;
  }

}


.faq { margin-bottom: 80px; }
.faq h2 { text-align: center; margin-bottom: 40px; }
.faq-item { margin-bottom: 15px; }
.faq-question {
  width: 100%;
  text-align: left;
  padding: 15px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: white;
  cursor: pointer;
}
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
  background: rgba(255,255,255,.03);
  padding: 0 15px;
}


/* Direct Contact Buttons */
.contact-subtext {
  margin-bottom: 20px;
  color: #94a3b8;
}

.contact-direct {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}


/* ===== MOBILE CONTACT BUTTONS SIDE-BY-SIDE ===== */
@media (max-width: 768px) {

  .contact-direct {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
  }

  .contact-direct a {
    flex: 1 !important;
    text-align: center;
  }

}