/* ============================================================
   STYLSO.CO — Design Tokens + Base Components (single source of truth)
   Load this ONCE (Kadence > Custom CSS, or child-theme stylesheet),
   before any section CSS. Replaces all ad-hoc gold/dark values.
   Production-ready. No !important wars — keep specificity low.
   ============================================================ */

:root{
  /* Ink scale */
  --ink-900:#0A0A0B; --ink-850:#0E0E10; --ink-800:#141417; --ink-700:#1B1B1F;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  /* Type */
  --text:#F6F6F4; --text-2:#C6C6CA; --text-3:#8E8E94;
  /* Gold — ONE refined metallic */
  --gold:#C9A24B; --gold-hi:#E4C878; --gold-lo:#9A7A33; --gold-pale:#F1E3B4;
  /* States */
  --focus:#E4C878; --success:#3FA66A; --danger:#C8503F;
  /* Spacing (8pt) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px;
  /* Type scale (fluid) */
  --h1:clamp(40px,6vw,76px); --h2:clamp(28px,3.4vw,46px); --h3:clamp(20px,1.8vw,24px);
  --body:16.5px; --small:14px; --eyebrow:12px;
  /* Motion */
  --ease:cubic-bezier(.2,.7,.3,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:.25s; --dur:.45s; --dur-slow:1.1s;
  /* Layout */
  --container:1200px; --measure:720px; --radius-btn:6px; --radius-card:16px;
}

/* ---------- Typography ---------- */
.stylso h1,.stylso h2,.stylso h3{
  color:var(--text); text-transform:uppercase; font-weight:800;
  letter-spacing:.02em; line-height:1.02; margin:0;
}
.stylso h1{font-size:var(--h1);}
.stylso h2{font-size:var(--h2);}
.stylso h3{font-size:var(--h3); letter-spacing:.03em;}
.stylso p{color:var(--text-2); font-size:var(--body); line-height:1.6; max-width:var(--measure);}
.stylso .eyebrow{display:inline-block; color:var(--gold); font-size:var(--eyebrow);
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:var(--s-3);}

/* The ONE allowed shimmer — apply to a single hero word only: <span class="gold-word"> */
.gold-word{
  background:linear-gradient(120deg,var(--gold-lo),var(--gold-pale) 50%,var(--gold-lo));
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:stylsoShimmer 4.5s linear infinite;
}
@keyframes stylsoShimmer{0%{background-position:0% center}100%{background-position:220% center}}

/* ---------- Layout helpers ---------- */
.stylso-section{padding:var(--s-9) var(--s-5); background:var(--ink-900);}
.stylso-section--alt{background:var(--ink-850);}
.stylso-hero-pad{padding:var(--s-10) var(--s-5);}
.stylso-container{max-width:var(--container); margin:0 auto;}
.stylso-center{text-align:center;}
@media (max-width:768px){
  .stylso-section{padding:var(--s-8) var(--s-4);}
  .stylso-hero-pad{padding:var(--s-9) var(--s-4);}
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 34px; border-radius:var(--radius-btn);
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.btn--primary{background:linear-gradient(135deg,var(--gold-hi),var(--gold)); color:var(--ink-900); border-color:var(--gold);}
.btn--primary:hover{transform:translateY(-2px); background:var(--ink-900); color:var(--gold-hi);
  border-color:var(--gold); box-shadow:0 12px 30px rgba(201,162,75,.18);}
.btn--ghost{background:transparent; color:var(--gold-hi); border-color:rgba(201,162,75,.45);}
.btn--ghost:hover{transform:translateY(-2px); background:rgba(201,162,75,.06); border-color:var(--gold);}
/* shimmer sweep — CTAs only */
.btn::before{content:""; position:absolute; inset:0 auto 0 0; z-index:-1; width:45%; height:100%;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-180%) skewX(-22deg); animation:stylsoSweep 4.5s ease-in-out infinite;}
@keyframes stylsoSweep{0%,55%{transform:translateX(-180%) skewX(-22deg)}100%{transform:translateX(320%) skewX(-22deg)}}
/* silk underline */
.btn::after{content:""; position:absolute; left:50%; bottom:11px; width:0; height:1px;
  background:currentColor; opacity:.5; transform:translateX(-50%); transition:width var(--dur) var(--ease);}
.btn:hover::after{width:54%;}

/* ---------- Cards ---------- */
.stylso-card{background:var(--ink-800); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:var(--s-6); transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.stylso-card:hover{transform:translateY(-3px); border-color:var(--gold);}

/* ---------- Stat block ---------- */
.stylso-stat b{display:block; font-size:clamp(32px,4vw,52px); color:var(--text); line-height:1; font-weight:800;}
.stylso-stat b span{color:var(--gold);}
.stylso-stat small{display:block; margin-top:var(--s-2); color:var(--text-3);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;}

/* ---------- Gold hairline divider (animates in on .in) ---------- */
.stylso-rule{height:1px; width:0; background:var(--gold); opacity:.5; margin:var(--s-7) auto;
  transition:width var(--dur-slow) var(--ease-out);}
.in .stylso-rule, .stylso-rule.in{width:100%;}

/* ---------- ONE reveal system (JS adds .in on scroll) ---------- */
.reveal{opacity:0; transform:translateY(20px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);}
.reveal.in{opacity:1; transform:none;}
.reveal[data-d="1"]{transition-delay:.06s}
.reveal[data-d="2"]{transition-delay:.12s}
.reveal[data-d="3"]{transition-delay:.18s}

/* ---------- Focus + reduced motion (accessibility) ---------- */
.btn:focus-visible, a:focus-visible{outline:2px solid var(--focus); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
}