/* ─── BUTTONS ─── */
.btn-primary {
  padding: 0.85rem 2rem; background: var(--accent);
  color: #fff; border-radius: 8px; font-weight: 600;
  text-decoration: none; font-size: 0.95rem; transition: all 0.2s;
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(59, 130, 246, 0.5); }

.btn-outline {
  padding: 0.85rem 2rem; border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; font-weight: 600;
  text-decoration: none; font-size: 0.95rem; transition: all 0.2s;
  background: rgba(255, 255, 255, 0.03);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent2); transform: translateY(-2px); }

.btn-submit {
  padding: 0.9rem 2rem; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; font-weight: 700; font-size: 0.95rem;
  cursor: pointer; transition: all 0.2s; font-family: inherit;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
.btn-submit:hover { opacity: 0.85; transform: translateY(-1px); }

/* ─── BADGES ─── */
.badge-dot {
  width: 6px; height: 6px;
  background: var(--green); border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.badge-item {
  padding: 0.35rem 0.85rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 999px; font-size: 0.78rem;
  color: var(--accent2); font-weight: 500;
}

.badge-wip {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
.badge-live {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
}
.badge-academic {
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--muted);
}

/* ─── FORM ─── */
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row     { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group   { display: flex; flex-direction: column; gap: 0.35rem; }

.form-group label { font-size: 0.78rem; font-weight: 600; color: var(--muted); }

.form-group input,
.form-group textarea,
.form-group select {
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: 0.75rem 1rem;
  font-family: inherit; font-size: 0.9rem; outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--accent); }

.form-group textarea          { resize: vertical; min-height: 120px; }
.form-group select option     { background: var(--bg3); }

.form-success {
  display: none; padding: 1rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px; color: #4ade80;
  font-size: 0.9rem; text-align: center;
}

/* ─── WHATSAPP FLOAT ─── */
.wa-float {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 200;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.2s; text-decoration: none;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5); }
.wa-float svg   { width: 28px; height: 28px; fill: #fff; }

/* ─── ANIMATIONS ─── */
.fade-in         { opacity: 0; transform: translateY(20px); transition: opacity 0.55s, transform 0.55s; }
.fade-in.visible { opacity: 1; transform: translateY(0); }