/* SF Tools v1.0.0 */
/* ═══════════════════════════════════════════
   SF Tools — Base / Reset / Typography
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=DM+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500;600&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .3s, color .3s;
}

/* BG layers */
.bg-grid {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 52px 52px;
  transition: background-image .3s;
}
.bg-glow {
  position:fixed; top:-220px; left:50%; transform:translateX(-50%);
  width:1100px; height:700px; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at center, rgba(77,166,255,.06) 0%, transparent 65%);
}
[data-theme="light"] .bg-glow { background:radial-gradient(ellipse at center, rgba(77,166,255,.08) 0%, transparent 65%); }

/* Layout */
.page-wrap { position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding:48px 28px 80px; }
.container  { max-width:var(--container); margin:0 auto; padding:0 28px; }

/* Animations */
@keyframes fadeUp   { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes slideIn  { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse-dot{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.6)} }
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes mq       { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes pfloat   { 0%{transform:translateY(110%)scale(0);opacity:0} 10%{opacity:.35} 90%{opacity:.08} 100%{transform:translateY(-120vh)scale(1.2);opacity:0} }

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.vis { opacity:1; transform:translateY(0); }

/* Utility */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }