/* ============================================================
   Social Sync — Global Enhancement Layer  (v1.3 — NORMALIZED)
   Quiet, tasteful polish only. No orbs, no heavy glow, no
   "AI-look" animation. Page structure untouched.
   ============================================================ */

:root{
  --ss-cyan:#00C9FF;
  --ss-blue:#0A84FF;
  --ss-ink:#050A14;
  --ss-font:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   1. ONE FONT EVERYWHERE (headings + body), icons excluded
   ============================================================ */
:where(body, body *):not(i):not(svg):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="fa-"]):not(code):not(pre):not(kbd):not([class*="mono"]):not([class*="Mono"]){
  font-family: var(--ss-font) !important;
}
.fa,.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,
i[class*="fa-"], span[class*="fa-"]{
  font-family:"Font Awesome 6 Free","Font Awesome 6 Brands","Font Awesome 6 Pro" !important;
}

/* Weights — solid, never thin */
h1,h2{ font-weight:800 !important; letter-spacing:-.02em; }
h3{ font-weight:700 !important; letter-spacing:-.01em; }
h4,h5,h6{ font-weight:700 !important; }
strong,b{ font-weight:700; }
body{ font-weight:400; }
p, li, td, th, label, input, textarea, select,
[class*="desc"], [class*="subtitle"], [class*="muted"], [class*="dim"], [class*="lead"]{
  font-weight:400 !important;
}
p, li{ line-height:1.7; }
h1,h2,h3,h4,h5,h6{ overflow-wrap:break-word; }

/* ============================================================
   2. Quiet interaction polish (NO glow, NO big movement)
   ============================================================ */
a, button, [class*="btn"], [class*="cta"]{
  transition: background-color .25s ease, color .2s ease,
              border-color .25s ease, filter .2s ease, transform .15s ease;
}
[class*="btn"]:active, [class*="cta"]:active{ transform: translateY(1px); }

/* footer links — subtle modern hover */
footer a{ transition: color .2s ease, opacity .2s ease; }
footer a:hover{ color: var(--ss-cyan); }

/* ============================================================
   3. Form fields — clear, calm brand focus
   ============================================================ */
input:focus, textarea:focus, select:focus,
.form-input:focus, .fi:focus, .ft:focus, .form-select:focus, .form-textarea:focus{
  outline: none !important;
  border-color: var(--ss-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,201,255,.14) !important;
}

/* ============================================================
   4. Subtle scrollbar + selection + smooth anchor scroll
   ============================================================ */
*{ scrollbar-color: rgba(255,255,255,.18) transparent; scrollbar-width: thin; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(0,201,255,.4); }
html{ scroll-behavior: smooth; }
::selection{ background: rgba(0,201,255,.28); color:#fff; }

/* ============================================================
   5. Toast (form success / error feedback) — clean, minimal
   ============================================================ */
.ss-toast{
  position: fixed; left:50%; bottom:26px; transform: translate(-50%, 140%);
  z-index: 2147483000; max-width: min(92vw, 440px);
  display:flex; align-items:center; gap:10px;
  padding:13px 19px; border-radius:12px;
  font-family: var(--ss-font); font-weight:600; font-size:14.5px; line-height:1.4;
  color:#eafaff; background: rgba(10,16,28,.96);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 34px -14px rgba(0,0,0,.7);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease; opacity:0;
}
.ss-toast.ss-show{ transform: translate(-50%, 0); opacity:1; }
.ss-toast .ss-dot{ width:8px; height:8px; border-radius:50%; background:#28c76f; flex:0 0 auto; }
.ss-toast.ss-err{ border-color: rgba(255,110,110,.35); }
.ss-toast.ss-err .ss-dot{ background:#ff6e6e; }

/* ============================================================
   6. Responsive safety + mobile type tuning
   ============================================================ */
html, body{ overflow-x: hidden; max-width:100%; }
img{ max-width:100%; height:auto; }

@media (max-width: 600px){
  h1{ font-size: clamp(1.85rem, 8vw, 2.5rem) !important; line-height:1.18 !important; }
  h2{ font-size: clamp(1.45rem, 6.4vw, 2rem) !important; line-height:1.22 !important; }
  p, li{ font-size: 15.5px; }
}
@media (max-width: 380px){
  h1{ font-size: clamp(1.6rem, 8vw, 2.05rem) !important; }
}

/* ============================================================
   7. Respect reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}