/* =============================================================
   monkeygod.fun — RESTYLE stylesheet
   Design language: "Periwinkle + purple blend"
   Sleek/restrained structure (jabigod) + refined purple soul.
   Dark theme only.
   ============================================================= */

/* -------------------------------------------------------------
   0. TOKENS
   ------------------------------------------------------------- */
:root{
  --bg:#08070c;
  --surface:#0d0c13;
  --card:#111019;
  --card-hover:#16151f;
  --border:rgba(255,255,255,0.08);
  --border-hi:rgba(255,255,255,0.22);
  --text:#f2f0f7;
  --text-muted:#8b8798;
  --text-dim:#4a4658;
  --a-peri:#c9b8ff;
  --a-peri-lt:#e4dcff;
  --a-purple:#a855f7;
  --grad:linear-gradient(135deg,#e4dcff 0%,#c9b8ff 40%,#a855f7 100%);
  --grad-ink:#0a0812;
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:16px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'SF Mono','Fira Code',ui-monospace,monospace;

  /* JS sets this to 0px when the announce bar is dismissed */
  --banner-h:40px;

  color-scheme:dark only;
}

/* -------------------------------------------------------------
   1. RESET / BASE
   ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}

::selection{background:rgba(201,184,255,.28);color:#fff}

/* Calm background system (body fallback + .site-bg layers below) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    radial-gradient(ellipse 95% 60% at 50% -8%, rgba(168,85,247,.10), transparent 62%),
    linear-gradient(rgba(201,184,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,184,255,.05) 1px, transparent 1px);
  background-size:100% 100%,64px 64px,64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);
}

/* -------------------------------------------------------------
   2. SHARED PRIMITIVES
   ------------------------------------------------------------- */

/* Layout containers */
.section-inner,.container,.faq-inner,.final-cta-inner{
  max-width:1100px;
  margin:0 auto;
}

section,.page-section{
  position:relative;
  padding:68px 24px;
  text-align:center;
}

/* Alternating surface tint on some sections (set explicitly per section) */

/* Eyebrows / small labels */
.section-eyebrow,
.hero-eyebrow-pill,
.sister-eyebrow,
.welcome-tag,
.tier-name{
  font-family:var(--font);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--a-peri);
}

.section-eyebrow,.sister-eyebrow{
  display:block;
  margin-bottom:14px;
}

/* Section titles */
.section-title,.tiers-title,.cta-heading,.sister-title,.welcome-title{
  font-weight:800;
  letter-spacing:-0.025em;
  line-height:1.1;
  color:var(--text);
}

.section-title{
  font-size:clamp(1.8rem,4vw,2.6rem);
  margin-bottom:16px;
}

/* Gradient clip-text helper */
.section-title em,
.tt-b,
.hl-bot,
.tier-price,
.hero-stat-num,
.nav-logo,
.tiers-title .tt-b{
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-style:normal;
}

/* Section sub text */
.section-sub,.tiers-sub,.cta-sub,.sister-sub,.welcome-sub,.hero-sub,.modal-sub{
  color:var(--text-muted);
  font-size:1.02rem;
  line-height:1.6;
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
}

/* Section head spacing */
.tiers-header,.why-section .section-inner > .section-eyebrow,
.how-section .section-eyebrow{margin-bottom:0}
.section-title{margin-bottom:16px}
.section-sub,.tiers-sub{margin-bottom:40px}

/* -------------------------------------------------------------
   3. BUTTONS (rectangular, 6px)
   ------------------------------------------------------------- */

/* Primary (gradient fill) */
.hero-btn,
.tier-btn.tier-btn-popular,
.tier-btn.tier-btn-ultimate,
.welcome-btn,
.pay-btn-card,
.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--grad);
  color:var(--grad-ink);
  font-weight:800;
  letter-spacing:.02em;
  font-size:.95rem;
  padding:13px 26px;
  border-radius:var(--radius-sm);
  box-shadow:0 0 28px rgba(201,184,255,.18);
  transition:transform .15s ease,box-shadow .25s ease;
}
.hero-btn:hover,
.tier-btn.tier-btn-popular:hover,
.tier-btn.tier-btn-ultimate:hover,
.welcome-btn:hover,
.pay-btn-card:hover,
.nav-cta:hover{
  box-shadow:0 0 40px rgba(201,184,255,.30);
  transform:translateY(-2px);
}

