@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,800,900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#050507;
  --surface:rgba(255,255,255,.045);
  --surface2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.09);
  --border-h:rgba(255,255,255,.16);
  --accent:#b8a5e8;
  --accent-dim:rgba(184,165,232,.08);
  --accent-h:#a08ad8;
  --blurple:#5865f2;
  --green:#3ba55c;
  --red:#ed4245;
  --text:#e4e4ef;
  --text-h:#ffffff;
  --muted:#5e5e72;
  --radius:18px;
  --radius-sm:12px;
  --radius-pill:100px;
  --max-w:1080px;
  --font:'Satoshi',system-ui,-apple-system,sans-serif;
  --font-display:'Satoshi',system-ui,-apple-system,sans-serif;
  --glass-bg:rgba(255,255,255,.055);
  --glass-border:rgba(255,255,255,.13);
  --glass-shine:rgba(255,255,255,.09);
  --glass-blur:blur(22px) saturate(160%);
  --glass-shadow:0 8px 32px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.07) inset,0 -1px 0 rgba(0,0,0,.25) inset;
  --glass-glow:0 0 0 1px rgba(184,165,232,.12);
}

html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,textarea,select{font:inherit}
button{touch-action:manipulation}

/* ── Animated liquid background ── */
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

body::before{
  content:'';
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:-2;
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(184,165,232,.11) 0%, transparent 65%),
    radial-gradient(ellipse 55% 40% at 85% 15%, rgba(120,100,220,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 70% 80%, rgba(160,130,255,.07) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 30% 75%, rgba(88,101,242,.06) 0%, transparent 55%),
    linear-gradient(160deg,#08080f 0%,#050507 55%,#020204 100%);
  animation:liquidBg 20s ease-in-out infinite alternate;
}
@keyframes liquidBg{
  0%  {background-position:0% 0%,100% 0%,80% 90%,10% 80%,0% 0%;filter:blur(0)}
  33% {background-position:5% 8%,95% 5%,75% 85%,15% 75%,0% 0%}
  66% {background-position:2% 15%,92% 12%,82% 78%,8% 88%,0% 0%}
  100%{background-position:8% 5%,97% 8%,77% 92%,12% 82%,0% 0%}
}

body::after{
  content:'';
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:-2;
  background:
    radial-gradient(circle 500px at 20% 30%,rgba(184,165,232,.05) 0%,transparent 70%),
    radial-gradient(circle 400px at 80% 70%,rgba(100,90,200,.04) 0%,transparent 70%);
  animation:liquidBlobShift 26s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes liquidBlobShift{
  0%  {transform:translateY(0) scale(1)}
  50% {transform:translateY(-30px) scale(1.04)}
  100%{transform:translateY(20px) scale(.97)}
}

#starfield{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:hidden;opacity:.55}
#starfield canvas{width:100%;height:100%}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--max-w);margin:0 auto;padding:0 24px}

/* ════════════════════════════════════════
   LIQUID GLASS BUTTONS
   ════════════════════════════════════════ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 22px;
  border-radius:var(--radius-pill);
  font-size:.84rem;
  font-weight:600;
  cursor:pointer;
  text-decoration:none!important;
  transition:all .22s cubic-bezier(.4,0,.2,1);
  border:1px solid var(--glass-border);
  font-family:var(--font);
  line-height:1.4;
  background:var(--glass-bg);
  color:var(--text);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow),var(--glass-glow);
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 40%,transparent 65%);
  border-radius:inherit;
  pointer-events:none;
  transition:opacity .22s;
}
.btn:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.09);
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.1) inset,0 -1px 0 rgba(0,0,0,.25) inset;
  transform:translateY(-1px);
}
.btn-primary{
  background:rgba(184,165,232,.1);
  color:var(--accent);
  border-color:rgba(184,165,232,.22);
  box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 24px rgba(184,165,232,.08),0 1px 0 rgba(255,255,255,.1) inset;
}
.btn-primary:hover{
  background:rgba(184,165,232,.17);
  border-color:rgba(184,165,232,.35);
  box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 40px rgba(184,165,232,.18),0 1px 0 rgba(255,255,255,.12) inset;
}
.btn-ghost{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.1);
  color:var(--text);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
}
.btn-discord{
  background:rgba(88,101,242,.1);
  color:#8b9cf7;
  border-color:rgba(88,101,242,.2);
  box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 24px rgba(88,101,242,.08),0 1px 0 rgba(255,255,255,.08) inset;
}
.btn-discord:hover{
  background:rgba(88,101,242,.17);
  border-color:rgba(88,101,242,.35);
  box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 36px rgba(88,101,242,.18),0 1px 0 rgba(255,255,255,.1) inset;
}
.btn-blurple{background:rgba(88,101,242,.1);color:#8b9cf7;border-color:rgba(88,101,242,.2)}
.btn-blurple:hover{background:rgba(88,101,242,.17);border-color:rgba(88,101,242,.35)}
.btn-sm{padding:7px 16px;font-size:.78rem}
.btn-lg{padding:13px 30px;font-size:.88rem}
.btn-group,.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ════════════════════════════════════════
   GLASS BADGE / TAG
   ════════════════════════════════════════ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:500;
  color:var(--text);
  padding:6px 14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.72rem;
  font-weight:500;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--glass-bg);
  color:var(--text);
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}

/* ════════════════════════════════════════
   LAYOUT HELPERS
   ════════════════════════════════════════ */
.section{padding:100px 24px}
.section-sm{padding:60px 24px}
.sec-label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sec-title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:14px;color:var(--text-h)}
.sec-title .hl{color:var(--accent)}
.sec-desc{font-size:.9rem;color:var(--muted);max-width:480px;line-height:1.7}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
@media(max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}}
.grid-auto{min-width:0}

