/* Centralized common styles for Rexmark site */
@import url('https://unpkg.com/aos@2.3.1/dist/aos.css');

:root {
  --bg: #0a0a0a;
  --muted: #e2e8f0;
  --accent: #facc15; /* primary yellow */
  --accent-2: #ec4899; /* supporting */
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--bg);
  color: var(--muted);
  -webkit-font-smoothing: antialiased;
}

.hero-bg {
  background-color: var(--bg);
  background-image: radial-gradient(circle at top right, rgba(139,92,246,0.12), transparent 40%), radial-gradient(circle at bottom left, rgba(236,72,153,0.08), transparent 40%);
}

.gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-glow { position: relative; }
.section-glow::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 80%; height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, rgba(139,92,246,0) 60%);
  z-index: -1; pointer-events: none;
}

.card-hover { transition: transform .35s cubic-bezier(.4,2,.3,1), box-shadow .35s, background .35s; }
.card-hover:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 20px 30px rgba(139,92,246,0.12), 0 10px 10px rgba(236,72,153,0.06); }

.nav-link { position: relative; transition: color .25s, letter-spacing .25s; }
.nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 50%; transform: translateX(-50%); background-color: var(--accent-2); transition: width .28s ease; }
.nav-link:hover::after { width: 100%; }

.btn-animate { transition: background .28s, color .28s, transform .28s; }
.btn-animate:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.35); }

/* simple fade-in page animation */
body { opacity: 0; animation: rex-fadeIn 1s ease-in forwards; }
@keyframes rex-fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.fade-in { opacity: 0; animation: rex-fadeInSection .9s ease-in forwards; }
@keyframes rex-fadeInSection { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* mobile menu helper state (kept in CSS so pages can toggle class) */
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.2,.8,.2,1); }
#mobile-menu.menu-open { max-height: 420px; }

.glass-card { backdrop-filter: blur(12px) saturate(180%); background: rgba(30,41,59,0.6); border: 1px solid rgba(148,163,184,0.12); }

/* small utility */
.sticky-cta { position: sticky; bottom: 1rem; }