/* ═══════════════════════════════════════════════════════════
   S◉LOCK Premium System v2 — OBVIOUS premium, always visible
   DEV only. Never hide content with opacity:0.
   ═══════════════════════════════════════════════════════════ */

:root {
  --prem-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --prem-jade: #2fd8a8;
  --prem-line: rgba(47, 216, 168, 0.28);
  --prem-glow: 0 0 48px rgba(47, 216, 168, 0.18);
  --prem-panel: rgba(4, 12, 14, 0.82);
  --prem-radius: 1.2rem;
  --prem-shadow: 0 32px 72px rgba(0, 0, 0, 0.55);
}

/* Hard safety */
.reveal, .will-animate, [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ── Top progress (thick, obvious) ───────────────────────── */
#silock-prem-progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 4px;
  width: 0%;
  z-index: 2147483646;
  background: linear-gradient(90deg, #1a9e78, #2fd8a8, #9af5d8);
  box-shadow: 0 0 20px rgba(47, 216, 168, 0.65);
  pointer-events: none;
}
body.silock-dev-offset #silock-prem-progress { top: 2.15rem; }

/* ── Side chapter rail (desktop) ─────────────────────────── */
#silock-prem-rail {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2147483000;
  display: none;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.65rem 0.45rem;
  border-radius: 999px;
  background: rgba(3, 8, 9, 0.72);
  border: 1px solid var(--prem-line);
  backdrop-filter: blur(12px);
}
@media (min-width: 1100px) {
  #silock-prem-rail { display: flex; }
}
#silock-prem-rail a {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgba(238, 250, 246, 0.25);
  border: 1px solid transparent;
  text-indent: -9999px;
  overflow: hidden;
  transition: transform 0.25s var(--prem-ease), background 0.25s, box-shadow 0.25s;
}
#silock-prem-rail a.is-active,
#silock-prem-rail a:hover {
  background: var(--prem-jade);
  transform: scale(1.45);
  box-shadow: 0 0 14px rgba(47, 216, 168, 0.7);
}

/* ── Header ──────────────────────────────────────────────── */
header.top {
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  border-bottom: 1px solid var(--prem-line) !important;
  background: rgba(3, 8, 9, 0.9) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
body.silock-dev-offset header.top {
  top: 2.15rem !important;
}

/* Jade hairline under header */
header.top::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--prem-jade), transparent);
  opacity: 0.7;
  pointer-events: none;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn.primary, a.btn.primary {
  box-shadow: 0 10px 32px rgba(47, 216, 168, 0.35), 0 0 0 1px rgba(47, 216, 168, 0.3) inset !important;
  transition: transform 0.22s var(--prem-ease), box-shadow 0.22s var(--prem-ease) !important;
}
.btn.primary:hover, a.btn.primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 40px rgba(47, 216, 168, 0.48), 0 0 0 1px rgba(47, 216, 168, 0.45) inset !important;
}
.btn.ghost, a.btn.ghost {
  border-color: rgba(47, 216, 168, 0.35) !important;
  background: rgba(47, 216, 168, 0.06) !important;
  backdrop-filter: blur(10px);
}
.btn.ghost:hover, a.btn.ghost:hover {
  border-color: var(--prem-jade) !important;
  background: rgba(47, 216, 168, 0.14) !important;
  transform: translateY(-1px);
}

/* ── Panels / cards — unmissable glass ───────────────────── */
.panel,
.article-body.panel,
.legal-panel,
.guide-card,
.plugin-card,
.tier,
.proof-item,
.stat,
.scope-col,
.suite-feature-card {
  border-radius: var(--prem-radius) !important;
  border: 1px solid var(--prem-line) !important;
  background: var(--prem-panel) !important;
  box-shadow: var(--prem-shadow), var(--prem-glow) !important;
  backdrop-filter: blur(20px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.15) !important;
  transition: border-color 0.25s var(--prem-ease), box-shadow 0.25s var(--prem-ease), transform 0.25s var(--prem-ease);
}
.guide-card:hover,
.plugin-card:hover,
.suite-feature-card:hover,
.proof-item:hover {
  border-color: rgba(47, 216, 168, 0.55) !important;
  transform: translateY(-3px);
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(47, 216, 168, 0.2), var(--prem-glow) !important;
}