.divider{height:1px;background:var(--border);margin:0}

/* Responsive guardrails for long content, tables, and compact screens. */
pre,code{overflow-wrap:anywhere}
table{max-width:100%}
.table-wrap,.overflow-x-auto{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ════════════════════════════════════════
   LIQUID GLASS CARDS
   ════════════════════════════════════════ */
.card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:28px;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  transition:border-color .2s,box-shadow .2s,transform .2s;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 30%,rgba(255,255,255,.14) 70%,transparent);
  pointer-events:none;
}
.card::after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:55%;
  background:linear-gradient(180deg,rgba(255,255,255,.045) 0%,transparent 100%);
  pointer-events:none;
  border-radius:var(--radius) var(--radius) 0 0;
}
.card:hover{
  border-color:rgba(255,255,255,.2);
  box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 28px rgba(184,165,232,.06),0 1px 0 rgba(255,255,255,.1) inset;
  transform:translateY(-2px);
}
.card .ci{font-size:1.2rem;margin-bottom:10px;position:relative;z-index:1}
.card h3{font-family:var(--font-display);font-size:.9rem;font-weight:800;letter-spacing:-.01em;margin-bottom:6px;color:var(--text-h);position:relative;z-index:1}
.card p{font-size:.82rem;color:var(--muted);line-height:1.6;margin-bottom:0;position:relative;z-index:1}

.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;align-items:start}
@media(max-width:700px){.split{grid-template-columns:1fr}}
.split-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:24px;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  position:relative;
  overflow:hidden;
}
.split-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 40%,rgba(255,255,255,.14) 60%,transparent);
  pointer-events:none;
}
.split-card h3{font-family:var(--font-display);font-size:.95rem;font-weight:800;letter-spacing:-.01em;margin-bottom:8px;display:flex;align-items:center;gap:8px;color:var(--text-h);position:relative;z-index:1}
.split-card p{font-size:.82rem;color:var(--muted);line-height:1.65;margin-bottom:8px;position:relative;z-index:1}
.split-card ul{padding-left:16px;display:flex;flex-direction:column;gap:4px;position:relative;z-index:1}
.split-card li{font-size:.8rem;color:var(--muted)}

.callout{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  margin-top:16px;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
}
.callout p{font-size:.82rem;color:var(--muted);line-height:1.6;margin:0}
.callout strong{color:var(--text)}

/* ════════════════════════════════════════
   FOOTER — liquid glass surface
   ════════════════════════════════════════ */
footer.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:40px 24px 28px;
  background:rgba(255,255,255,.025);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  position:relative;
}
footer.site-footer::before{
  content:'';
  position:absolute;
  top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(184,165,232,.18) 40%,rgba(184,165,232,.18) 60%,transparent);
}
.footer-grid{display:flex;align-items:flex-start;gap:80px;max-width:var(--max-w);margin:0 auto}
@media(max-width:600px){.footer-grid{flex-direction:column;gap:28px}}
.footer-brand{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.footer-brand .logo{display:inline-flex;align-items:center;gap:8px;font-size:1rem;font-weight:700;color:var(--text-h);text-decoration:none}
.footer-brand .logo-dot{
  width:28px;height:28px;
  background:rgba(184,165,232,.1);
  border:1px solid rgba(184,165,232,.18);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 0 12px rgba(184,165,232,.1) inset;
}
footer.site-footer a[href="/"]:has(> span > svg polygon[points^="13 2 3 14"]){display:none!important}
.footer-col-title{font-size:.76rem;font-weight:600;color:var(--text-h);margin-bottom:10px}
.footer-links{display:flex;flex-direction:column;gap:7px}
.footer-links a{font-size:.82rem;color:var(--muted);text-decoration:none;transition:color .15s}
.footer-links a:hover{color:var(--text)}
.footer-bottom{margin-top:32px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);font-size:.74rem;color:var(--muted);max-width:var(--max-w);margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:space-between}

/* ════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════ */
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in-view{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}
.reveal[data-d="4"]{transition-delay:.24s}

/* ════════════════════════════════════════
   TABLES
   ════════════════════════════════════════ */
.cmd-table{width:100%;border-collapse:collapse;font-size:.82rem}
.cmd-table th{
  text-align:left;padding:10px 14px;
  background:rgba(255,255,255,.04);
  font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.cmd-table td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}
.cmd-table td:first-child{font-family:'Courier New',monospace;color:var(--accent);white-space:nowrap;font-size:.8rem}
.cmd-table td:last-child{color:var(--muted)}

/* ════════════════════════════════════════
   FORM INPUTS — glass
   ════════════════════════════════════════ */
input,textarea,select{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  color:var(--text);
  padding:10px 14px;
  font-size:.85rem;
  font-family:var(--font);
  outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 2px 8px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.05) inset;
}
input:focus,textarea:focus,select:focus{
  border-color:rgba(184,165,232,.4);
  background:rgba(255,255,255,.07);
  box-shadow:0 2px 8px rgba(0,0,0,.25),0 0 0 3px rgba(184,165,232,.08),0 1px 0 rgba(255,255,255,.07) inset;
}
textarea{resize:vertical;min-height:100px}
input::placeholder,textarea::placeholder{color:var(--muted)}
label{font-size:.76rem;font-weight:600;color:var(--muted);display:block;margin-bottom:4px}

/* ════════════════════════════════════════
   HERO / FEATURE-HERO
   ════════════════════════════════════════ */
.hero{padding:100px 24px 80px;text-align:center;position:relative}
.hero .icon{font-size:2rem;margin-bottom:14px}
.hero .label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.hero h1{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;letter-spacing:-.02em;line-height:1.15;margin-bottom:14px;color:var(--text-h)}
.hero>p{font-size:.92rem;color:var(--muted);max-width:480px;margin:0 auto 24px;line-height:1.7}

.feature-hero{padding:100px 24px 80px;text-align:center;position:relative}
.feature-hero .icon{font-size:2rem;margin-bottom:14px}
.feature-hero h1{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;letter-spacing:-.02em;line-height:1.15;margin-bottom:14px;color:var(--text-h)}
.feature-hero>p{font-size:.92rem;color:var(--muted);max-width:480px;margin:0 auto 28px;line-height:1.7}

/* ════════════════════════════════════════
   CTA BOX — glass
   ════════════════════════════════════════ */
.cta-box{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:44px;
  text-align:center;
  margin:80px auto;
  max-width:560px;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  position:relative;
  overflow:hidden;
}
.cta-box::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(184,165,232,.2) 40%,rgba(184,165,232,.2) 60%,transparent);
}
.cta-box::after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%);
  pointer-events:none;
}
.cta-box h3{font-family:var(--font-display);font-size:1.1rem;font-weight:800;margin-bottom:8px;color:var(--text-h);position:relative;z-index:1}
.cta-box p{font-size:.88rem;color:var(--muted);max-width:380px;margin:0 auto 18px;line-height:1.6;position:relative;z-index:1}

/* ════════════════════════════════════════
   DISCORD SIDEBAR MOCK
   ════════════════════════════════════════ */
.sidebar-mock{
  background:rgba(255,255,255,.04);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:16px;
  margin-top:20px;
  max-width:260px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--glass-shadow);
}
.sm-title{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.sm-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:500;color:var(--muted);cursor:default}
.sm-item.active{background:rgba(184,165,232,.09);color:var(--accent);box-shadow:0 0 0 1px rgba(184,165,232,.14) inset}
.sm-icon{font-size:.85rem;flex-shrink:0}

.mock-embed{
  background:rgba(14,14,14,.7);
  border-radius:8px;
  border-left:3px solid var(--accent);
  padding:14px 16px;
  margin-top:18px;
  max-width:440px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.me-author{font-size:.7rem;font-weight:600;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:5px}
.me-author span{width:14px;height:14px;border-radius:50%;background:var(--accent);display:inline-block}
.me-title{font-size:.84rem;font-weight:700;color:var(--accent);margin-bottom:4px}
.me-desc{font-size:.78rem;color:var(--text);line-height:1.5;margin-bottom:6px}
.me-field{margin-bottom:5px}
.me-field-name{font-size:.7rem;font-weight:700;color:var(--text)}
.me-field-val{font-size:.74rem;color:var(--muted)}
.me-footer{font-size:.66rem;color:var(--muted);margin-top:6px;padding-top:5px;border-top:1px solid rgba(255,255,255,.06)}

/* ════════════════════════════════════════
   FLOW STEPS
   ════════════════════════════════════════ */
.flow{display:flex;flex-direction:column;gap:14px;margin-top:20px;max-width:520px}
.flow-step{display:flex;gap:12px;align-items:flex-start}
.flow-num{
  width:26px;height:26px;
  border-radius:50%;
  background:rgba(184,165,232,.08);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;
  flex-shrink:0;
  border:1px solid rgba(184,165,232,.15);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 10px rgba(184,165,232,.08) inset;
}
.flow-body h4{font-size:.86rem;font-weight:700;color:var(--text-h);margin-bottom:2px}
.flow-body p{font-size:.8rem;color:var(--muted);line-height:1.6;margin-bottom:0}

/* ════════════════════════════════════════
   SECTION BLOCKS
   ════════════════════════════════════════ */
.section-block{padding:56px 0;border-top:1px solid rgba(255,255,255,.06)}
.section-block .label{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.section-block h2{font-family:var(--font-display);font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:800;margin-bottom:14px;color:var(--text-h)}
.section-block p{font-size:.88rem;color:var(--muted);margin-bottom:12px;max-width:560px;line-height:1.7}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:24px}

/* ════════════════════════════════════════
   GLOBAL GLASS UTILITY
   ════════════════════════════════════════ */
.glass{
  background:var(--glass-bg)!important;
  border:1px solid var(--glass-border)!important;
  backdrop-filter:var(--glass-blur)!important;
  -webkit-backdrop-filter:var(--glass-blur)!important;
  box-shadow:var(--glass-shadow)!important;
}

/* ════════════════════════════════════════
   CATCH-ALL GLASS — covers every page-level
   surface identified across all HTML files
   ════════════════════════════════════════ */
.b-card,.f-card,.loved-card,.cta-card,.support-card,.feat-card,.compat-card,
.tier-card,.mission-card,.pillar,.perk,.req-card,.scope-card,.what-card,
.apply-form,.value-item,.rule-item,.ask-banner,.stack-pill,.contact-opt,
.opsec-submit,.reward-table,.search-bar,.steps-wrap,.pricing-wrap,
.faq-item,.resource-panel,.scroll-top {
  backdrop-filter:var(--glass-blur)!important;
  -webkit-backdrop-filter:var(--glass-blur)!important;
}

/* section-level glass bands */
.scope,.who,.roles,.timeline-section {
  backdrop-filter:blur(14px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%)!important;
}

/* Override --surface to glass value everywhere else */
:root{
  --surface:rgba(255,255,255,.052);
  --surface2:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.09);
  --border-h:rgba(255,255,255,.16);
}

