@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================
   DESIGN TOKENS — SAFE TO EDIT
   ============================================ */
:root {
  --bg-dark:    #06152e;
  --bg-dark2:   #05112a;
  --bg-light:   #f4f7fb;
  --text-dark:  #0b1f3a;
  --text-body:  #566275;
  --text-muted: #9fb0c6;
  --cyan:       #19bee8;
  --blue:       #1e40e0;
  --green:      #6fe6a0;
  --card-border: #e7ecf3;
  --grad-main: linear-gradient(120deg, #1e40e0 0%, #19bee8 54%, #6fe6a0 100%);
  --grad-text: linear-gradient(120deg, #3b7bff, #19bee8 55%, #6fe6a0);
  --font-main: 'Manrope', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* ============================================
   GLOBAL TYPOGRAPHY — SAFE TO EDIT
   ============================================ */
body, p, .t-text, .t-descr {
  font-family: var(--font-main) !important;
  font-size: 16px !important;
  line-height: 1.6;
  color: var(--text-body);
}

h1, h2, h3, h4, .t-title {
  font-family: var(--font-main) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}

/* ============================================
   BUTTON ANIMATIONS — SAFE TO EDIT VALUES
   ============================================ */
.ats-btn-grad:hover {
  transform: translateY(-3px);
  box-shadow: rgba(25,190,232,0.9) 0 18px 48px -12px;
}

.ats-btn-ghost:hover {
  transform: translateY(-3px);
}

.ats-btn-grad1:hover {
  transform: translateY(-3px);
  box-shadow: rgba(25,190,232,0.9) 0 18px 48px -12px;
}

/* ============================================
   FONTS — DO NOT EDIT
   ============================================ */
.ats-bar__num,
.ats-bar__num * {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
}

.ats-label__text,
.ats-card__num,
.ats-tag,
.ats-btn-grey {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
}

/* ============================================
   CARDS — DO NOT EDIT
   ============================================ */
.ats-card {
  overflow: hidden !important;
  border-radius: 20px !important;
  border: 1px solid #e7ecf3 !important;
  background: #ffffff !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.ats-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, #1e40e0, #19bee8 55%, #6fe6a0) !important;
  z-index: 99 !important;
  display: block !important;
  pointer-events: none !important;
}

.ats-card:hover {
  box-shadow: 0 16px 48px -12px rgba(11,31,58,0.12) !important;
  transform: translateY(-4px) !important;
}

/* ============================================
   CERTIFICATES — DO NOT EDIT
   ============================================ */
.ats-cert {
  overflow: hidden !important;
  border-radius: 20px !important;
  border: 1px solid #ffffff !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  transform: translate(0, 0) !important;
}

.ats-cert:hover {
  box-shadow: 0 0px 48px -12px rgba(11,31,58,0.12) !important;
  transform: translateY(-4px) !important;
}

/* ============================================
   MARQUEE ANIMATION — DO NOT EDIT
   ============================================ */
@keyframes ats-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}