/* Fonts + base */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#071023;
  --card:#0b1220;
  --muted:#9aa6b3;
  --accent:#7c3aed;
  --accent-2:#a855f7;
  --pink:#f43f5e;
  --green:#10b981;
  --primary-gradient: linear-gradient(135deg,#7c3aed 0%, #a855f7 50%, #f43f5e 100%);
  --white: #e6eef8;
}

/* Reset / base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:linear-gradient(180deg,#071023 0%, #071226 40%);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
h1,h2,h3,h4,h5,h6{font-family:'Manrope', sans-serif}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.App{min-height:100vh}

/* Smooth transitions for interactive elements */
button, a, input, textarea, select {
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
button:hover, a:hover { opacity: .92; }
button:active, a:active { transform: scale(.99); }

/* Glass morphism */
.glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.04);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height:8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* --- Animations (imported + adapted) --- */

/* Floating Animation */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

/* Pulse Animation */
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.animate-pulse-slow { animation: pulse 2s ease-in-out infinite; }

/* Bounce Animation */
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-bounce-slow { animation: bounce 2s ease-in-out infinite; }

/* Gradient Animation */
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient { background-size: 200% 200%; animation: gradient 3s ease infinite; }

/* Short alternative float (used by blobs in refined CSS) */
@keyframes floaty{ 0%{transform:translateY(0)}50%{transform:translateY(-25px)}100%{transform:translateY(0)} }

/* --- Navigation / header --- */
.site-nav{
  position:fixed; top:0; left:0; right:0;
  background: rgba(4,7,13,0.6); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(124,58,237,0.06); z-index:90;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.8rem 1rem}