/* ════════════════════════════════════════
   NOISE / GRAIN TEXTURE — frosted glass feel
   ════════════════════════════════════════ */
.card,.split-card,.cta-box,.callout,.modal-box,
.b-card,.f-card,.loved-card,.cta-card,.support-card,.feat-card,
.tier-card,.mission-card,.pillar,.perk,.req-card,.scope-card,
.faq-item,.resource-panel,.apply-form,.contact-opt,.sidebar-mock {
  isolation: isolate;
}
.card::after,.split-card::after,.cta-box::after {
  background:
    linear-gradient(180deg,rgba(255,255,255,.045) 0%,transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .045;
}

/* ════════════════════════════════════════
   SHIMMER SWEEP — light glide on hover
   ════════════════════════════════════════ */
@keyframes glass-shimmer{
  0%  { transform:translateX(-120%) skewX(-18deg); opacity:0 }
  8%  { opacity:1 }
  92% { opacity:1 }
  100%{ transform:translateX(220%) skewX(-18deg); opacity:0 }
}
.card,.split-card,.cta-box,
.b-card,.f-card,.loved-card,.cta-card,.feat-card,.tier-card,.pillar,.perk {
  overflow:hidden;
}
.card:hover::before,.split-card:hover::before {
  animation:glass-shimmer .7s cubic-bezier(.4,0,.2,1) forwards;
  background:linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,.13) 50%,
    rgba(184,165,232,.09) 55%,
    transparent 65%
  ) !important;
  width:60% !important;
  height:100% !important;
  top:0 !important; left:0 !important;
  border-radius:0 !important;
}

/* ════════════════════════════════════════
   PRISM / IRIDESCENT BORDER — accent glow
   ════════════════════════════════════════ */
