/* ═══════════════════════════════════════════════════════
   ShadowTools — design-system refinement layer
   Loaded AFTER style.min.css on every page.
   ═══════════════════════════════════════════════════════ */

/* ── Palette & foundations ─────────────────────────────── */
:root{
  --bg:#0b0e13;
  --bg-2:#0e1219;
  --panel:#131925;
  --panel-2:#1a2230;
  --panel-glass:rgba(19,25,37,.72);
  --border:#232c3d;
  --border-hi:rgba(79,140,255,.22);
  --text:#eef2f8;
  --muted:#94a0b5;
  --accent:#4f8cff;
  --accent-soft:#7c5cff;
  --accent-2:#39d98a;
  --warn:#ffb547;
  --err:#ff6b6b;
  --grad:linear-gradient(135deg,#4f8cff 0%,#7c5cff 55%,#39d98a 130%);
  --grad-text:linear-gradient(120deg,#8ab6ff,#6ea8ff 40%,#39d98a);
  --glow:0 14px 40px rgba(79,140,255,.18);
  --radius:14px;
  --radius-lg:20px;
}

/* Ambient page glow */
body{
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(79,140,255,.10), transparent 60%),
    radial-gradient(900px 480px at 0% 0%, rgba(124,92,255,.08), transparent 55%),
    radial-gradient(1000px 600px at 50% 110%, rgba(57,217,138,.06), transparent 60%),
    var(--bg);
  color:var(--text);
  background-attachment:fixed;
}

::selection{background:rgba(124,92,255,.4);}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2b3549,#33405a);border-radius:10px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3d4c6b,#4a5b7e);}

/* ── Typography ────────────────────────────────────────── */
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.12;text-wrap:balance;}
.section-title{
  font-size:38px !important;
  font-weight:800 !important;
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}
.section-title .accent{color:transparent !important;background:inherit;-webkit-background-clip:text;background-clip:text;}
.section-title::after{
  content:'';display:block;width:56px;height:4px;margin:14px auto 0;
  background:var(--grad);border-radius:99px;
}

/* ── Global surfaces / cards ───────────────────────────── */
.card,
.cl-auth-bar,
.cl-profile,
.cl-library-card,
.cl-agent-banner,
.faq-item,
.price-card,
.testimonial-card,
.game-card,
.fx-card,
details.faq-item{
  background:linear-gradient(180deg,var(--panel-glass),rgba(13,17,24,.6));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset,0 10px 30px rgba(0,0,0,.3);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card:hover,
.cl-auth-bar:hover,
.cl-profile:hover,
.cl-library-card:hover,
.cl-agent-banner:hover,
.faq-item:hover,
.price-card:hover,
.testimonial-card:hover,
.game-card:hover,
.fx-card:hover{
  border-color:var(--border-hi);
  box-shadow:var(--glow);
}
.card h2,.card .card-sub{letter-spacing:-.01em;}

/* ── Buttons ───────────────────────────────────────────── */
.btn{border-radius:12px;font-weight:700;transition:transform .16s ease,box-shadow .22s ease,filter .22s ease,background .2s ease;position:relative;}
.btn-primary,.btn--primary,.btn.primary{
  background:var(--grad) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 8px 24px rgba(79,140,255,.28),0 2px 0 rgba(255,255,255,.12) inset;
}
.btn-primary:hover,.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(79,140,255,.45),0 2px 0 rgba(255,255,255,.14) inset;
  filter:brightness(1.08);
}
.btn-primary:active{transform:translateY(0);}
.btn-ghost,.btn--ghost,.btn.ghost{
  background:rgba(79,140,255,.06) !important;
  border:1px solid var(--border-hi) !important;
  color:var(--text) !important;
  backdrop-filter:blur(6px);
}
.btn-ghost:hover,.btn--ghost:hover{
  background:rgba(79,140,255,.14) !important;
  border-color:rgba(79,140,255,.4) !important;
  transform:translateY(-2px);
}
.btn-sm{padding:6px 12px !important;font-size:12px !important;border-radius:9px !important;}
.btn-icon{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}

