/* ===== Landing & Features Page Styles ===== */

/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');


/* ===== Base ===== */

body {
  font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  background: #051424;
  color: #fff;
}


/* ===== Hero ===== */

.hero-gradient {
  background: radial-gradient(
    ellipse 60% 50% at 50% 40%,
    rgba(255, 120, 40, 0.15) 0%,
    rgba(5, 20, 36, 0.4) 40%,
    rgba(5, 20, 36, 0.95) 85%
  );
}


/* ===== Cards ===== */

.card-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition:
    background 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    backdrop-filter 0.6s ease,
    -webkit-backdrop-filter 0.6s ease;
  will-change: transform;
}

.card-glass:hover {
  background: rgba(5, 20, 36, 0.6);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

.card-glass-dark {
  background: rgba(5, 20, 36, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

.card-dark {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


/* ===== Buttons ===== */

.btn-primary {
  background: rgba(255, 0, 0, 0.6);
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.1),
    0 22px 30px rgba(255, 0, 0, 0.37);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.btn-primary:hover {
  transform: scale(1.08);
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.1),
    0 30px 45px rgba(255, 0, 0, 0.5);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.btn-secondary:hover {
  transform: scale(1.06);
  background: rgba(255, 255, 255, 0.1);
}


/* ===== Badge ===== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.2);
  color: #f43f5e;
}


/* ===== Utilities ===== */

.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a1628, #0d1f3c);
  color: rgba(255, 255, 255, 0.12);
  font-size: 14px;
}


/* ===== Pulse Glow ===== */

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 0, 0, 0.3), 0 0 60px rgba(255, 0, 0, 0.1); }
  25%       { box-shadow: 0 0 38px rgba(255, 0, 0, 0.38), 0 0 75px rgba(255, 0, 0, 0.15); }
  50%       { box-shadow: 0 0 50px rgba(255, 0, 0, 0.5), 0 0 100px rgba(255, 0, 0, 0.2); }
  75%       { box-shadow: 0 0 38px rgba(255, 0, 0, 0.38), 0 0 75px rgba(255, 0, 0, 0.15); }
}

.animate-pulse-glow {
  animation: pulse-glow 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}