/* ===== QMICS CERTIFICATIONS - Custom Styles ===== */

:root {
  --primary: #050d1a;
  --secondary: #0a1628;
  --card: #0d1f35;
  --gold: #f0a500;
  --gold-dark: #e8981d;
  --teal: #00b4d8;
  --cyan: #22d3ee;
  --border: rgba(255, 255, 255, 0.07);
}

* { scroll-behavior: smooth; box-sizing: border-box; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--primary); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* ---- Grid BG ---- */
.grid-bg {
  background-image:
    linear-gradient(rgba(240,165,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,165,0,0.04) 1px, transparent 1px);
  background-size: 55px 55px;
}

/* ---- Keyframes ---- */
@keyframes spinSlow    { to { transform: rotate(360deg); } }
@keyframes spinRev     { to { transform: rotate(-360deg); } }
@keyframes floatY      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes pulseGlow   { 0%,100%{box-shadow:0 0 22px rgba(240,165,0,.18)} 50%{box-shadow:0 0 48px rgba(240,165,0,.48)} }
@keyframes bounceSlow  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes shimmer     { 0%{left:-120%} 100%{left:160%} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn     { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
@keyframes drawLine    { from{stroke-dashoffset:300} to{stroke-dashoffset:0} }
@keyframes gradShift   { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes typewriter  { from{width:0} to{width:100%} }
@keyframes blink       { 50%{border-color:transparent} }

/* ---- Utility Animations ---- */
.anim-spin-slow    { animation: spinSlow 22s linear infinite; }
.anim-spin-rev     { animation: spinRev  16s linear infinite; }
.anim-float        { animation: floatY   6s ease-in-out infinite; }
.anim-pulse-glow   { animation: pulseGlow 3s ease-in-out infinite; }
.anim-bounce-slow  { animation: bounceSlow 2.2s ease-in-out infinite; }
.anim-fade-in-up   { animation: fadeInUp .8s ease both; }

/* ---- Nav ---- */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 0;
  width: 0; height: 2px;
  background: var(--gold);
  border-radius: 1px;
  transition: width .3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ---- Cert Cards ---- */
.cert-card {
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.25,.8,.25,1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.cert-card::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transform: skewX(-20deg);
}
.cert-card:hover::before { animation: shimmer .75s ease; }
.cert-card:hover { transform: translateY(-8px); }

/* ---- Ecosystem Diagram ---- */
.eco-center {
  animation: pulseGlow 3s ease-in-out infinite;
}
.eco-node { animation: floatY 5s ease-in-out infinite; }
.eco-node:nth-child(3)  { animation-delay: -1s; }
.eco-node:nth-child(4)  { animation-delay: -2s; }
.eco-node:nth-child(5)  { animation-delay: -0.5s; }
.eco-node:nth-child(6)  { animation-delay: -1.5s; }
.eco-node:nth-child(7)  { animation-delay: -0.8s; }

/* ---- Gradient Text ---- */
.text-gradient-gold {
  background: linear-gradient(135deg, #f0a500, #ffe066);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-duo {
  background: linear-gradient(135deg, var(--gold) 0%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradShift 4s ease infinite;
}

/* ---- SVG Lines (Ecosystem) ---- */
.eco-line { stroke-dasharray: 300; animation: drawLine 1.8s ease forwards; }

/* ---- Form Inputs ---- */
.form-input {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  width: 100%;
  transition: border-color .3s, box-shadow .3s, background .3s;
  font-family: inherit;
}
.form-input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(240,165,0,0.04);
  box-shadow: 0 0 0 3px rgba(240,165,0,0.12);
}
.form-input::placeholder { color: rgba(255,255,255,0.28); }

/* ---- Testimonial Card ---- */
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -12px; left: 18px;
  font-size: 110px;
  color: rgba(240,165,0,0.08);
  font-family: Georgia,serif;
  line-height: 1;
  pointer-events: none;
}

/* ---- Process Step Connector ---- */
.step-connector {
  position: absolute;
  top: 38px; left: calc(50% + 38px);
  width: calc(100% - 76px); height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  opacity: .2;
}

/* ---- Section Badge ---- */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  padding: 6px 16px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.badge-gold {
  background: rgba(240,165,0,0.10);
  border: 1px solid rgba(240,165,0,0.28);
  color: var(--gold);
}
.badge-teal {
  background: rgba(0,180,216,0.10);
  border: 1px solid rgba(0,180,216,0.28);
  color: var(--teal);
}

/* ---- Glow borders ---- */
.glow-border-gold { box-shadow: 0 0 0 1px rgba(240,165,0,.3), 0 8px 32px rgba(240,165,0,.12); }
.glow-border-teal { box-shadow: 0 0 0 1px rgba(0,180,216,.3), 0 8px 32px rgba(0,180,216,.12); }

/* ---- Hero floating badge ---- */
.hero-badge { animation: floatY 3s ease-in-out infinite; }

/* ---- CTA glow button ---- */
.btn-glow {
  position: relative;
  overflow: hidden;
}
.btn-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.18), transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}
.btn-glow:hover::after { opacity: 1; }

/* ---- Hero Background Slideshow ---- */
@keyframes bgSlide {
  0%   { opacity: 1; transform: scale(1.03); }
  28%  { opacity: 1; transform: scale(1.0);  }
  34%  { opacity: 0; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(1.05); }
}
.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: bgSlide 15s ease-in-out infinite;
}
.bg-slide:nth-child(1) { animation-delay: 0s; }
.bg-slide:nth-child(2) { animation-delay: 5s; }
.bg-slide:nth-child(3) { animation-delay: 10s; }
.bg-slide:nth-child(4) { animation-delay: 15s; }
.bg-slide:nth-child(5) { animation-delay: 20s; }
.bg-slide:nth-child(6) { animation-delay: 25s; }

/* ---- Divider line ---- */
.divider-gradient {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,165,0,.25), rgba(0,180,216,.25), transparent);
}

/* ---- Stats card ---- */
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.stat-card:hover::after { transform: scaleX(1); }

/* ---- FAQ Accordion ---- */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .3s ease;
}
.faq-content.open { max-height: 400px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .eco-node { display: none !important; }
}
@media (max-width: 768px) {
  .step-connector { display: none; }
}

/* ---- Particles canvas ---- */
#particles-js {
  position: absolute !important;
  inset: 0;
  pointer-events: none;
}
#particles-js canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ---- Page-transition overlay ---- */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--primary);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; }

/* ---- Swiper custom dots ---- */
.swiper-pagination-bullet {
  background: rgba(255,255,255,.25) !important;
  opacity: 1 !important;
}
.swiper-pagination-bullet-active {
  background: var(--gold) !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* ---- Active cert tab ---- */
.cert-tab.active {
  background: var(--gold);
  color: var(--primary);
}

/* ---- Back to top ---- */
#back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}