/* =========================================
   CYBERHAVEN GLOBAL STYLES
========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #000000;
  color: #ffffff;
  overflow-x: hidden;
}

/* =========================================
   BACKGROUND EFFECTS
========================================= */

.hero-bg {
  background:
    radial-gradient(circle at top right,
      rgba(255, 215, 0, 0.12),
      transparent 30%),

    radial-gradient(circle at bottom left,
      rgba(255, 215, 0, 0.08),
      transparent 30%),

    #000000;
}

.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

  background-size: 50px 50px;
}

/* =========================================
   NAVBAR
========================================= */

nav {
  transition: all 0.3s ease;
}

nav a {
  transition: color 0.3s ease;
}

nav a:hover {
  color: #facc15;
}

/* =========================================
   LOGO
========================================= */

.logo {
  height: 60px;
  width: auto;
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

/* =========================================
   GLASS CARD DESIGN
========================================= */

.glass-card {
  background: rgba(255,255,255,0.04);

  backdrop-filter: blur(12px);

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 8px 40px rgba(0,0,0,0.45);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border 0.3s ease;
}

.glass-card:hover {

  transform: translateY(-6px);

  border: 1px solid rgba(250,204,21,0.3);

  box-shadow:
    0 0 30px rgba(250,204,21,0.15),
    0 8px 40px rgba(0,0,0,0.5);
}

/* =========================================
   BUTTONS
========================================= */

.btn-primary {
  background: #facc15;
  color: #000000;

  padding: 16px 32px;

  border-radius: 16px;

  font-weight: bold;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.btn-primary:hover {

  background: #fde047;

  transform: translateY(-3px);

  box-shadow:
    0 0 25px rgba(250,204,21,0.35);
}

.btn-secondary {

  border: 1px solid rgba(250,204,21,0.4);

  padding: 16px 32px;

  border-radius: 16px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.btn-secondary:hover {

  background: #facc15;

  color: #000000;

  transform: translateY(-3px);
}

/* =========================================
   HEADINGS
========================================= */

.section-title {

  font-size: 3rem;

  font-weight: 800;

  color: #facc15;

  margin-bottom: 1.5rem;
}

/* =========================================
   TEXT
========================================= */

.text-muted {
  color: #9ca3af;
}

/* =========================================
   FLOATING PHONE BUTTON
========================================= */

.floating-btn {

  position: fixed;

  bottom: 25px;

  right: 25px;

  z-index: 9999;

  background: #facc15;

  color: #000;

  padding: 16px 24px;

  border-radius: 999px;

  font-weight: bold;

  text-decoration: none;

  box-shadow:
    0 0 25px rgba(250,204,21,0.35);

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.floating-btn:hover {

  background: #fde047;

  transform: translateY(-4px);
}

/* =========================================
   FLOATING ANIMATION
========================================= */

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {

  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* =========================================
   FORM INPUTS
========================================= */

input,
textarea {

  transition:
    border 0.3s ease,
    box-shadow 0.3s ease;
}

input:focus,
textarea:focus {

  border-color: #facc15 !important;

  box-shadow:
    0 0 15px rgba(250,204,21,0.2);

  outline: none;
}

/* =========================================
   FOOTER
========================================= */

footer {
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 768px) {

  .section-title {
    font-size: 2.2rem;
  }

  .logo {
    height: 48px;
  }

  h1 {
    font-size: 2.8rem !important;
  }

  h2 {
    font-size: 2rem !important;
  }

  p {
    font-size: 1rem !important;
  }

  .floating-btn {
    bottom: 15px;
    right: 15px;
    padding: 14px 18px;
  }
}

/* =========================================
   OPTIONAL RIGHT CLICK PROTECTION
========================================= */

img {
  user-select: none;
  -webkit-user-drag: none;
}