/* MG Bot — design system layer (sits on top of Tailwind CDN) */

:root {
  --bg:        #0d1117;
  --bg-soft:   #10151c;
  --card:      #161b22;
  --card-2:    #1a2029;
  --border:    #30363d;
  --border-2:  #3d444d;
  --text:      #e6edf3;
  --muted:     #8b949e;
  --muted-2:   #6e7681;
  --blue:      #58a6ff;
  --blue-btn:  #1f6feb;
  --violet:    #a371f7;
  --cyan:      #39d0d8;
  --green:     #3fb950;
  --grad: linear-gradient(120deg, #58a6ff 0%, #a371f7 50%, #39d0d8 100%);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  /* fixed ambient glow that doesn't scroll */
  background-image:
    radial-gradient(900px 500px at 78% -8%, rgba(88,166,255,.10), transparent 60%),
    radial-gradient(800px 520px at 10% 4%, rgba(163,113,247,.08), transparent 60%);
  background-attachment: fixed;
}

/* ---- Typography helpers ---- */
.text-gradient {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Buttons ---- */
.btn-primary {
  position: relative;
  background: var(--grad);
  background-size: 160% 160%;
  color: #fff;
  border: none;
  transition: transform .18s ease, box-shadow .25s ease, background-position .5s ease;
  box-shadow: 0 6px 20px -6px rgba(88,166,255,.55);
}
.btn-primary:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(124,131,247,.6);
}
.btn-ghost {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  transition: border-color .2s ease, color .2s ease, transform .18s ease, background .2s ease;
}
.btn-ghost:hover {
  border-color: var(--blue);
  background: rgba(88,166,255,.06);
  transform: translateY(-2px);
}

/* ---- Cards ---- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(88,166,255,.5);
  box-shadow: 0 18px 40px -22px rgba(88,166,255,.45);
  background: var(--card-2);
}
/* gradient ring around featured cards */
.card-glow {
  position: relative;
}
.card-glow::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .9;
  pointer-events: none;
}

/* icon chip */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(88,166,255,.16), rgba(163,113,247,.16));
  border: 1px solid rgba(88,166,255,.22);
}

/* ---- Navbar ---- */
.nav-glass {
  background: rgba(13,17,23,.72);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nav-glass.nav-scrolled {
  background: rgba(13,17,23,.9);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 30px -18px rgba(0,0,0,.8);
}
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px; background: var(--grad);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--text); }

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* small staggered delays for grids */
.reveal[data-delay="1"] { transition-delay: .06s; }
.reveal[data-delay="2"] { transition-delay: .12s; }
.reveal[data-delay="3"] { transition-delay: .18s; }
.reveal[data-delay="4"] { transition-delay: .24s; }
.reveal[data-delay="5"] { transition-delay: .30s; }

/* ---- Hero mesh / grid backdrop ---- */
.hero-grid {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.hero-grid::before {
  content: ""; position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right, rgba(48,54,61,.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(48,54,61,.35) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}

/* status dot pulse */
.dot-pulse { position: relative; }
.dot-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: var(--green); animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.floaty { animation: floaty 6s ease-in-out infinite; }

/* marquee for trusted strip */
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* custom scrollbar */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb { background: #21262d; border-radius: 9px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #30363d; }

/* details/accordion chevron */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .floaty, .dot-pulse::after { animation: none; }
  .btn-primary:hover, .btn-ghost:hover, .card-hover:hover { transform: none; }
}