/* ── Header ────────────────────────────────────────────── */
.landing-header{background:rgba(11,14,19,.72) !important;border-bottom:1px solid rgba(35,44,61,.6);backdrop-filter:blur(18px);}
.landing-nav .nav-links a{transition:color .2s;position:relative;}
.landing-nav .nav-links a:hover{color:var(--text);}
.landing-nav .nav-links a.nav-active{color:#8ab6ff;}
.landing-nav .nav-links a.nav-active::after{
  content:'';position:absolute;left:8px;right:8px;bottom:-4px;height:2px;
  background:var(--grad);border-radius:99px;
}
.brand-logo{border-radius:8px;box-shadow:0 4px 14px rgba(79,140,255,.25);}

/* ── Hero ──────────────────────────────────────────────── */
.hero{background:radial-gradient(800px 420px at 50% -10%,rgba(79,140,255,.14),transparent 60%),radial-gradient(600px 380px at 85% 20%,rgba(124,92,255,.12),transparent 55%) !important;}
.hero h1{
  background:linear-gradient(110deg,#f2f6ff 10%,#9cc0ff 50%,#39d98a 120%);
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
}
.hero-actions .btn-primary{animation:heroFloat 3.4s ease-in-out infinite;}
@keyframes heroFloat{0%,100%{box-shadow:0 10px 28px rgba(79,140,255,.32)}50%{box-shadow:0 16px 44px rgba(124,92,255,.5),0 0 0 8px rgba(79,140,255,.08)}}
.hero-stats .stat{background:linear-gradient(180deg,rgba(19,25,37,.7),rgba(13,17,24,.5));border:1px solid var(--border);border-radius:14px;}

/* ── Stats strip ───────────────────────────────────────── */
.stats-strip{background:linear-gradient(180deg,rgba(19,25,37,.8),rgba(13,17,24,.55)) !important;border:1px solid var(--border);border-radius:var(--radius-lg);}

/* ── Feature cards ─────────────────────────────────────── */
.feature-card{background:linear-gradient(180deg,var(--panel-glass),rgba(13,17,24,.6));border:1px solid var(--border);border-radius:var(--radius-lg);}
.feature-card:hover{border-color:var(--border-hi);box-shadow:var(--glow);transform:translateY(-4px);}
.feature-card .fc-icon{background:var(--grad);box-shadow:0 6px 18px rgba(79,140,255,.3);}

/* ── Pricing ───────────────────────────────────────────── */
.price-card{overflow:hidden;}
.price-card.featured{border-color:rgba(79,140,255,.45);position:relative;}
.price-card.featured::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;pointer-events:none;
}
.price-card .price{font-size:42px;font-weight:800;letter-spacing:-.04em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ── Testimonials ──────────────────────────────────────── */
.tc-avatar{background:var(--grad) !important;box-shadow:0 4px 14px rgba(124,92,255,.35);}

/* ── FAQ ───────────────────────────────────────────────── */
.faq-item[open]{border-color:rgba(79,140,255,.35);}

/* ── Footer ────────────────────────────────────────────── */
.landing-footer{border-top:1px solid var(--border);background:rgba(13,17,24,.6);}

/* ── Forms & inputs (shared dashboard polish) ──────────── */
.input,select,input[type=text],input[type=search],textarea{
  background:rgba(11,14,19,.6);border:1px solid var(--border);color:var(--text);
  border-radius:11px;transition:border-color .2s,box-shadow .2s;
}
.input:focus,select:focus,input[type=text]:focus,input[type=search]:focus,textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,140,255,.14);outline:none;
}
.spinner{border-color:rgba(148,160,181,.2);border-top-color:var(--accent);}

/* ── Scroll-to-top ─────────────────────────────────────── */
#backToTop{background:rgba(19,25,37,.9) !important;border:1px solid var(--border) !important;color:#8ab6ff !important;}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
}

/* ── Responsive tweaks ─────────────────────────────────── */
@media(max-width:640px){
  .section-title{font-size:28px !important;}
}