.brand{display:flex;align-items:center;gap:0.6rem;text-decoration:none;color:var(--muted)}
.brand img{height:38px;border-radius:6px}
.brand-text{font-weight:700;color:#dbeafe}
.nav-links{display:flex;gap:1rem;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;padding:0.45rem;border-radius:6px;font-weight:600}
.nav-links a.active{color:#fff}
.nav-actions{display:flex;gap:0.6rem;align-items:center}
.btn{display:inline-block;padding:0.46rem 0.9rem;border-radius:10px;background:transparent;color:var(--muted);text-decoration:none;border:1px solid rgba(255,255,255,0.03)}
.btn-primary{background:var(--accent);border:none;color:#fff;padding:0.6rem 1rem}
.btn-outline{border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff}
.btn-ghost{background:transparent;color:var(--muted);border:none}

/* --- Custom button hover effects --- */
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-2);
  opacity: 1;
  transform: translateY(-1px);
}

.btn-outline:hover, .btn-outline:focus {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  opacity: 1;
}

.small-btn:hover, .small-btn:focus {
  background: linear-gradient(90deg,#a855f7,#f43f5e);
  opacity: 1;
  transform: translateY(-1px);
}

.mobile-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}

.mobile-toggle:hover, .mobile-toggle:focus {
  background: rgba(255,255,255,0.1);
  opacity: 1;
}

.btn-cta {
  background: white;
  color: var(--accent);
  font-weight: 700;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  display: inline-block; /* to apply transforms */
}

.btn-cta:hover, .btn-cta:focus {
  background: #f0f0f0;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  opacity: 1;
}

/* --- Hero / top --- */
.hero{display:flex;gap:2rem;align-items:center;padding:6.2rem 0 4rem;position:relative;overflow:visible}
.hero-left{flex:1;max-width:640px}
.pill{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.03);color:var(--accent);font-weight:700;margin-bottom:0.8rem}
.gradient-text{background:linear-gradient(90deg,#7c3aed,#ff6a95);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);margin-top:0.6rem}
.hero-ctas{margin-top:1rem;display:flex;gap:0.6rem;align-items:center}

/* Logo card */
.hero-right{flex:0 0 360px;display:flex;justify-content:center;align-items:center}
.logo-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:1.2rem;border-radius:12px;box-shadow:0 20px 40px rgba(12,12,20,0.6);border:1px solid rgba(255,255,255,0.03)
}
.logo-card img{width:320px;height:320px;object-fit:contain;border-radius:8px;display:block}

/* --- Animated blobs (uses floaty) --- */
.blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:0.12;mix-blend-mode:multiply;pointer-events:none;animation:floaty 6s ease-in-out infinite}
.b1{width:420px;height:420px;left:2%;top:10%;background:radial-gradient(circle,#7c3aed,#4f46e5);}
.b2{width:300px;height:300px;right:6%;top:18%;background:radial-gradient(circle,#06b6d4,#7dd3fc);animation-duration:7s}
.b3{width:360px;height:360px;left:48%;bottom:-8%;background:radial-gradient(circle,#fb7185,#f472b6);animation-duration:9s}

/* --- Programmes / cards --- */
.section-title{font-family:Manrope, sans-serif;font-size:1.9rem;text-align:center;margin-top:1rem}
.section-sub{text-align:center;color:var(--muted);margin-bottom:1.2rem}
.program-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.prog-card{display:flex;gap:1rem;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));padding:1rem;border-radius:14px;border:1px solid rgba(255,255,255,0.03)}
.prog-icon{width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px}
.prog-icon.green{background:linear-gradient(135deg,#10b981,#34d399);color:white}
.prog-icon.orange{background:linear-gradient(135deg,#fb923c,#f97316);color:white}
.prog-icon.pink{background:linear-gradient(135deg,#fb7185,#f472b6);color:white}
.prog-icon.blue{background:linear-gradient(135deg,#60a5fa,#3b82f6);color:white}

/* Inner card style */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:0.9rem;border-radius:10px;border:1px solid rgba(124,58,237,0.04);margin-top:0.7rem;
  transition: all 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(2,6,12,0.5);
  border-color: rgba(124, 58, 237, 0.2);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.prog-inner ul{list-style:none;padding-left:0;margin:0}
.prog-inner li{padding:6px 0;border-bottom:1px dashed rgba(255,255,255,0.02);font-size:0.95rem}

/* small CTA button */
.small-btn{display:inline-block;margin-top:0.8rem;background:linear-gradient(90deg,#7c3aed,#ff6a95);padding:8px 12px;border-radius:999px;color:#fff;text-decoration:none}

/* CTA band */
.cta-join{background:linear-gradient(90deg,#7c3aed,#ff6a95);padding:2.2rem 0;margin-top:2rem;border-radius:8px}
.cta-inner{text-align:center;color:white}

/* Footer */
.site-footer{margin-top:3rem;padding:2.4rem 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.03)}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.footer-logo{height:44px}
.footer-links{list-style:none;padding-left:0}
.footer-links li{margin-bottom:6px}

/* Utility reveal/scroll animations */
[data-reveal]{
  transform: translateY(16px);
  opacity: 0;
  transition: all 600ms cubic-bezier(.2,.9,.3,1);
}
[data-reveal].visible{
  transform: translateY(0);
  opacity: 1;
}

/* Extra helpers from original CSS for floats/pulse/bounce usage */
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse 2s ease-in-out infinite; }
.animate-bounce-slow { animation: bounce 2s ease-in-out infinite; }
.animate-gradient { background-size:200% 200%; animation: gradient 3s ease infinite; }

/* Responsive */
@media (max-width:900px){
  .program-list{grid-template-columns:1fr}
  .hero{flex-direction:column;padding-top:5.2rem}
  .logo-card img{width:240px;height:240px}
  .nav-links{display:none}
  .mobile-toggle{display:block}
  .nav-links.mobile-open{display:flex;flex-direction:column;gap:0.6rem;padding:0.6rem;background:rgba(0,0,0,0.4)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (max-width:520px){
  .logo-card img{width:180px;height:180px}
  .container{padding:0.8rem}
}

@media (max-width: 768px) {
  .site-footer {
    display: none;
  }
}