/* ── Type ────────────────────────────────────────────────── */
.hero h1,
.product-hero h1,
.learn-hero h1,
.wordmark,
.wordmark .word {
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.65), 0 0 48px rgba(47, 216, 168, 0.18) !important;
}
.lede, .product-hero .lede, .hero .lede {
  color: rgba(238, 250, 246, 0.9) !important;
}
.eyebrow, .section-label, .legal-eyebrow {
  color: #2fd8a8 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
}
h2, .article-body h2, .panel h2 {
  position: relative;
}
.article-body h2::after,
.panel > h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: 0.55rem;
  background: linear-gradient(90deg, var(--prem-jade), transparent);
  border-radius: 2px;
}

/* ── Media ───────────────────────────────────────────────── */
.media-frame,
.product-hero-media,
.gallery-item,
.suite-feature-card .thumb,
.wp-figure,
.wp-hero-img {
  border-radius: calc(var(--prem-radius) - 0.05rem) !important;
  overflow: hidden;
  border: 1px solid var(--prem-line) !important;
  box-shadow: var(--prem-shadow), var(--prem-glow) !important;
}
.product-hero-media img,
.suite-feature-card .thumb img,
.gallery-item img {
  transition: transform 0.75s var(--prem-ease);
}
@media (hover: hover) and (min-width: 900px) {
  .product-hero-media:hover img,
  .suite-feature-card:hover .thumb img,
  .gallery-item:hover img {
    transform: scale(1.05);
  }
}

/* ── Stats glow ──────────────────────────────────────────── */
.stat strong,
.stat-row .stat strong,
.proof-item strong {
  color: #2fd8a8 !important;
  text-shadow: 0 0 28px rgba(47, 216, 168, 0.35);
}

/* ── Scope tags ──────────────────────────────────────────── */
.scope-tag {
  border: 1px solid rgba(47, 216, 168, 0.45) !important;
  background: rgba(47, 216, 168, 0.12) !important;
  color: #2fd8a8 !important;
}

/* ── Access panel pulse border ───────────────────────────── */
.panel.access,
#access.panel,
#access {
  border: 1px solid rgba(47, 216, 168, 0.45) !important;
  box-shadow: var(--prem-shadow), 0 0 0 1px rgba(47, 216, 168, 0.12), var(--prem-glow) !important;
}

/* ── Home: cinematic veil + chapter labels ───────────────── */
.hero {
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% 35%, rgba(47, 216, 168, 0.14), transparent 60%);
}
.hero > * { position: relative; z-index: 1; }

/* Floating “PREMIUM DEV SKIN” chip — impossible to miss */
#silock-prem-chip {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 2147483000;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font: 700 0.7rem/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #04120f;
  background: linear-gradient(90deg, #2fd8a8, #7cf0d0);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 30px rgba(47, 216, 168, 0.35);
  pointer-events: none;
}

/* Section scroll-margin for sticky header + banner */
main section,
.article-body,
.product-hero,
.learn-hero {
  scroll-margin-top: 6rem;
}

/* Footer */
.foot {
  border-top: 1px solid var(--prem-line) !important;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.4));
}

/* Marquee */
.marquee {
  border-block: 1px solid var(--prem-line);
  background: rgba(47, 216, 168, 0.04);
}

/* Tables */
.trust-table th {
  color: rgba(238, 250, 246, 0.55) !important;
}
.trust-table td {
  color: rgba(238, 250, 246, 0.92) !important;
}

/* Scroll-driven subtlety: active section outline via JS class */
.silock-prem-section-active {
  outline: 1px solid rgba(47, 216, 168, 0.2);
  outline-offset: -1px;
}

@media (max-width: 720px) {
  #silock-prem-chip {
    left: 0.65rem;
    bottom: 0.65rem;
    font-size: 0.62rem;
    padding: 0.45rem 0.7rem;
  }
  .guide-card:hover,
  .plugin-card:hover,
  .suite-feature-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.primary, .btn.ghost, .product-hero-media img, .suite-feature-card .thumb img {
    transition: none !important;
  }
  .btn.primary:hover, .btn.ghost:hover {
    transform: none !important;
  }
}