.bouncy{
 animation:bouncy 5s infinite linear;
 position:relative;
}
@keyframes bouncy {
 0%{top:0em}
 40%{top:0em}
 43%{top:-0.9em}
 46%{top:0em}
 48%{top:-0.4em}
 50%{top:0em}
 100%{top:0em;}
}

a.button2{
 display:inline-block;
 padding:0.5em 3em;
 border:0.16em solid #FFFFFF;
 margin:0 0.3em 0.3em 0;
 box-sizing: border-box;
 text-decoration:none;
 text-transform:uppercase;
 font-family:'Roboto',sans-serif;
 font-weight:400;
 color:#FFFFFF;
 text-align:center;
 transition: all 0.15s;
}
a.button2:hover{
 color:#DDDDDD;
 border-color:#DDDDDD;
}
a.button2:active{
 color:#BBBBBB;
 border-color:#BBBBBB;
}
@media all and (max-width:30em){
 a.button2{
  display:block;
  margin:0.4em auto;
 }
}

/* === MASI HOMEPAGE === */
.masi-home { font-family: 'Segoe UI', Roboto, sans-serif; color: #e8f4ff; max-width: 1100px; margin: 0 auto; }
.masi-home * { box-sizing: border-box; }

.masi-hero {
  position: relative; padding: 60px 40px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, rgba(10,25,50,.95) 0%, rgba(40,15,70,.95) 100%);
  border: 1px solid rgba(0,229,255,.25);
  box-shadow: 0 0 60px rgba(255,0,200,.15), inset 0 0 80px rgba(0,229,255,.1);
  text-align: center;
}
.masi-hero::before {
  content:''; position:absolute; inset:-2px; border-radius:18px; pointer-events:none;
  background: radial-gradient(circle at 20% 20%, rgba(0,229,255,.15), transparent 40%),
              radial-gradient(circle at 80% 80%, rgba(255,0,200,.15), transparent 40%);
}
.masi-hero h1 {
  font-size: 48px; margin: 0 0 14px; line-height: 1.1; font-weight: 800;
  background: linear-gradient(90deg, #00e5ff, #ff00c8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: #00e5ff;
}
.masi-hero p { font-size: 18px; color: #b8cce0; margin: 0 auto 28px; max-width: 620px; line-height: 1.5; }
.masi-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.masi-btn { display: inline-block; padding: 14px 28px; border-radius: 10px; font-weight: 700;
  text-decoration: none; transition: all .25s ease; font-size: 15px; letter-spacing: .5px; }
.masi-btn-primary { background: linear-gradient(135deg, #00e5ff, #00b3cc); color: #001a26 !important;
  box-shadow: 0 4px 20px rgba(0,229,255,.4); }
.masi-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,229,255,.6); color: #001a26 !important; }
.masi-btn-secondary { background: rgba(255,255,255,.08); color: #fff !important; border: 1px solid rgba(255,255,255,.2); }
.masi-btn-secondary:hover { background: rgba(255,0,200,.15); border-color: #ff00c8; transform: translateY(-2px); color: #fff !important; }

.masi-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 30px 0;
  background: rgba(0,229,255,.15); border-radius: 12px; overflow: hidden; }
.masi-stat { padding: 20px; text-align: center; background: #0a1932; }
.masi-stat-num { font-size: 28px; font-weight: 800; color: #00e5ff; display: block; }
.masi-stat-lbl { font-size: 12px; color: #7a8ca0; text-transform: uppercase; letter-spacing: 1.5px; }

.masi-section-title { font-size: 28px; margin: 40px 0 20px; color: #fff !important;
  border-left: 4px solid #ff00c8; padding-left: 14px; }

.masi-sub { margin-top: 30px; padding: 36px; border-radius: 16px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2a0a40 0%, #0a2040 100%);
  box-shadow: 0 0 40px rgba(255,0,200,.2); }
.masi-sub-inner { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: center; }
.masi-sub-badge { display: inline-block; padding: 4px 12px; border-radius: 6px;
  background: #ff00c8; color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: 2px; margin-bottom: 12px; }
.masi-sub h2 { margin: 0 0 10px; font-size: 30px; color: #fff !important; }
.masi-sub p { color: #b8cce0; margin: 0; }
.masi-sub-perks { list-style: none; padding: 0; margin: 14px 0 0; color: #cdd9e6; font-size: 14px; }
.masi-sub-perks li { padding: 5px 0 5px 26px; position: relative; }
.masi-sub-perks li::before { content: '✓'; position: absolute; left: 0; color: #00e5ff; font-weight: 800; }
.masi-sub-cta { text-align: center; padding: 24px; background: rgba(0,0,0,.3);
  border-radius: 12px; border: 1px solid rgba(0,229,255,.2); }
.masi-sub-cta .pricelbl { font-size: 11px; color: #7a8ca0; letter-spacing: 2px; text-transform: uppercase; display: block; }
.masi-sub-cta .price { font-size: 36px; font-weight: 800; color: #00e5ff; display: block; margin: 6px 0 16px; }

/* Community wrapped panel */
.masi-community-wrap {
  margin-top: 30px;
  padding: 36px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0a2040 0%, #2a0a40 100%);
  box-shadow: 0 0 40px rgba(0,229,255,.12);
}
.masi-community-wrap .masi-section-title { margin: 0 0 24px; }
.masi-community { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.masi-comm-card { position: relative; padding: 28px; border-radius: 14px; text-align: center;
  border: 1px solid rgba(255,255,255,.1); transition: all .3s ease; }
.masi-comm-link { position: absolute; inset: 0; z-index: 1; text-decoration: none; border-radius: 14px; }
.masi-comm-card:hover { transform: translateY(-3px); }
.masi-discord { background: linear-gradient(135deg, #5865F2, #404aae); }
.masi-discord:hover { box-shadow: 0 10px 30px rgba(88,101,242,.4); }
.masi-yt { background: linear-gradient(135deg, #ff0033, #b30022); }
.masi-yt:hover { box-shadow: 0 10px 30px rgba(255,0,51,.4); }
.masi-comm-card h3 { margin: 0 0 6px; font-size: 22px; color: #fff !important; }
.masi-comm-card p { margin: 0; opacity: .85; font-size: 14px; color: #fff; }

@media (max-width: 760px) {
  .masi-hero h1 { font-size: 32px; }
  .masi-stats { grid-template-columns: 1fr 1fr; }
  .masi-sub-inner, .masi-community { grid-template-columns: 1fr; }
}

/* Strip Tebex card chrome on homepage */
.bg-light:has(.masi-home) {
  background: transparent !important;
  box-shadow: none !important;
}
.bg-light:has(.masi-home) > h1,
.bg-light:has(.masi-home) > h2,
.bg-light:has(.masi-home) > .h1,
.bg-light:has(.masi-home) > .h2,
.bg-light:has(.masi-home) > .page-title {
  display: none !important;
}

/* Show body background image through */
.body-mask {
  background-color: #0E7C86;  /* solid teal */
  position: absolute;
  z-index: 1;
  opacity: 0.8;               /* already 80% opaque */
  height: 100%;
  width: 100%; }
}