/* ==========================================================================
   Hassainar Alanjery — Performance Marketer
   Custom styles that extend Tailwind CSS (loaded via CDN in each page)
   ========================================================================== */

:root {
  --color-navy: #070c1c;
  --color-navy-light: #0f1830;
  --color-navy-card: #111b36;
  --color-amber: #f6b93b;
  --color-amber-dark: #d99a1f;
  --color-teal: #22d3ee;
  --color-text-muted: #9aa4c4;
}

* {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-navy);
  color: #e7ebfa;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Poppins', sans-serif;
}

/* Gradient text */
.text-gradient {
  background: linear-gradient(90deg, #f6b93b 0%, #f9d976 45%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section background variants */
.bg-navy { background-color: var(--color-navy); }
.bg-navy-light { background-color: var(--color-navy-light); }
.bg-navy-card { background-color: var(--color-navy-card); }

.grid-pattern {
  background-image:
    linear-gradient(rgba(246, 185, 59, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 185, 59, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Glow blobs */
.glow-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

/* Navbar */
#site-header {
  backdrop-filter: blur(14px);
  background-color: rgba(7, 12, 28, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-link {
  position: relative;
  color: var(--color-text-muted);
  transition: color .25s ease;
}
.nav-link:hover, .nav-link.active {
  color: #fff;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-amber), var(--color-teal));
  transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(90deg, var(--color-amber), #f9d976);
  color: #14100a;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 30px -10px rgba(246, 185, 59, 0.6);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -8px rgba(246, 185, 59, 0.75);
}

.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  transition: all .25s ease;
}
.btn-outline:hover {
  border-color: var(--color-teal);
  background-color: rgba(34, 211, 238, 0.08);
}

/* Cards */
.card {
  background-color: var(--color-navy-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(246, 185, 59, 0.4);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6);
}

/* Stat numbers */
.stat-number {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

/* Mobile menu */
#mobile-menu {
  transition: max-height .35s ease, opacity .3s ease;
  overflow: hidden;
}
#mobile-menu.closed {
  max-height: 0;
  opacity: 0;
}
#mobile-menu.open {
  max-height: 500px;
  opacity: 1;
}

/* Timeline */
.timeline-item {
  position: relative;
  padding-left: 2rem;
  border-left: 2px solid rgba(246, 185, 59, 0.35);
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--color-amber), var(--color-teal));
}

/* Form elements */
.form-input {
  background-color: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  transition: border-color .2s ease, background-color .2s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-amber);
  background-color: rgba(255,255,255,0.07);
}
.form-input::placeholder {
  color: #6b7699;
}

/* Marquee for clients / trust logos */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-navy); }
::-webkit-scrollbar-thumb { background: #2a3557; border-radius: 10px; }

/* Utility fade-in */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Back to top */
#back-to-top {
  transition: opacity .3s ease, transform .3s ease;
}

/* WhatsApp float button */
#whatsapp-float {
  box-shadow: 0 10px 25px -8px rgba(37, 211, 102, 0.7);
}

/* ==========================================================================
   Blog article typography (added by CMS conversion — additive only,
   does not modify any original site styles above)
   ========================================================================== */
article.prose h2 {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
article.prose h3 {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
article.prose p { margin-bottom: 1.25rem; }
article.prose ul, article.prose ol { margin: 1rem 0 1.25rem 1.5rem; }
article.prose ul { list-style: disc; }
article.prose ol { list-style: decimal; }
article.prose li { margin-bottom: 0.5rem; }
article.prose a { color: var(--color-amber); text-decoration: underline; }
article.prose img { border-radius: 1rem; margin: 1.5rem 0; }
article.prose blockquote {
  border-left: 3px solid var(--color-amber);
  padding-left: 1rem;
  color: #9aa4c4;
  font-style: italic;
  margin: 1.5rem 0;
}
article.prose strong { color: #fff; }