/* SpicyMatch Hub PRO MAX – neon performance + global sticky */
:root{--spm-bd:rgba(255,255,255,.14);--spm-bd2:rgba(255,255,255,.10);--spm-pink:rgba(255,0,128,1);--spm-purple:rgba(128,0,255,1);
--spm-couple1:rgba(255,0,128,.24);--spm-couple2:rgba(0,255,255,.16);
--spm-sf1:rgba(255,77,0,.22);--spm-sf2:rgba(255,0,200,.14);
--spm-sm1:rgba(0,255,255,.18);--spm-sm2:rgba(128,0,255,.20);
}
.spm-root,.spm-hub{color:#fff}
.spm-section{max-width:1100px;margin:0 auto;padding:34px 18px}
.spm-h2{font-size:26px;margin:0 0 10px 0}
.spm-p{margin:0 0 16px 0;opacity:.88}
.spm-hero{position:relative;overflow:hidden;border-radius:26px;margin:74px auto 8px auto;max-width:1100px}
.spm-hero-inner{position:relative;padding:52px 18px 34px 18px;text-align:center;background:
radial-gradient(900px 360px at 20% 0%, rgba(255,0,128,.25), transparent 55%),
radial-gradient(900px 360px at 80% 10%, rgba(0,255,255,.18), transparent 55%),
linear-gradient(135deg, rgba(20,20,28,.96), rgba(10,10,14,.96));border:1px solid var(--spm-bd)}
.spm-hero-glow{position:absolute;inset:-2px;background:radial-gradient(1200px 500px at 50% -20%, rgba(128,0,255,.28), transparent 60%);pointer-events:none}
.spm-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:980px;margin:0 auto 10px auto}
.spm-brand{font-weight:900;letter-spacing:.8px;opacity:.85}
.spm-hero-badge{display:inline-block;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);font-size:12px;letter-spacing:.5px;margin-bottom:10px}
.spm-hero-title{font-size:42px;line-height:1.05;margin:6px 0 10px 0}
.spm-hero-sub{margin:0 auto 16px auto;max-width:860px;opacity:.9}
.spm-hero-intro{max-width:880px;margin:14px auto 0 auto;opacity:.92}
.spm-proof{display:inline-flex;align-items:center;gap:12px;margin:14px auto 0 auto;padding:10px 14px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14)}
.spm-proof-num{font-size:26px;font-weight:900;background:linear-gradient(90deg,var(--spm-pink),var(--spm-purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.spm-proof-text{font-size:12px;opacity:.88}
.spm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:980px){.spm-grid{grid-template-columns:1fr}.spm-hero-title{font-size:34px}}
.spm-card{position:relative;border-radius:22px;padding:18px;background:linear-gradient(180deg, rgba(20,20,28,.95), rgba(10,10,14,.95));border:1px solid var(--spm-bd);box-shadow:0 18px 40px rgba(0,0,0,.40);overflow:hidden}
.spm-card:before{content:"";position:absolute;inset:-2px;background:
radial-gradient(500px 180px at 10% 0%, var(--spm-a1, rgba(255,0,128,.22)), transparent 60%),
radial-gradient(500px 180px at 90% 10%, var(--spm-a2, rgba(0,255,255,.16)), transparent 60%),
radial-gradient(500px 220px at 50% 110%, var(--spm-a3, rgba(128,0,255,.18)), transparent 60%);pointer-events:none}
.spm-card-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px}
.spm-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);font-size:12px;letter-spacing:.4px}
.spm-glow-line{flex:1;height:1px;background:linear-gradient(90deg, rgba(255,0,128,.6), rgba(0,255,255,.25), rgba(128,0,255,.55));opacity:.65}
.spm-title{position:relative;margin:10px 0 10px 0;font-size:20px;font-weight:800}
.spm-note{position:relative;margin-top:10px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--spm-bd2);font-size:14px;opacity:.95}
.spm-btn{position:relative;display:inline-block;margin-top:14px;padding:12px 16px;border-radius:16px;text-decoration:none!important;font-weight:900;background:linear-gradient(90deg, rgba(255,0,128,.95), rgba(128,0,255,.92));color:#fff!important;border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 25px rgba(0,0,0,.35);cursor:pointer}
.spm-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.spm-btn--small{padding:10px 14px;border-radius:14px;font-size:14px;margin-top:0}
.spm-btn--ghost{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none}
.spm-legal{position:relative;margin-top:12px;font-size:12px;opacity:.78}
.spm-code{margin-top:10px;display:flex;gap:10px;align-items:center;font-size:13px;opacity:.95}
.spm-code-btn{border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
.spm-code-btn:hover{filter:brightness(1.1)}
.spm-single-boost .spm-sb-card{border-radius:24px;padding:22px;background:linear-gradient(135deg, rgba(255,0,128,.14), rgba(0,255,255,.08), rgba(10,10,14,.92));border:1px solid var(--spm-bd);box-shadow:0 18px 40px rgba(0,0,0,.40)}
.spm-list{margin:10px 0 0 18px;opacity:.95}
.spm-list li{margin:6px 0}
.spm-events{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:980px){.spm-events{grid-template-columns:1fr}}
.spm-event{display:flex;gap:14px;border-radius:22px;overflow:hidden;background:rgba(20,20,28,.92);border:1px solid var(--spm-bd);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.spm-event-img{width:160px;min-height:180px;background-size:cover;background-position:center}
.spm-event-img--empty{background:radial-gradient(300px 160px at 50% 30%, rgba(255,0,128,.18), transparent 55%), rgba(0,0,0,.25)}
@media(max-width:520px){.spm-event{flex-direction:column}.spm-event-img{width:100%;min-height:160px}}
.spm-event-body{padding:14px 14px 16px 14px;flex:1}
.spm-event-date{font-size:12px;opacity:.85}
.spm-event-title{margin:8px 0 6px 0;font-size:18px;font-weight:800}
.spm-event-desc{margin-top:10px;font-size:14px;opacity:.92}
.spm-event-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.spm-empty{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid var(--spm-bd2);opacity:.9}
.spm-banner{margin-top:18px;opacity:.95}
.spm-widget-wrap{display:flex;justify-content:center}

/* FLOATING CTA (FAB) */
.spm-fab{
  --spm-fab-right: 18px;
  position:fixed;
  right: var(--spm-fab-right);
  bottom: 22px;
  z-index: 99999;
  border:0;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(90deg, rgba(255,0,128,.95), rgba(128,0,255,.92));
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  cursor:pointer;
}
.spm-fab:hover{filter:brightness(1.05);transform:translateY(-1px)}
@media(max-width:560px){
  .spm-fab{bottom: 16px; padding: 11px 14px; border-radius: 14px; font-size: 13px}
}

/* MODAL */
.spm-modal{position:fixed;inset:0;z-index:100000;display:none}
.spm-modal.is-open{display:block}
.spm-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.spm-modal-card{position:relative;max-width:560px;margin:90px auto 0 auto;border-radius:22px;overflow:hidden;background:linear-gradient(180deg, rgba(20,20,28,.96), rgba(10,10,14,.96));border:1px solid var(--spm-bd);box-shadow:0 30px 90px rgba(0,0,0,.55)}
@media(max-width:560px){.spm-modal-card{margin:70px 12px 0 12px}}
.spm-modal-top{padding:18px 18px 10px 18px}
.spm-modal-title{font-size:18px;font-weight:900}
.spm-modal-sub{margin-top:8px;font-size:13px;opacity:.9}
.spm-modal-actions{display:grid;grid-template-columns:1fr;gap:12px;padding:12px 18px 16px 18px}
.spm-modal-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid var(--spm-bd2);color:#fff;cursor:pointer}
.spm-modal-btn:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
.spm-modal-ico{font-size:18px}
.spm-modal-foot{padding:12px 18px 18px 18px;font-size:12px;opacity:.75}
.spm-toast{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;min-width:260px;max-width:85%;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 12px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.spm-toast.show{opacity:1}


/* Segment colors */
.spm-card--couple{--spm-a1:var(--spm-couple1);--spm-a2:var(--spm-couple2);--spm-a3:rgba(128,0,255,.18)}
.spm-card--sf{--spm-a1:var(--spm-sf1);--spm-a2:var(--spm-sf2);--spm-a3:rgba(0,255,255,.10)}
.spm-card--sm{--spm-a1:var(--spm-sm1);--spm-a2:var(--spm-sm2);--spm-a3:rgba(255,0,128,.14)}

/* Legal icon */
.spm-legal{display:flex;gap:8px;align-items:flex-start}
.spm-legal-ico{flex:0 0 auto;filter:drop-shadow(0 0 10px rgba(255,0,128,.25));opacity:.95}
.spm-legal-text{opacity:.9}

/* Modal segment accents */
.spm-modal-btn--couple{border-color:rgba(255,0,128,.22)}
.spm-modal-btn--sf{border-color:rgba(255,77,0,.22)}
.spm-modal-btn--sm{border-color:rgba(0,255,255,.18)}
.spm-modal-btn--couple:hover{box-shadow:0 0 0 1px rgba(255,0,128,.24), 0 18px 40px rgba(0,0,0,.35)}
.spm-modal-btn--sf:hover{box-shadow:0 0 0 1px rgba(255,77,0,.22), 0 18px 40px rgba(0,0,0,.35)}
.spm-modal-btn--sm:hover{box-shadow:0 0 0 1px rgba(0,255,255,.18), 0 18px 40px rgba(0,0,0,.35)}

/* Sticky spacing: JS sets --spm-sticky-space on .spm-root */
.spm-root{padding-top:calc(var(--spm-sticky-space,0px) + 18px)}



/* micro text helper (legacy) */
.spm-sticky-micro{font-size:12px;opacity:.85}