/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #0d0d0f; color: #f2f2f2; font-family: 'Inter', sans-serif; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* GLOBAL */
body { line-height: 1.5; }
.eb-page-wrap { position: relative; z-index: 1; padding-bottom: 80px; }

/* BACKGROUND EFFECTS */
#eb-particles-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#eb-haze-main { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 20%, rgba(255,110,196,0.25), transparent 70%); z-index: 1; pointer-events: none; }
#eb-haze-side { position: fixed; right: 0; top: 0; width: 40%; height: 100%; background: radial-gradient(circle at 80% 50%, rgba(74,222,222,0.25), transparent 70%); z-index: 1; pointer-events: none; }

/* HERO */
.eb-hero-mascot-wrap { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1.4fr); gap: 40px; padding: 120px 20px 80px; max-width: 1200px; margin: 0 auto; align-items: center; position: relative; z-index: 5; }
.eb-hero-mascot-col { text-align: center; position: relative; }
.eb-hero-mascot-img { width: 260px; max-width: 80%; filter: drop-shadow(0 0 25px #4adede); }
.eb-hero-speech { position: absolute; right: -10px; top: 10px; background: #111; border-radius: 18px; padding: 10px 16px; border: 1px solid #4adede; box-shadow: 0 0 15px rgba(74,222,222,0.4); max-width: 180px; }
.eb-hero-speech p { font-size: 13px; line-height: 1.4; }
.eb-hero-speech span { font-weight: 700; color: #7eff9b; }
.eb-hero-text-col { text-align: left; }
.eb-hero-main-title { font-size: 46px; line-height: 1.1; margin-bottom: 12px; text-shadow: 0 0 15px #ff6ec4, 0 0 25px #4adede; }
.eb-hero-main-sub { font-size: 17px; opacity: 0.9; margin-bottom: 24px; }
.eb-hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.eb-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.eb-hero-tags span { font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }

/* BUTTONS */
.eb-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer; border: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.eb-btn-primary { background: linear-gradient(90deg,#ff6ec4,#7873f5,#4adede,#7eff9b,#fffb7d); color: #0d0d0f; box-shadow: 0 0 20px rgba(126,255,155,0.4); }
.eb-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(126,255,155,0.6); }
.eb-btn-ghost { background: rgba(17,17,17,0.8); color: #f2f2f2; border: 1px solid #4adede; box-shadow: 0 0 12px rgba(74,222,222,0.3); }
.eb-btn-ghost:hover { transform: translateY(-2px); background: rgba(17,17,17,1); }

/* PANELS */
.eb-panel { max-width: 1200px; margin: 0 auto; padding: 70px 20px 60px; position: relative; z-index: 5; }
.eb-panel-curve-top::before { content: ""; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 70%; height: 40px; border-radius: 50%; background: radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 70%); opacity: 0.7; }
.eb-panel-alt { background: rgba(10,10,12,0.9); border-radius: 24px; box-shadow: 0 0 30px rgba(0,0,0,0.7); }
.eb-panel-title { font-size: 30px; text-align: center; margin-bottom: 8px; text-shadow: 0 0 15px #4adede; }
.eb-panel-sub { text-align: center; opacity: 0.85; margin-bottom: 30px; }

/* BUBBLE CARDS */
.eb-bubble-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 18px; margin-top: 10px; }
.eb-bubble-card { background: #111; border-radius: 20px; padding: 24px 18px; text-align: left; box-shadow: 0 0 18px rgba(0,247,255,0.25); border: 1px solid rgba(255,255,255,0.08); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.eb-bubble-card:hover { transform: translateY(-4px); box-shadow: 0 0 24px rgba(74,222,222,0.5); border-color: #4adede; }

/* PRODUCT GRID */
.eb-product-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 20px; }

/* MASCOT CALLOUT */
.eb-mascot-callout-inner { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 30px; align-items: center; }
.eb-mascot-callout-bubble { background: #111; border-radius: 24px; padding: 20px 18px; border: 1px solid #ff6ec4; box-shadow: 0 0 20px rgba(255,110,196,0.5); text-align: center; }

/* COMMUNITY */
.eb-community-row { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1.2fr); gap: 24px; align-items: center; }

/* FOOTER */
.eb-footer { background: #0d0d0f; padding: 40px 20px; border-top: 1px solid #111; margin-top: 60px; position: relative; z-index: 99999; }
.eb-footer-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.eb-footer-logo { margin-bottom: 20px; filter: drop-shadow(0 0 8px #00f7ff); }
.eb-footer-nav-list { display: flex; justify-content: center; gap: 25px; list-style: none; padding: 0; }
.eb-footer-nav-list a { color: #ccc; font-size: 14px; transition: color 0.2s ease; }
.eb-footer-nav-list a:hover { color: #4adede; }
.eb-footer-copy { color: #666; font-size: 13px; margin-top: 10px; }
@media (max-width:600px){ .eb-footer-nav-list{ flex-direction:column; gap:12px; } }

/* AGE GATE */
#eb-age-popup { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 999999; }
#eb-age-popup.active { display: flex; }
.eb-age-popup-inner { background: #111; padding: 30px; border-radius: 20px; text-align: center; max-width: 350px; width: 90%; border: 1px solid #4adede; box-shadow: 0 0 25px rgba(74,222,222,0.4); }
.eb-age-mascot { width: 120px; margin-bottom: 15px; filter: drop-shadow(0 0 15px #4adede); }
.eb-age-title { font-size: 24px; margin-bottom: 10px; }
.eb-age-text { opacity: 0.9; margin-bottom: 20px; }
.eb-age-buttons { display: flex; flex-direction: column; gap: 12px; }
.eb-age-btn { padding: 12px 20px; border-radius: 999px; border: none; cursor: pointer; font-weight: 700; }
.eb-age-yes { background: #7eff9b; color: #0d0d0f; }
.eb-age-no { background: #4adede; color: #0d0d0f; }

/* MOBILE */
@media (max-width:900px){
  .eb-hero-mascot-wrap, .eb-mascot-callout-inner, .eb-community-row {
    grid-template-columns:1fr; text-align:center;
  }
  .eb-hero-text-col { text-align:center; }
  .eb-hero-cta-row { justify-content:center; }
  .eb-hero-tags { justify-content:center; }
}
@media (max-width:600px){
  .eb-hero-mascot-wrap { padding: 90px 16px 60px; }
  .eb-panel, .eb-mascot-callout { padding: 60px 16px 50px; }
  .eb-hero-speech { position: static; margin: 10px auto 0; }
}

#eb-haze-main,
#eb-haze-side {
    filter: blur(40px);
}

.eb-footer-divider {
    height: 3px;
    width: 100%;
    margin: 20px auto;
    background: linear-gradient(
        90deg,
        #ff6ec4,
        #7873f5,
        #4adede,
        #7eff9b,
        #fffb7d
    );
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(126,255,155,0.4);
}