/* General reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Press Start 2P', cursive; background:#0d0d0d; color:#f0f0f0; line-height:1.6; }

/* Hero Section */
#hero {
  background: linear-gradient(135deg,#ff006e,#3a86ff);
  background-size:400% 400%;
  color:#fff; text-align:center; padding:4rem 2rem;
  box-shadow:0 0 20px rgba(58,134,255,0.6),0 0 40px rgba(255,0,110,0.4);
  animation: gradientShift 20s ease infinite;
}
@keyframes gradientShift { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
#hero h1 { font-size:2.5rem; margin-bottom:1rem; }
#hero p { margin-bottom:2rem; }

/* Neon Button */
.btn {
  background:#00f5d4; color:#0d0d0d; padding:.75rem 1.5rem; border-radius:8px;
  text-decoration:none; transition:transform .2s, box-shadow .3s;
  box-shadow:0 0 4px #00f5d4,0 0 8px #00f5d4; animation:pulseGlowGreen 3s infinite;
}
.btn:hover { transform:scale(1.05); box-shadow:0 0 6px #00f5d4,0 0 12px #00f5d4,0 0 20px #00f5d4; }
@keyframes pulseGlowGreen { 0%,100%{box-shadow:0 0 4px #00f5d4,0 0 8px #00f5d4;} 50%{box-shadow:0 0 6px #00f5d4,0 0 12px #00f5d4;} }

/* Sections */
section { padding:4rem 2rem; text-align:center; border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); position:relative; overflow:hidden; }
section h2 { font-size:1.75rem; margin-bottom:1.5rem; color:#00f5d4; text-shadow:0 0 2px #00f5d4,0 0 4px #00f5d4; animation:neonFlickerGreen 5s infinite; }
@keyframes neonFlickerGreen { 0%,95%,100%{text-shadow:0 0 2px #00f5d4,0 0 4px #00f5d4; opacity:1;} 96%,98%{text-shadow:none; opacity:.8;} }

/* About description */
.about-description { max-width:700px; margin:0 auto 2rem auto; font-size:1rem; color:#c0f5e0; text-shadow:0 0 2px #00f5d4,0 0 4px #00f5d4; }

/* Purpose Cards */
.purpose-cards { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; }
.purpose-card {
  background:#1a1a1a; padding:1.5rem; border-radius:12px;
  box-shadow:0 0 8px rgba(255,0,110,.8),0 0 16px rgba(255,0,110,.6);
  max-width:280px; flex:1 1 250px; transition:transform .2s,box-shadow .3s;
}
.purpose-card:hover { transform:translateY(-5px); box-shadow:0 0 12px rgba(255,0,110,1),0 0 24px rgba(255,0,110,.9); }

/* Widget Scroll Section */
.widget-wrapper { position:relative; display:flex; align-items:center; }
.scroll-btn {
  background: rgba(0,245,212,.8); border:none; color:#0d0d0d; font-size:2rem; cursor:pointer;
  border-radius:50%; width:50px; height:50px; z-index:10; transition:transform .2s;
}
.scroll-btn:hover { transform:scale(1.1); }
.scroll-btn.left { position:absolute; left:-25px; }
.scroll-btn.right { position:absolute; right:-25px; }

.widget-scroll {
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:1rem 50px;
  -webkit-overflow-scrolling:touch;
}
.widget-container { flex:0 0 auto; scroll-snap-align:start; min-width:350px; max-width:350px; height:500px; background:#1a1a1a; border-radius:12px; box-shadow:0 0 10px rgba(58,134,255,.9),0 0 20px rgba(58,134,255,.6); padding:.5rem; }
.widget-container:hover { transform:translateY(-5px); box-shadow:0 0 14px rgba(58,134,255,1),0 0 28px rgba(58,134,255,.9); }
.widget-container widgetbot { width:100% !important; height:100% !important; }

.widget-scroll::-webkit-scrollbar { height:10px; }
.widget-scroll::-webkit-scrollbar-thumb { background:#00f5d4; border-radius:10px; }

/* Footer */
footer { text-align:center; padding:2rem; font-size:.75rem; color:#888; }