/* ===========================================================
   FINDTOOLS — Premium Neon Design System
   =========================================================== */

:root {
  --ft-primary: #00E5A0;
  --ft-accent: #7C5CFF;
  --ft-bg: #060709;
  --ft-surface: #0f1115;
  --ft-border: rgba(255,255,255,0.08);
  --ft-text: #eef1f5;
  --ft-muted: #8a93a3;
}

html.light {
  --ft-bg: #f6f7fb;
  --ft-surface: #ffffff;
  --ft-border: rgba(10,12,20,0.08);
  --ft-text: #0c1018;
  --ft-muted: #5a6472;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

/* Lenis smooth-scroll requirements (must override native + avoid body scroll container) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html.lenis { scroll-behavior: auto !important; }

body {
  background-color: var(--ft-bg);
  color: var(--ft-text);
  font-family: 'Manrope', system-ui, sans-serif;
  transition: background-color .4s ease, color .4s ease;
  overflow-x: clip;
}

h1,h2,h3,h4,h5,.font-display { font-family: 'Sora', sans-serif; letter-spacing: -0.02em; }

/* Background aurora glow */
.ft-aurora {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(600px circle at 15% 10%, rgba(0,229,160,0.14), transparent 45%),
    radial-gradient(700px circle at 85% 20%, rgba(124,92,255,0.16), transparent 45%),
    radial-gradient(600px circle at 50% 90%, rgba(0,229,160,0.08), transparent 50%);
}
html.light .ft-aurora {
  background:
    radial-gradient(600px circle at 15% 10%, rgba(0,229,160,0.10), transparent 45%),
    radial-gradient(700px circle at 85% 20%, rgba(124,92,255,0.10), transparent 45%);
}

/* Grain overlay */
.ft-grain::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Glass card */
.ft-glass {
  background: color-mix(in srgb, var(--ft-surface) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ft-border);
}

.ft-card {
  background: var(--ft-surface);
  border: 1px solid var(--ft-border);
  border-radius: 20px;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
  position: relative;
  overflow: hidden;
}
.ft-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--ft-primary) 55%, transparent);
  box-shadow: 0 20px 50px -20px rgba(0,229,160,0.35), 0 0 0 1px rgba(0,229,160,0.12);
}
.ft-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,0%), rgba(0,229,160,0.10), transparent 40%);
  opacity:0; transition: opacity .4s ease;
}
.ft-card:hover::after { opacity:1; }