/* Ghost / secondary */
.hero-ghost,
.community-btn,
.sister-btn,
.tier-btn,
.legal-btn,
.welcome-skip,
.tier-crypto{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  color:var(--text-muted);
  font-weight:600;
  font-size:.95rem;
  padding:13px 26px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  transition:color .2s ease,border-color .25s ease,transform .15s ease,background .25s ease;
}
.hero-ghost:hover,
.community-btn:hover,
.sister-btn:hover{
  color:var(--text);
  border-color:var(--border-hi);
  transform:translateY(-2px);
}

/* -------------------------------------------------------------
   4. ANNOUNCE BAR (calm flat translucent — NOT animated gradient)
   ------------------------------------------------------------- */
.announce-bar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--banner-h);
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding:0 44px 0 16px;
  background:rgba(20,17,30,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  font-size:.82rem;
  color:var(--text-muted);
}
.announce-text{color:var(--text-muted)}
.announce-code{
  font-weight:800;
  letter-spacing:.03em;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.announce-timer-wrap{display:inline-flex;align-items:center;gap:6px}
.announce-timer{
  font-family:var(--mono);
  color:var(--a-peri-lt);
  font-weight:600;
  letter-spacing:.02em;
}
.announce-link{
  color:var(--a-peri);
  font-weight:700;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.announce-link:hover{border-color:var(--a-peri)}
.announce-close{
  position:absolute;
  right:12px;top:50%;
  transform:translateY(-50%);
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  font-size:1rem;line-height:1;
  transition:color .2s ease,background .2s ease;
}
.announce-close:hover{color:var(--text);background:rgba(255,255,255,.06)}

/* -------------------------------------------------------------
   5. BACKGROUND LAYERS (.site-bg etc.)
   ------------------------------------------------------------- */
.site-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.bg-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(201,184,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,184,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);
}
.bg-glow-top{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 95% 60% at 50% -8%, rgba(168,85,247,.12), transparent 62%);
}
.bg-glow-mid{
  position:absolute;
  left:50%;top:44%;
  width:820px;height:620px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(201,184,255,.06), transparent 68%);
  filter:blur(20px);
}

/* -------------------------------------------------------------
   6. NAV
   ------------------------------------------------------------- */
.site-nav{
  position:fixed;
  top:var(--banner-h);
  left:0;right:0;
  z-index:1100;
  background:rgba(8,7,12,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:top .25s ease;
}
.nav-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.nav-logo{
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:-0.02em;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:26px;
}
.nav-links a{
  font-size:.9rem;
  font-weight:500;
  color:var(--text-muted);
  transition:color .2s ease;
}
.nav-links a:hover{color:var(--text)}
.nav-cta{padding:9px 18px;font-size:.85rem}

/* -------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------- */
.hero{
  text-align:center;
  /* clear fixed announce bar (var(--banner-h)) + nav (~58px) */
  padding:calc(var(--banner-h) + 130px) 24px 80px;
  position:relative;
}
.hero-inner{
  max-width:860px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-eyebrow-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 15px;
  border:1px solid var(--border);
  border-radius:100px;
  background:rgba(255,255,255,.03);
  margin-bottom:26px;
  color:var(--a-peri);
}
.hero-pulse{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--a-purple);
  box-shadow:0 0 0 0 rgba(168,85,247,.55);
  animation:heroPulse 2s infinite;
}
@keyframes heroPulse{
  0%{box-shadow:0 0 0 0 rgba(168,85,247,.5)}
  70%{box-shadow:0 0 0 8px rgba(168,85,247,0)}
  100%{box-shadow:0 0 0 0 rgba(168,85,247,0)}
}
.hero-headline{
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.04;
  font-size:clamp(2.4rem,6.4vw,4.4rem);
  margin-bottom:22px;
}
.hl-top{display:block;color:var(--text)}
.hl-bot{display:block}
.hero-sub{
  font-size:1.12rem;
  margin-bottom:34px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-bottom:52px;
}
.hero-btn{padding:15px 32px;font-size:1rem}
.hero-ghost{padding:15px 32px;font-size:1rem}