.card:hover,.split-card:hover,.cta-box:hover {
  border-color: transparent !important;
  background-image: linear-gradient(var(--glass-bg),var(--glass-bg)),
    linear-gradient(135deg,
      rgba(184,165,232,.35) 0%,
      rgba(120,100,240,.22) 25%,
      rgba(255,255,255,.18) 50%,
      rgba(100,140,255,.18) 75%,
      rgba(184,165,232,.28) 100%
    ) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

/* ════════════════════════════════════════
   CAUSTIC LIGHT SPOT — inner specular dot
   ════════════════════════════════════════ */
.card,.split-card {
  background-image:
    radial-gradient(ellipse 55% 30% at 20% 10%, rgba(255,255,255,.06) 0%, transparent 70%),
    linear-gradient(var(--glass-bg),var(--glass-bg));
  background-clip: padding-box;
}

/* ════════════════════════════════════════
   RICHER AMBIENT BACKGROUND ORBS
   ════════════════════════════════════════ */
body::before{
  background:
    radial-gradient(ellipse 80% 55% at 12% 18%, rgba(184,165,232,.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 88% 12%, rgba(120,100,220,.10) 0%, transparent 58%),
    radial-gradient(ellipse 65% 60% at 72% 82%, rgba(160,130,255,.09) 0%, transparent 62%),
    radial-gradient(ellipse 50% 38% at 28% 78%, rgba(88,101,242,.08) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 55% 45%, rgba(200,180,255,.05) 0%, transparent 60%),
    linear-gradient(160deg,#08080f 0%,#050507 55%,#020204 100%);
  animation:liquidBg 22s ease-in-out infinite alternate;
}

/* ════════════════════════════════════════
   FLOATING GLASS ORBS — decorative
   ════════════════════════════════════════ */
.glass-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(48px);
  animation:orb-drift 18s ease-in-out infinite alternate;
  z-index:0;
}
.glass-orb-1{
  width:320px; height:320px;
  background:radial-gradient(circle, rgba(184,165,232,.12) 0%, transparent 70%);
  top:-80px; right:10%;
  animation-duration:22s;
}
.glass-orb-2{
  width:220px; height:220px;
  background:radial-gradient(circle, rgba(100,90,240,.09) 0%, transparent 70%);
  bottom:10%; left:5%;
  animation-duration:17s; animation-delay:-6s;
}
.glass-orb-3{
  width:180px; height:180px;
  background:radial-gradient(circle, rgba(255,200,150,.06) 0%, transparent 70%);
  top:40%; right:2%;
  animation-duration:25s; animation-delay:-11s;
}
@keyframes orb-drift{
  0%  { transform:translate(0,0) scale(1) }
  33% { transform:translate(18px,-22px) scale(1.06) }
  66% { transform:translate(-12px,16px) scale(.94) }
  100%{ transform:translate(10px,-8px) scale(1.03) }
}

/* ════════════════════════════════════════
   LIQUID GLASS PILL INPUTS — focus glow
   ════════════════════════════════════════ */
input:focus,textarea:focus,select:focus{
  border-color:rgba(184,165,232,.45);
  background:rgba(255,255,255,.08);
  box-shadow:
    0 2px 8px rgba(0,0,0,.28),
    0 0 0 3px rgba(184,165,232,.10),
    0 0 20px rgba(184,165,232,.08),
    0 1px 0 rgba(255,255,255,.09) inset;
}

/* ════════════════════════════════════════
   NAV SCROLL DEPTH — deeper glass on scroll
   ════════════════════════════════════════ */
nav.poorbar.scrolled{
  background:rgba(5,5,8,.75) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 6px 32px rgba(0,0,0,.55),
    0 0 0 1px rgba(184,165,232,.06) !important;
}

/* ════════════════════════════════════════
   GLASS BUTTON — shimmer on click
   ════════════════════════════════════════ */
@keyframes btn-click-ripple{
  0%  { transform:scale(0); opacity:.4 }
  100%{ transform:scale(2.5); opacity:0 }
}

@media(max-width:640px){
  .wrap{padding-left:16px;padding-right:16px}
  .section{padding:72px 16px}
  .section-sm{padding:44px 16px}
  .btn{min-height:44px;padding-left:18px;padding-right:18px}
  .btn-lg{width:100%;justify-content:center}
  .btn-group,.btn-row{width:100%}
  .btn-group>.btn,.btn-row>.btn{flex:1 1 180px;justify-content:center}
  .card{padding:20px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.btn:active::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle, rgba(255,255,255,.25) 0%, transparent 65%);
  animation:btn-click-ripple .4s ease-out forwards;
  pointer-events:none;
}

/* ════════════════════════════════════════
   SECTION DIVIDER — glass gradient line
   ════════════════════════════════════════ */
.glass-divider{
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(184,165,232,.18) 25%,
    rgba(255,255,255,.12) 50%,
    rgba(184,165,232,.18) 75%,
    transparent 100%
  );
  margin:0;
  border:none;
}

/* ════════════════════════════════════════
   FROSTED HERO BADGE — more liquid
   ════════════════════════════════════════ */
.lp-badge,.badge{
  background:
    linear-gradient(135deg, rgba(184,165,232,.18) 0%, rgba(184,165,232,.08) 100%) !important;
  border-color:rgba(184,165,232,.32) !important;
  box-shadow:
    0 0 0 1px rgba(184,165,232,.10) inset,
    0 2px 12px rgba(184,165,232,.12),
    0 1px 0 rgba(255,255,255,.1) inset !important;
  backdrop-filter:blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(160%) !important;
}

/* Keep section headings direct; hide decorative micro-labels. */
.label,
.sec-label,
.section-label,
.lp-section-label,
.premium-benefits-label,
.preview-overline,
.hero-label,
.checkout-kicker,
.two-kicker,
.two-price-kicker,
.forum-kicker{
  display:none !important;
}