/* Neon text + buttons */
.ft-neon { color: var(--ft-primary); text-shadow: 0 0 18px rgba(0,229,160,0.55); }
.ft-gradient-text {
  background: linear-gradient(100deg, var(--ft-primary), var(--ft-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ft-btn {
  display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
  padding: .8rem 1.6rem; border-radius: 999px; font-weight: 700; font-size:.95rem;
  cursor:pointer; border:1px solid transparent; transition: transform .25s ease, box-shadow .3s ease, background .3s ease;
  position:relative;
}
.ft-btn-primary {
  background: linear-gradient(100deg, var(--ft-primary), #38f0bd);
  color:#04120c; box-shadow: 0 0 0 rgba(0,229,160,0);
}
.ft-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(0,229,160,0.6); }
.ft-btn-ghost {
  background: transparent; color: var(--ft-text); border-color: var(--ft-border);
}
.ft-btn-ghost:hover { border-color: var(--ft-primary); color: var(--ft-primary); transform: translateY(-2px); }
.ft-btn-accent { background: linear-gradient(100deg, var(--ft-accent), #9d84ff); color:#fff; }
.ft-btn-accent:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(124,92,255,0.6); }

/* Chip / badge */
.ft-chip {
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--ft-border); color: var(--ft-muted); background: color-mix(in srgb, var(--ft-surface) 60%, transparent);
}

/* Inputs */
.ft-input {
  width:100%; padding:.8rem 1rem; border-radius:12px; background: var(--ft-surface);
  border:1px solid var(--ft-border); color: var(--ft-text); transition: border-color .25s ease, box-shadow .25s ease;
}
.ft-input:focus { outline:none; border-color: var(--ft-primary); box-shadow: 0 0 0 3px rgba(0,229,160,0.15); }

/* Section reveal (GSAP target base state) */
.reveal { opacity: 0; transform: translateY(34px); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ft-primary) 40%, var(--ft-surface)); border-radius: 10px; }
::selection { background: var(--ft-primary); color: #04120c; }

/* Marquee */
.ft-marquee { display:flex; gap:3rem; animation: ft-scroll 28s linear infinite; white-space:nowrap; }
@keyframes ft-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ===========================================================
   ULTIMATE LOADER — 5 animation styles
   =========================================================== */
#ft-loader {
  position: fixed; inset: 0; z-index: 9999; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:1.4rem; transition: opacity .6s ease, visibility .6s ease;
  animation: ft-loader-autohide 0.6s ease 1.3s forwards;
}
@keyframes ft-loader-autohide { to { opacity: 0; visibility: hidden; } }
#ft-loader.hidden-loader { opacity:0; visibility:hidden; animation: none; }
.ft-loader-logo { max-height:52px; margin-bottom:.4rem; filter: drop-shadow(0 0 14px rgba(0,229,160,.5)); }

/* orbit */
.ldr-orbit { width:64px; height:64px; position:relative; }
.ldr-orbit span { position:absolute; inset:0; border:2px solid transparent; border-radius:50%;
  border-top-color: var(--ft-primary); animation: ldr-spin 1s linear infinite; }
.ldr-orbit span:nth-child(2){ inset:9px; border-top-color: var(--ft-accent); animation-duration:1.4s; animation-direction:reverse; }
.ldr-orbit span:nth-child(3){ inset:18px; border-top-color:#fff; animation-duration:1.8s; }
@keyframes ldr-spin { to { transform: rotate(360deg); } }

/* pulse */
.ldr-pulse { width:60px; height:60px; border-radius:50%; background: var(--ft-primary);
  box-shadow:0 0 30px var(--ft-primary); animation: ldr-pulse 1s ease-in-out infinite; }
@keyframes ldr-pulse { 0%,100%{ transform:scale(.6); opacity:.5 } 50%{ transform:scale(1); opacity:1 } }

/* bars */
.ldr-bars { display:flex; gap:7px; align-items:flex-end; height:52px; }
.ldr-bars i { width:8px; background: linear-gradient(var(--ft-primary),var(--ft-accent)); border-radius:4px; animation: ldr-bars 1s ease-in-out infinite; }
.ldr-bars i:nth-child(2){ animation-delay:.1s } .ldr-bars i:nth-child(3){ animation-delay:.2s }
.ldr-bars i:nth-child(4){ animation-delay:.3s } .ldr-bars i:nth-child(5){ animation-delay:.4s }
@keyframes ldr-bars { 0%,100%{ height:14px } 50%{ height:52px } }

/* dots */
.ldr-dots { display:flex; gap:12px; }
.ldr-dots i { width:16px; height:16px; border-radius:50%; background: var(--ft-primary); box-shadow:0 0 14px var(--ft-primary); animation: ldr-dots .9s ease-in-out infinite; }
.ldr-dots i:nth-child(2){ animation-delay:.15s; background:var(--ft-accent); box-shadow:0 0 14px var(--ft-accent); }
.ldr-dots i:nth-child(3){ animation-delay:.3s }
@keyframes ldr-dots { 0%,100%{ transform:translateY(0); opacity:.4 } 50%{ transform:translateY(-16px); opacity:1 } }

/* ripple */
.ldr-ripple { position:relative; width:70px; height:70px; }
.ldr-ripple span { position:absolute; inset:0; border:3px solid var(--ft-primary); border-radius:50%; animation: ldr-ripple 1.4s cubic-bezier(0,.2,.8,1) infinite; }
.ldr-ripple span:nth-child(2){ animation-delay:.5s }
@keyframes ldr-ripple { 0%{ transform:scale(.1); opacity:1 } 100%{ transform:scale(1); opacity:0 } }

/* PWA install button */
#ft-pwa-install { position:fixed; bottom:22px; right:22px; z-index:9000; display:none; }

/* Admin sidebar link */
.admin-link { display:flex; align-items:center; gap:.75rem; padding:.65rem .9rem; border-radius:12px; color:var(--ft-muted); font-weight:600; font-size:.9rem; transition: all .2s ease; }
.admin-link:hover { background: color-mix(in srgb, var(--ft-primary) 12%, transparent); color: var(--ft-text); }
.admin-link.active { background: color-mix(in srgb, var(--ft-primary) 16%, transparent); color: var(--ft-primary); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  #ft-loader { opacity:0 !important; visibility:hidden !important; display:none !important; }
}

/* ===== Homepage hero enhancements ===== */
.ft-hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
}
html.light .ft-hero-grid {
  background-image:
    linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px);
}
.ft-hero-orb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 0; pointer-events: none;
  animation: ftOrb 14s ease-in-out infinite;
}
.ft-hero-orb-1 { width: 380px; height: 380px; background: var(--ft-primary); top: -80px; left: -60px; }
.ft-hero-orb-2 { width: 320px; height: 320px; background: var(--ft-accent); bottom: -60px; right: 4%; animation-delay: -6s; }
@keyframes ftOrb { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-24px) scale(1.12); } }
.ft-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ft-primary); display: inline-block; box-shadow: 0 0 0 0 var(--ft-primary); animation: ftPulse 1.8s infinite; }
@keyframes ftPulse { 0% { box-shadow: 0 0 0 0 rgba(0,229,160,.6); } 70% { box-shadow: 0 0 0 8px rgba(0,229,160,0); } 100% { box-shadow: 0 0 0 0 rgba(0,229,160,0); } }
.ft-float { animation: ftFloat 5s ease-in-out infinite; }
.ft-float-slow { animation: ftFloat 7s ease-in-out infinite; }
@keyframes ftFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ===== Rich-text block rendering ===== */
.ft-richtext h2 { font-size: 1.6rem; font-weight: 800; margin: 1rem 0 .6rem; font-family: 'Sora','Manrope',sans-serif; }
.ft-richtext h3 { font-size: 1.25rem; font-weight: 700; margin: .9rem 0 .5rem; }
.ft-richtext p { margin: .6rem 0; line-height: 1.75; }
.ft-richtext ul { list-style: disc; padding-left: 1.4rem; margin: .6rem 0; }
.ft-richtext ol { list-style: decimal; padding-left: 1.4rem; margin: .6rem 0; }
.ft-richtext a { color: var(--ft-primary); text-decoration: underline; }
.ft-richtext strong { font-weight: 700; }