/* Hero stats */
.hero-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  flex-wrap:wrap;
}
.hero-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.hero-stat-num{
  font-size:2rem;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1;
}
.hero-stat-label{
  font-size:.78rem;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.hero-stat-div{
  width:1px;
  height:34px;
  background:var(--border);
}

/* -------------------------------------------------------------
   8. PREVIEW SLIDER (container only — JS #mgx-css owns the stage)
   ------------------------------------------------------------- */
.preview-slider{
  padding:24px 24px 40px;
  text-align:center;
}
.ps-inner{
  max-width:600px;
  margin:0 auto;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--card);
  overflow:hidden;
  box-shadow:0 0 50px rgba(168,85,247,.08);
}

/* -------------------------------------------------------------
   9. TIERS
   ------------------------------------------------------------- */
.tiers-section{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.tiers-title{
  font-size:clamp(1.9rem,4.4vw,2.8rem);
  margin-bottom:16px;
}
.tt-a{display:block;color:var(--text)}
.tt-b{display:block}

.tier-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  align-items:stretch;
  margin-bottom:40px;
}

.tier-card{
  position:relative;
  display:flex;
  flex-direction:column;
  text-align:left;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:30px 26px 26px;
  transition:transform .15s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.tier-card:hover{
  transform:translateY(-3px);
  border-color:var(--border-hi);
  background:var(--card-hover);
}

/* Popular — inset-ring glow */
.tier-card.popular{
  border-color:rgba(201,184,255,.5);
  background:linear-gradient(160deg,#1a1330 0%,#111019 60%);
  box-shadow:0 0 60px rgba(168,85,247,.14),0 0 0 1px rgba(201,184,255,.20) inset;
}
.tier-card.popular:hover{
  transform:translateY(-3px);
  box-shadow:0 0 74px rgba(168,85,247,.20),0 0 0 1px rgba(201,184,255,.30) inset;
}

/* Ultimate — deeper warm-purple tinted variant */
.tier-card.ultimate{
  border-color:rgba(168,85,247,.42);
  background:linear-gradient(160deg,#211433 0%,#130f1d 62%);
  box-shadow:0 0 60px rgba(168,85,247,.12),0 0 0 1px rgba(168,85,247,.16) inset;
}
.tier-card.ultimate:hover{
  transform:translateY(-3px);
  box-shadow:0 0 74px rgba(168,85,247,.18),0 0 0 1px rgba(168,85,247,.26) inset;
}

/* Floating badge pills */
.tier-popular-label,
.tier-ultimate-label{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  padding:5px 14px;
  border-radius:100px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  background:var(--grad);
  color:var(--grad-ink);
  box-shadow:0 4px 18px rgba(168,85,247,.35);
}
.tier-ultimate-label{
  background:linear-gradient(135deg,#f0e9ff 0%,#c9b8ff 45%,#8b46e0 100%);
}

.tier-name{
  display:block;
  margin-bottom:12px;
}
.tier-price-row{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.tier-price{
  font-size:3rem;
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:1;
}
.tier-price-sym{
  font-size:1.5rem;
  vertical-align:top;
}
.tier-onetime{
  font-size:.8rem;
  font-weight:500;
  color:var(--text-muted);
  -webkit-text-fill-color:var(--text-muted); /* keep out of gradient clip */
  letter-spacing:0;
}
.tier-desc{
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.55;
  margin-bottom:18px;
}
.tier-divider{
  height:1px;
  background:var(--border);
  margin:0 0 18px;
}
.tier-features{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:11px;
  margin-bottom:22px;
}
.tier-features li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.92rem;
  color:var(--text);
  line-height:1.45;
}
/* Flat periwinkle check glyph (NOT a filled badge) */
.check-icon{
  flex:0 0 auto;
  color:var(--a-peri);
  font-weight:800;
  font-size:.9rem;
  line-height:1.5;
}

.tier-card-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* Default (non-featured) tier button = outline */
.tier-btn{
  width:100%;
  padding:13px 20px;
  font-size:.95rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text-muted);
  border-radius:var(--radius-sm);
  font-weight:700;
  transition:color .2s ease,border-color .25s ease,transform .15s ease,background .25s ease;
}
.tier-btn:hover{
  color:var(--text);
  border-color:var(--border-hi);
  background:rgba(255,255,255,.07);
  transform:translateY(-2px);
}
/* Featured tier buttons = gradient fill (override outline) */
.tier-btn.tier-btn-popular,
.tier-btn.tier-btn-ultimate{
  width:100%;
  background:var(--grad);
  border:0;
  color:var(--grad-ink);
  font-weight:800;
}
.tier-footnote{
  font-size:.76rem;
  color:var(--text-dim);
}
.tier-crypto{
  border:0;
  padding:0;
  background:none;
  font-size:.82rem;
  font-weight:600;
  color:var(--a-peri);
}
.tier-crypto:hover{color:var(--a-peri-lt);text-decoration:underline}

/* Pay methods row */
.pay-methods{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}
.pay-methods .chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:100px;
  background:rgba(255,255,255,.03);
  font-size:.8rem;
  color:var(--text-muted);
  font-weight:600;
}

/* -------------------------------------------------------------
   10. TRUST STRIP
   ------------------------------------------------------------- */
.trust-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px;
  padding:28px 24px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.trust-item{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:.86rem;
  color:var(--text-muted);
  font-weight:500;
}
.trust-icon{color:var(--a-peri);display:inline-flex}
.trust-sep{width:4px;height:4px;border-radius:50%;background:var(--text-dim)}

/* -------------------------------------------------------------
   11. WHY
   ------------------------------------------------------------- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:40px;
  text-align:left;
}
.why-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  transition:transform .15s ease,border-color .25s ease,background .25s ease;
}
.why-card:hover{
  transform:translateY(-3px);
  border-color:var(--border-hi);
  background:var(--card-hover);
}
.why-icon{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius);
  background:rgba(201,184,255,.10);
  color:var(--a-peri);
  font-size:1.35rem;
  margin-bottom:16px;
}
.why-card h3{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:-0.01em;
  margin-bottom:8px;
  color:var(--text);
}
.why-card p{
  font-size:.92rem;
  color:var(--text-muted);
  line-height:1.6;
}

/* -------------------------------------------------------------
   12. HOW / STEPS
   ------------------------------------------------------------- */
.how-section{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.steps{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:40px;
}
.step{
  flex:1 1 220px;
  max-width:280px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px 22px;
  text-align:center;
  position:relative;
  transition:transform .15s ease,border-color .25s ease;
}
.step:hover{transform:translateY(-3px);border-color:var(--border-hi)}
.step-num{
  position:absolute;
  top:14px;right:16px;
  font-size:.78rem;
  font-weight:800;
  color:var(--text-dim);
  letter-spacing:.04em;
}
.step-icon{
  width:52px;height:52px;
  margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius);
  background:rgba(201,184,255,.10);
  color:var(--a-peri);
  font-size:1.5rem;
}
.step-title{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:8px;
  color:var(--text);
}
.step-desc{
  font-size:.9rem;
  color:var(--text-muted);
  line-height:1.55;
}
.step-arrow{
  display:flex;
  align-items:center;
  color:var(--text-dim);
  font-size:1.3rem;
}

/* -------------------------------------------------------------
   13. COMMUNITY
   ------------------------------------------------------------- */
.community-links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
  margin-top:40px;
  text-align:left;
}
.community-card{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px 22px;
  transition:transform .15s ease,border-color .25s ease,background .25s ease;
}
.community-card:hover{
  transform:translateY(-3px);
  border-color:var(--border-hi);
  background:var(--card-hover);
}
.community-icon{
  flex:0 0 auto;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius);
  background:rgba(201,184,255,.10);
  color:var(--a-peri);
}
.community-icon svg{width:24px;height:24px}
.community-text{flex:1;min-width:0}
.community-title{
  font-size:1rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:2px;
}
.community-sub{
  font-size:.85rem;
  color:var(--text-muted);
}
.community-btn{flex:0 0 auto;padding:10px 18px;font-size:.85rem}

