/* ═══════════════════════════════════════════════════════════
   TOOLY POLISH v1 — shared animation/trust/professional layer
   Applied site-wide. Additive only; safe for light & dark themes.
   ═══════════════════════════════════════════════════════════ */

/* ── Scroll progress bar ─────────────────────────────────── */
#tlProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:linear-gradient(90deg,#6366f1,#8b5cf6,#a855f7,#ec4899);box-shadow:0 0 12px rgba(99,102,241,.55);transition:width .08s linear;pointer-events:none}

/* ── Header state on scroll (shadow + solid bg) ──────────── */
.header.is-scrolled,.tl-header.is-scrolled,.site-header.is-scrolled{box-shadow:0 10px 30px rgba(15,23,42,.10);background:rgba(255,255,255,.94)!important}
body.dark .header.is-scrolled,body.dark .tl-header.is-scrolled,body.dark .site-header.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.45);background:rgba(19,19,42,.94)!important}

/* ── Living gradient text ────────────────────────────────── */
.gradient-text{background-size:200% 200%;animation:tlGradShift 6s ease-in-out infinite}
@keyframes tlGradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ── Button shine sweep ──────────────────────────────────── */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn-primary:hover::after{left:130%}

/* ── FAQ smooth open/close ───────────────────────────────── */
details.faq-item,details.faq{border-radius:var(--radius,12px)}
details.faq-item .faq-body,details.faq .faq-body{overflow:hidden;max-height:0;transition:max-height .35s ease,padding .35s ease;padding:0 1.2rem;font-size:.87rem;color:var(--text3,#64748b);line-height:1.7}
details.faq-item[open] .faq-body,details.faq[open] .faq-body{max-height:400px;padding:0 1.2rem 1.1rem}

/* ── Back-to-top (pages without one) ─────────────────────── */
#tlToTop{position:fixed;right:1.1rem;bottom:1.1rem;width:44px;height:44px;border-radius:12px;border:none;cursor:pointer;font-size:1.15rem;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 10px 24px rgba(99,102,241,.4);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s;z-index:9998}
#tlToTop.show{opacity:1;visibility:visible;transform:translateY(0)}
#tlToTop:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(99,102,241,.5)}

/* ── Micro-interaction: gentle hover lift on generic buttons ── */
.btn-outline:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(99,102,241,.15)}

/* ── Professional a11y + selection ───────────────────────── */
:focus-visible{outline:3px solid #6366f1;outline-offset:2px;border-radius:4px}
::selection{background:rgba(99,102,241,.25)}

/* ── Subtle branded scrollbar (WebKit) ───────────────────── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c7d2fe,#a5b4fc);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#818cf8,#6366f1);border:2px solid transparent;background-clip:content-box}

/* ── Reduced motion: everything off ──────────────────────── */
@media(prefers-reduced-motion:reduce){
  #tlProgress,#tlToTop{transition:none}
  .gradient-text{animation:none}
  .btn-primary::after{display:none}
  details.faq-item .faq-body,details.faq .faq-body{transition:none}
}

/* ── Footer socials (real accounts, added 2026-08-04) ──── */
.footer-socials{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:1.1rem 0 .4rem}
.footer-socials a{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem 1rem;border:1.5px solid #e2e8f0;border-radius:999px;color:#64748b;font-size:.78rem;font-weight:600;text-decoration:none;transition:all .2s}
.footer-socials a:hover{border-color:#6366f1;color:#4f46e5;background:#eef2ff;transform:translateY(-2px)}
.footer-socials svg{width:14px;height:14px;fill:currentColor}
body.dark .footer-socials a{border-color:#3f3f46;color:#a1a1aa}
body.dark .footer-socials a:hover{border-color:#818cf8;color:#a5b4fc;background:#1e1b4b}