/* ══════════════════════════════════════════
   SAGA Manager — CSS
   Hexbit Development SRL
══════════════════════════════════════════ */

/* Noise overlay */
.noise-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* Grid background */
.bg-grid {
  background-image:
    linear-gradient(rgba(20,184,166,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,184,166,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Orbs */
.orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.orb-1 { width: 500px; height: 500px; background: #0d9488; opacity: 0.12; top: -100px; left: -150px; }
.orb-2 { width: 300px; height: 300px; background: #0d9488; opacity: 0.08; top: 300px; right: -50px; }
.orb-3 { width: 200px; height: 200px; background: #1e40af; opacity: 0.07; bottom: 100px; left: 40%; }
.orb-4 { width: 250px; height: 250px; background: #0d9488; opacity: 0.07; top: 0; right: 0; }
.orb-5 { width: 400px; height: 400px; background: #0d9488; opacity: 0.08; bottom: -100px; left: -100px; }
.orb-6 { width: 300px; height: 300px; background: #0d9488; opacity: 0.09; top: -50px; right: 20%; }
.orb-7 { width: 350px; height: 350px; background: #0d9488; opacity: 0.08; bottom: 0; right: 0; }

/* Shadow glow */
.shadow-glow { box-shadow: 0 0 20px rgba(20,184,166,0.4); }

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, #14b8a6 0%, #5eead4 50%, #a7f3d0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Navbar scroll state */
.nav-scrolled {
  background: rgba(3,7,18,0.95);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 30px rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(30,41,59,0.5);
}

/* Nav links */
.nav-link { color: #94a3b8; font-size: 0.875rem; transition: color 0.2s; }
.nav-link:hover { color: #5eead4; }
.mobile-link { display: block; padding: 0.625rem 0; color: #94a3b8; font-size: 0.875rem; border-bottom: 1px solid rgba(30,41,59,0.5); }
.mobile-link:hover { color: #5eead4; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.25rem; border-radius: 0.75rem;
  background: #0d9488; color: white; font-weight: 600; font-size: 0.875rem;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 0 20px rgba(20,184,166,0.25);
}
.btn-primary:hover { background: #14b8a6; box-shadow: 0 0 30px rgba(20,184,166,0.45); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.25rem; border-radius: 0.75rem;
  border: 1px solid #334155; color: #94a3b8; font-weight: 600; font-size: 0.875rem;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: #0d9488; color: white; }

/* Glass card */
.glass-card {
  background: rgba(6,15,26,0.75);
  border: 1px solid rgba(20,184,166,0.1);
  backdrop-filter: blur(12px);
  transition: border-color 0.3s;
}
.glass-card:hover { border-color: rgba(20,184,166,0.22); }

/* Section layout */
.section-header { text-align: center; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 1rem; border-radius: 9999px;
  background: rgba(4,47,46,0.6); border: 1px solid rgba(20,184,166,0.25);
  color: #5eead4; font-size: 0.75rem; font-weight: 500; margin-bottom: 1rem;
}
.section-title { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); color: white; line-height: 1.1; margin-bottom: 1rem; }
.section-sub { color: #64748b; max-width: 36rem; margin: 0 auto; font-size: 1rem; }

/* Step card */
.step-card { text-align: center; }
.step-num {
  width: 4rem; height: 4rem; border-radius: 50%;
  background: rgba(4,47,46,0.7); border: 2px solid #0f766e;
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
  font-family: 'DM Serif Display', serif; font-size: 1.75rem; color: #5eead4;
  box-shadow: 0 0 20px rgba(20,184,166,0.12);
}

/* Verify tabs */
.verify-tab {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.5rem 0.75rem; border-radius: 0.625rem;
  font-size: 0.8125rem; font-weight: 500; color: #64748b;
  transition: all 0.2s; cursor: pointer; background: transparent; border: none;
}
.verify-tab.active { background: #0d9488; color: white; box-shadow: 0 0 15px rgba(20,184,166,0.3); }
.verify-tab:not(.active):hover { color: #94a3b8; background: rgba(255,255,255,0.04); }

/* Verify field label */
.field-label { display: block; font-size: 0.875rem; font-weight: 500; color: #94a3b8; margin-bottom: 0.5rem; }

/* Inputs */
.saga-input {
  background: rgba(6,15,26,0.8);
  border: 1px solid rgba(20,184,166,0.18);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem; color: #e2e8f0;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.saga-input:focus { outline: none; border-color: rgba(20,184,166,0.55); box-shadow: 0 0 0 3px rgba(20,184,166,0.08); }
.saga-input::placeholder { color: rgba(100,116,139,0.6); }

/* Feature icon colors */
.icon-import  { color: #2dd4bf; } .icon-export  { color: #60a5fa; }
.icon-sync    { color: #a78bfa; } .icon-security{ color: #34d399; }
.icon-update  { color: #fbbf24; } .icon-support { color: #fb923c; }

/* FAQ accordion */
.faq-item { }
.faq-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.125rem 1.25rem; text-align: left; background: none; border: none; cursor: pointer;
  color: #cbd5e1; font-size: 0.9375rem; font-weight: 500;
  transition: color 0.2s;
}
.faq-btn:hover { color: white; }
.faq-chevron { width: 1.125rem; height: 1.125rem; color: #0d9488; flex-shrink: 0; transition: transform 0.25s; }
.faq-body { display: none; padding: 0 1.25rem 1.25rem; color: #64748b; font-size: 0.875rem; line-height: 1.7; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-item.open .faq-body { display: block; }
.faq-item.open .faq-btn { color: white; }

/* Status badges */
.badge-ok      { background:rgba(16,185,129,0.12); color:#34d399; border:1px solid rgba(16,185,129,0.3); }
.badge-expired { background:rgba(245,158,11,0.12); color:#fbbf24; border:1px solid rgba(245,158,11,0.3); }
.badge-invalid { background:rgba(239,68,68,0.12);  color:#f87171; border:1px solid rgba(239,68,68,0.3); }
.badge-hint    { background:rgba(99,102,241,0.12); color:#a5b4fc; border:1px solid rgba(99,102,241,0.3); }

/* Pricing popular ring */
.pricing-popular {
  border-color: rgba(20,184,166,0.45) !important;
  box-shadow: 0 0 40px rgba(20,184,166,0.12);
  transform: scale(1.03);
}

/* Fade-up animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { opacity: 0; }
.fade-up.visible { animation: fadeUp 0.55s ease forwards; }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 0.75s linear infinite; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Admin panel base */
.admin-sidebar a.active { background: rgba(20,184,166,0.15); color: #5eead4; border-left: 2px solid #14b8a6; }

/* Toast */
#toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  padding: 0.875rem 1.25rem; border-radius: 0.875rem;
  font-size: 0.875rem; font-weight: 500;
  transition: all 0.3s;
  backdrop-filter: blur(16px);
}
#toast.toast-success { background: rgba(16,185,129,0.2); border: 1px solid rgba(16,185,129,0.4); color: #34d399; }
#toast.toast-error   { background: rgba(239,68,68,0.2);  border: 1px solid rgba(239,68,68,0.4);  color: #f87171; }
#toast.toast-info    { background: rgba(99,102,241,0.2); border: 1px solid rgba(99,102,241,0.4); color: #a5b4fc; }
#toast.hidden { display: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #060f1a; }
::-webkit-scrollbar-thumb { background: #0f766e; border-radius: 3px; }