/* -------------------------------------------------------------
   14. FAQ
   ------------------------------------------------------------- */
.faq-section{background:var(--surface);border-top:1px solid var(--border)}
.faq-inner{max-width:760px}
.faq{margin-top:40px;text-align:center}
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  margin-bottom:12px;
  overflow:hidden;
  transition:border-color .25s ease;
}
.faq-item.open{border-color:rgba(201,184,255,.35)}
.faq-answer{text-align:center}
.faq-question{
  width:100%;
  position:relative;
  display:block;
  padding:18px 44px;
  text-align:center;
  font-size:1rem;
  font-weight:600;
  color:var(--text);
  transition:color .2s ease;
}
.faq-question:hover{color:var(--a-peri-lt)}
.faq-chevron{
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  flex:0 0 auto;
  color:var(--a-peri);
  transition:transform .3s ease;
  display:inline-flex;
}
.faq-item.open .faq-chevron{transform:translateY(-50%) rotate(180deg)}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.faq-answer p{
  padding:0 22px 20px;
  color:var(--text-muted);
  font-size:.94rem;
  line-height:1.65;
}

/* -------------------------------------------------------------
   15. SISTER SECTION
   ------------------------------------------------------------- */
.sister-section{padding:68px 24px}
.sister-slab{
  max-width:900px;
  margin:0 auto;
  padding:48px 32px;
  border:1px solid rgba(201,184,255,.25);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,#160f26 0%,#0d0c13 70%);
  box-shadow:0 0 60px rgba(168,85,247,.12),0 0 0 1px rgba(201,184,255,.12) inset;
}
.sister-title{
  font-size:clamp(1.6rem,3.6vw,2.2rem);
  margin:12px 0 12px;
}
.sister-sub{margin-bottom:26px}
.sister-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}
.sister-btn{padding:13px 26px}

/* -------------------------------------------------------------
   16. FINAL CTA
   ------------------------------------------------------------- */
.final-cta{padding:80px 24px}
.final-cta-inner{max-width:760px}
.cta-heading{
  font-size:clamp(2rem,5vw,3rem);
  margin:14px 0 16px;
}
.cta-sub{margin-bottom:32px;font-size:1.1rem}
.cta-compare{
  display:block;
  margin-top:16px;
  font-size:.85rem;
  color:var(--text-muted);
}

/* -------------------------------------------------------------
   17. MEMBERS
   ------------------------------------------------------------- */
.members{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:20px 24px 48px;
  flex-wrap:wrap;
  font-size:.85rem;
  color:var(--text-muted);
}
.member-dots{display:inline-flex}
.member-dots span{
  width:24px;height:24px;
  border-radius:50%;
  background:linear-gradient(135deg,#c9b8ff,#a855f7);
  border:2px solid var(--bg);
  margin-left:-8px;
}
.member-dots span:first-child{margin-left:0}
#members-count{color:var(--a-peri-lt);font-weight:700}

/* -------------------------------------------------------------
   18. FOOTER
   ------------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--border);
  padding:32px 24px;
  text-align:center;
  background:var(--bg);
}
.footer-legal{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:.82rem;
}
.legal-btn{
  border:0;
  padding:0;
  background:none;
  color:var(--text-muted);
  font-weight:500;
  transition:color .2s ease;
}
.legal-btn:hover{color:var(--text)}
.footer-sep{color:var(--text-dim)}

/* -------------------------------------------------------------
   19. WELCOME POPUP
   ------------------------------------------------------------- */
.welcome-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(4,3,8,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .25s ease;
}
.welcome-overlay.welcome-visible{opacity:1}
.welcome-card{
  position:relative;
  width:100%;
  max-width:440px;
  text-align:center;
  padding:40px 32px 32px;
  border:1px solid rgba(201,184,255,.28);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,#191128 0%,#0d0c13 68%);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(201,184,255,.14) inset;
  transform:scale(.94) translateY(8px);
  transition:transform .25s ease;
}
.welcome-overlay.welcome-visible .welcome-card{transform:scale(1) translateY(0)}
.welcome-close{
  position:absolute;
  top:14px;right:14px;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  font-size:1.15rem;
  transition:color .2s ease,background .2s ease;
}
.welcome-close:hover{color:var(--text);background:rgba(255,255,255,.06)}
.welcome-tag{display:inline-block;margin-bottom:12px}
.welcome-title{font-size:1.6rem;margin-bottom:10px}
.welcome-sub{margin-bottom:22px;font-size:.98rem}
.welcome-code-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px dashed rgba(201,184,255,.4);
  border-radius:var(--radius);
  background:rgba(201,184,255,.05);
  margin-bottom:22px;
}
.welcome-code-inner{text-align:left}
.welcome-code-label{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:2px;
}
.welcome-code-val{
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:.04em;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.welcome-code-copy{
  flex:0 0 auto;
  padding:9px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:.82rem;
  font-weight:700;
  transition:border-color .25s ease,background .25s ease;
}
.welcome-code-copy:hover{border-color:var(--border-hi);background:rgba(255,255,255,.09)}
.welcome-btn{width:100%;padding:14px;margin-bottom:12px;font-size:1rem}
.welcome-skip{
  border:0;background:none;padding:0;
  font-size:.85rem;
  color:var(--text-muted);
  font-weight:500;
}
.welcome-skip:hover{color:var(--text)}

/* -------------------------------------------------------------
   20. MODALS (crypto + policy)
   ------------------------------------------------------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:1900;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(4,3,8,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.modal{
  position:relative;
  width:100%;
  max-width:480px;
  max-height:86vh;
  overflow-y:auto;
  padding:32px 28px 26px;
  border:1px solid var(--border-hi);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,#15121f 0%,#0d0c13 70%);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  text-align:left;
}
.modal-close{
  position:absolute;
  top:14px;right:14px;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  font-size:1.15rem;
  transition:color .2s ease,background .2s ease;
}
.modal-close:hover{color:var(--text);background:rgba(255,255,255,.06)}
.modal-title{
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-0.02em;
  margin-bottom:8px;
  color:var(--text);
}
.modal-sub{margin:0 0 20px;font-size:.92rem;max-width:none}

/* Crypto list */
.crypto-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:20px;
}
.crypto-row{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  padding:14px 16px;
  transition:border-color .25s ease;
}
.crypto-row:hover{border-color:var(--border-hi)}
.crypto-row-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.crypto-coin{
  display:flex;
  flex-direction:column;
  font-size:.98rem;
  font-weight:700;
  color:var(--text);
}
.crypto-coin small{
  font-size:.72rem;
  font-weight:500;
  color:var(--text-muted);
  letter-spacing:.02em;
}
.crypto-copy{
  flex:0 0 auto;
  padding:7px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:.78rem;
  font-weight:700;
  transition:border-color .25s ease,background .25s ease;
}
.crypto-copy:hover{border-color:var(--a-peri);background:rgba(201,184,255,.10)}
.crypto-addr{
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--text-muted);
  word-break:break-all;
  line-height:1.5;
}
.crypto-empty{
  padding:20px;
  text-align:center;
  color:var(--text-muted);
  font-size:.9rem;
}
.pay-btn-card{width:100%;padding:14px;margin-bottom:14px;font-size:1rem}
.co-fineprint{
  font-size:.76rem;
  color:var(--text-dim);
  text-align:center;
  line-height:1.5;
}

/* Policy modal */
.policy-modal{max-width:600px}
.policy-body{
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.7;
}
.policy-body h1,.policy-body h2,.policy-body h3{
  color:var(--text);
  margin:18px 0 8px;
  letter-spacing:-0.01em;
}
.policy-body h1{font-size:1.2rem}
.policy-body h2{font-size:1.05rem}
.policy-body h3{font-size:.98rem}
.policy-body p{margin-bottom:12px}
.policy-body ul{list-style:disc;padding-left:20px;margin-bottom:12px}
.policy-body li{margin-bottom:6px}
.policy-body a{color:var(--a-peri)}

/* -------------------------------------------------------------
   21. TOAST
   ------------------------------------------------------------- */
.toast{
  position:fixed;
  bottom:24px;left:50%;
  transform:translateX(-50%);
  z-index:2200;
  padding:13px 22px;
  border-radius:var(--radius);
  background:rgba(20,17,30,.96);
  border:1px solid rgba(201,184,255,.3);
  color:var(--text);
  font-size:.9rem;
  font-weight:600;
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(201,184,255,.1) inset;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* -------------------------------------------------------------
   22. RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width:860px){
  .tier-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
  .why-grid{grid-template-columns:1fr}
  .step-arrow{transform:rotate(90deg)}
  .steps{flex-direction:column;align-items:center}
  .step{max-width:100%;width:100%}
}

@media (max-width:760px){
  section,.page-section{padding:52px 20px}
  .hero{padding:calc(var(--banner-h) + 110px) 20px 60px}
  .nav-links{display:none}
  .nav-inner{justify-content:space-between}
  .hero-stats{gap:20px}
  .hero-stat-div{display:none}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-btn,.hero-ghost{width:100%}
  .sister-slab{padding:36px 22px}
  .modal,.welcome-card{padding:28px 22px}
  .announce-bar{font-size:.76rem;gap:8px;padding:6px 40px 6px 14px}
}

@media (max-width:460px){
  .tier-price{font-size:2.5rem}
  .hero-headline{font-size:clamp(2rem,10vw,2.6rem)}
  .welcome-code-chip{flex-wrap:wrap}
}

/* -------------------------------------------------------------
   23. ACCESSIBILITY
   ------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}
:focus-visible{outline:2px solid var(--a-peri);outline-offset:2px}