/* ============================================/* ============================================/* ===== ECHO COMMUNITY - IMPRESSIVE MODERN DESIGN ===== */:root {:root {

   ECHO COMMUNITY - STUNNING READABLE DESIGN

   ============================================ */   ECHO COMMUNITY - IMPRESSIVE MODERN DESIGN



:root {   ============================================ */

  /* Colors */

  --primary: #ff6b35;

  --primary-light: #ff8c61;

  --primary-dark: #e85a2a;:root {:root {  --accent: #f97316;  --bg: #0f172a;

  --secondary: #6366f1;

  --accent: #10b981;  --primary: #ff6b35;

  --dark: #1a1a2e;

  --text: #2d3748;  --primary-dark: #e85a2a;  --primary: #ff6b35;

  --text-light: #718096;

  --bg: #ffffff;  --secondary: #6366f1;

  --bg-light: #f7fafc;

  --bg-gradient: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%);  --accent: #10b981;  --primary-dark: #e85a2a;  --accent-dark: #ea580c;  --accent: #f97316;

  

  /* Gradients */  --dark: #0f172a;

  --gradient-primary: linear-gradient(135deg, #ff6b35 0%, #ff8c61 100%);

  --gradient-secondary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);  --text: #1e293b;  --secondary: #6366f1;

  --gradient-hero: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);

    --text-light: #64748b;

  /* Shadows */

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);  --bg: #ffffff;  --accent: #10b981;  --text: #1f2937;  --accent-vibrant: #ff6b35;

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);

  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);  --bg-light: #f8fafc;

  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.2);

    --bg-dark: #1e293b;  --dark: #0f172a;

  /* Spacing */

  --spacing-xs: 0.5rem;  --purple: #8b5cf6;

  --spacing-sm: 1rem;

  --spacing-md: 2rem;  --pink: #ec4899;  --text: #1e293b;  --text-light: #6b7280;  --accent-warm: #fbbf24;

  --spacing-lg: 4rem;

  --spacing-xl: 6rem;  --teal: #06b6d4;

}

    --text-light: #64748b;

* {

  margin: 0;  --gradient-1: linear-gradient(135deg, #ff6b35 0%, #f59e0b 100%);

  padding: 0;

  box-sizing: border-box;  --gradient-2: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);  --bg: #ffffff;  --bg-light: #f9fafb;  --accent-soft: rgba(249, 115, 22, 0.12);

}

  --gradient-3: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);

html {

  scroll-behavior: smooth;  --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);  --bg-light: #f8fafc;

  font-size: 16px;

}  



body {  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);  --bg-dark: #1e293b;  --purple: #a855f7;  --accent-glow: rgba(249, 115, 22, 0.3);

  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  color: var(--text);  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);

  line-height: 1.7;

  background: var(--bg);  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);  --purple: #8b5cf6;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);

}

}  --pink: #ec4899;  --teal: #14b8a6;  --light: #f8fafc;

.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 2rem;* {  --teal: #06b6d4;

}

  margin: 0;

/* ============================================

   HEADER - CLEAN & MODERN  padding: 0;  --gradient-1: linear-gradient(135deg, #ff6b35 0%, #f59e0b 100%);  --pink: #ec4899;  --dark: #020617;

   ============================================ */

  box-sizing: border-box;

.topbar {

  position: fixed;}  --gradient-2: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

  top: 0;

  left: 0;

  right: 0;

  background: rgba(255, 255, 255, 0.98);html {  --gradient-3: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);}  --text: #0f172a;

  -webkit-backdrop-filter: blur(20px);

  backdrop-filter: blur(20px);  scroll-behavior: smooth;

  border-bottom: 1px solid rgba(0, 0, 0, 0.08);

  z-index: 1000;}  --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);

  transition: all 0.3s ease;

}

body {  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);  --muted: #64748b;

.nav {

  display: flex;  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  align-items: center;

  justify-content: space-between;  color: var(--text);  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);

  padding: 1rem 0;

  gap: 2rem;  line-height: 1.7;

}

  background: var(--bg);  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);* {  --purple: #a855f7;

.logo {

  display: flex;  overflow-x: hidden;

  align-items: center;

  text-decoration: none;  -webkit-font-smoothing: antialiased;  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);

  transition: transform 0.3s ease;

}  -moz-osx-font-smoothing: grayscale;



.logo:hover {}}  margin: 0;  --pink: #ec4899;

  transform: scale(1.05);

}



.logo img {.container {

  height: 45px;

  width: auto;  max-width: 1200px;

  max-width: 150px;

  object-fit: contain;  margin: 0 auto;* {  padding: 0;  --teal: #14b8a6;

}

  padding: 0 2rem;

.mobile-menu-btn {

  display: none;}  margin: 0;

  background: none;

  border: none;

  font-size: 1.5rem;

  cursor: pointer;/* ============================================  padding: 0;  box-sizing: border-box;  --radius: 1rem;

  padding: 0.5rem;

  color: var(--text);   HEADER - FIXED WITH BLUR BACKDROP

  z-index: 1001;

}   ============================================ */  box-sizing: border-box;



nav {

  display: flex;

  align-items: center;.topbar {}}  --glow: 0 0 30px rgba(249, 115, 22, 0.4);

  gap: 2rem;

}  position: fixed;



nav a {  top: 0;

  text-decoration: none;

  color: var(--text);  left: 0;

  font-weight: 600;

  font-size: 0.95rem;  right: 0;html {}

  transition: all 0.3s;

  position: relative;  background: rgba(255, 255, 255, 0.95);

  padding: 0.5rem 0;

}  -webkit-backdrop-filter: blur(20px);  scroll-behavior: smooth;



nav a::after {  backdrop-filter: blur(20px);

  content: '';

  position: absolute;  border-bottom: 1px solid rgba(0, 0, 0, 0.06);}body {

  bottom: 0;

  left: 0;  z-index: 1000;

  width: 0;

  height: 3px;  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);

  background: var(--gradient-primary);

  border-radius: 2px;  transition: all 0.3s ease;

  transition: width 0.3s ease;

}}body {  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;*,



nav a:hover::after,

nav a.active::after {

  width: 100%;.nav {  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

}

  display: flex;

nav a:hover,

nav a.active {  align-items: center;  color: var(--text);  color: var(--text);*::before,

  color: var(--primary);

}  justify-content: space-between;



/* ============================================  padding: 1.2rem 0;  line-height: 1.7;

   BUTTONS

   ============================================ */  gap: 3rem;



.btn {}  background: var(--bg);  line-height: 1.6;*::after {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;.logo {  overflow-x: hidden;

  padding: 0.875rem 2rem;

  background: var(--gradient-primary);  display: flex;

  color: white;

  text-decoration: none;  align-items: center;  -webkit-font-smoothing: antialiased;  background: #fff;  box-sizing: border-box;

  border-radius: 50px;

  font-weight: 700;  flex-shrink: 0;

  font-size: 0.95rem;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  transition: transform 0.3s ease;  -moz-osx-font-smoothing: grayscale;

  border: none;

  cursor: pointer;  text-decoration: none;

  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);

  white-space: nowrap;}}  overflow-x: hidden;}

}



.btn:hover {

  transform: translateY(-2px);.logo:hover {

  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);

}  transform: scale(1.05);



.btn:active {}.container {}

  transform: translateY(0);

}



.btn-secondary {.logo img {  max-width: 1200px;

  background: white;

  color: var(--primary);  height: 48px;

  border: 2px solid var(--primary);

  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.15);  width: auto;  margin: 0 auto;body {

}

  max-width: 160px;

.btn-secondary:hover {

  background: var(--primary);  object-fit: contain;  padding: 0 2rem;

  color: white;

}}



.btn-outline {}.container {  margin: 0;

  background: transparent;

  color: white;.mobile-menu-btn {

  border: 2px solid white;

  box-shadow: none;  display: none;

}

  background: none;

.btn-outline:hover {

  background: white;  border: none;/* ===== HEADER - FIXED WITH BLUR BACKDROP ===== */  max-width: 1200px;  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  color: var(--primary);

}  font-size: 1.75rem;



.btn-small {  cursor: pointer;.topbar {

  padding: 0.625rem 1.5rem;

  font-size: 0.875rem;  padding: 0.5rem;

}

  color: var(--text);  position: fixed;  margin: 0 auto;  background: #fff;

/* ============================================

   HERO - STUNNING GRADIENT SECTION  z-index: 1001;

   ============================================ */

  transition: transform 0.3s;  top: 0;

.hero {

  min-height: 100vh;}

  display: flex;

  align-items: center;  left: 0;  padding: 0 1.5rem;  color: var(--text);

  background: var(--gradient-hero);

  position: relative;.mobile-menu-btn:active {

  overflow: hidden;

  padding: 8rem 0 4rem;  transform: scale(0.9);  right: 0;

  margin-top: -70px;

}}



.hero::before {  background: rgba(255, 255, 255, 0.95);}  line-height: 1.6;

  content: '';

  position: absolute;nav {

  top: -30%;

  right: -10%;  display: flex;  -webkit-backdrop-filter: blur(20px);

  width: 600px;

  height: 600px;  align-items: center;

  background: radial-gradient(circle, rgba(255, 107, 53, 0.2), transparent 70%);

  border-radius: 50%;  gap: 2.5rem;  backdrop-filter: blur(20px);  overflow-x: hidden;

  animation: float 20s ease-in-out infinite;

}}



.hero::after {  border-bottom: 1px solid rgba(0, 0, 0, 0.06);

  content: '';

  position: absolute;nav a {

  bottom: -20%;

  left: -10%;  text-decoration: none;  z-index: 1000;/* ===== HEADER ===== */  position: relative;

  width: 500px;

  height: 500px;  color: var(--text);

  background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);

  border-radius: 50%;  font-weight: 600;  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);

  animation: float 15s ease-in-out infinite reverse;

}  font-size: 0.95rem;



@keyframes float {  transition: all 0.3s;  transition: all 0.3s ease;.topbar {}

  0%, 100% {

    transform: translate(0, 0) scale(1);  position: relative;

  }

  50% {  padding: 0.5rem 0;}

    transform: translate(20px, -20px) scale(1.05);

  }}

}

  position: sticky;

.hero-content {

  max-width: 700px;nav a::after {

  position: relative;

  z-index: 10;  content: '';.topbar.scrolled {

}

  position: absolute;

.badge {

  display: inline-flex;  bottom: 0;  background: rgba(255, 255, 255, 0.98);  top: 0;/* Animated background shapes */

  align-items: center;

  gap: 0.5rem;  left: 50%;

  background: rgba(255, 255, 255, 0.15);

  -webkit-backdrop-filter: blur(10px);  transform: translateX(-50%);  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

  backdrop-filter: blur(10px);

  color: white;  width: 0;

  padding: 0.625rem 1.25rem;

  border-radius: 50px;  height: 3px;}  background: rgba(255, 255, 255, 0.98);body::before,

  font-size: 0.875rem;

  font-weight: 700;  background: var(--gradient-1);

  text-transform: uppercase;

  letter-spacing: 0.05em;  border-radius: 2px;

  margin-bottom: 2rem;

  border: 1px solid rgba(255, 255, 255, 0.2);  transition: width 0.3s ease;

}

}.nav {  backdrop-filter: blur(10px);body::after {

.hero h1 {

  font-size: clamp(2.5rem, 6vw, 4.5rem);

  font-weight: 900;

  line-height: 1.15;nav a:hover::after,  display: flex;

  margin-bottom: 1.5rem;

  color: white;nav a.active::after {

  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);

}  width: 100%;  align-items: center;  -webkit-backdrop-filter: blur(10px);  content: '';



.hero h1 span {}

  background: var(--gradient-primary);

  -webkit-background-clip: text;  justify-content: space-between;

  -webkit-text-fill-color: transparent;

  background-clip: text;nav a:hover,

  display: inline;

}nav a.active {  padding: 1.2rem 0;  border-bottom: 1px solid #e5e7eb;  position: fixed;



.lead {  color: var(--primary);

  font-size: 1.25rem;

  color: rgba(255, 255, 255, 0.95);}  gap: 3rem;

  line-height: 1.7;

  margin-bottom: 2.5rem;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}/* ============================================}  z-index: 1000;  border-radius: 50%;



.hero-actions {   BUTTONS

  display: flex;

  gap: 1rem;   ============================================ */

  flex-wrap: wrap;

}



/* ============================================.btn {.logo {  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  z-index: -1;

   SECTIONS

   ============================================ */  display: inline-flex;



.section {  align-items: center;  display: flex;

  padding: var(--spacing-xl) 0;

  position: relative;  justify-content: center;

}

  gap: 0.5rem;  align-items: center;}  opacity: 0.06;

.section-alt {

  background: var(--bg-light);  padding: 0.9rem 2rem;

}

  background: var(--gradient-1);  flex-shrink: 0;

.section-dark {

  background: var(--gradient-hero);  color: white;

  color: white;

}  text-decoration: none;  transition: transform 0.3s ease;  animation: float 25s ease-in-out infinite;



.section-dark h2 {  border-radius: 12px;

  color: white;

}  font-weight: 700;}



.section-dark p {  font-size: 0.95rem;

  color: rgba(255, 255, 255, 0.9);

}  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);.nav {  pointer-events: none;



.section h2 {  border: none;

  font-size: clamp(2rem, 4vw, 3rem);

  font-weight: 900;  cursor: pointer;.logo:hover {

  margin-bottom: 1rem;

  color: var(--text);  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3);

  line-height: 1.2;

}  position: relative;  transform: scale(1.05);  display: flex;}



.section h2::after {  overflow: hidden;

  content: '';

  display: block;}}

  width: 70px;

  height: 4px;

  background: var(--gradient-primary);

  margin-top: 1rem;.btn::before {  align-items: center;

  border-radius: 2px;

}  content: '';



.section > .container > p {  position: absolute;.logo img {

  font-size: 1.125rem;

  color: var(--text-light);  top: 0;

  max-width: 700px;

  margin-bottom: 3rem;  left: -100%;  height: 48px;  justify-content: space-between;body::before {

  line-height: 1.8;

}  width: 100%;



.section-dark > .container > p {  height: 100%;  width: auto;

  color: rgba(255, 255, 255, 0.9);

}  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);



.two-col {  transition: left 0.6s;  max-width: 160px;  padding: 1rem 0;  width: 700px;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}

  gap: 2rem;

  margin-top: 3rem;  object-fit: contain;

}

.btn:hover::before {

/* ============================================

   CONNECTION VISUAL  left: 100%;}  gap: 2rem;  height: 700px;

   ============================================ */

}

.connection-visual {

  display: flex;

  align-items: center;

  justify-content: center;.btn:hover {

  gap: 2rem;

  flex-wrap: wrap;  transform: translateY(-3px) scale(1.02);.mobile-menu-btn {}  background: linear-gradient(135deg, var(--accent), var(--purple));

  padding: 2.5rem;

  background: white;  box-shadow: 0 12px 35px rgba(255, 107, 53, 0.4);

  border-radius: 20px;

  box-shadow: var(--shadow-md);}  display: none;

  margin: 3rem 0;

  border: 2px solid rgba(255, 107, 53, 0.1);

}

.btn:active {  background: none;  top: -350px;

.connection-icon {

  text-align: center;  transform: translateY(-1px) scale(0.98);

}

}  border: none;

.connection-icon > div:first-child {

  font-size: 3.5rem;

  margin-bottom: 0.5rem;

  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));.btn-secondary {  font-size: 1.75rem;.logo {  right: -350px;

}

  background: white;

.connection-icon small {

  font-weight: 700;  color: var(--primary);  cursor: pointer;

  font-size: 0.875rem;

  text-transform: uppercase;  border: 2px solid var(--primary);

  letter-spacing: 0.05em;

  display: block;  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15);  padding: 0.5rem;  display: flex;  animation-delay: -5s;

}

}

.connection-icon:nth-child(1) small {

  color: var(--primary);  color: var(--text);

}

.btn-secondary:hover {

.connection-icon:nth-child(3) small {

  color: var(--secondary);  background: var(--primary);  z-index: 1001;  align-items: center;}

}

  color: white;

.connection-icon:nth-child(5) small {

  color: var(--accent);  border-color: var(--primary);  transition: transform 0.3s;

}

}

.connection-visual > div:nth-child(2),

.connection-visual > div:nth-child(4) {}  flex-shrink: 0;

  font-size: 2rem;

  background: var(--gradient-primary);.btn-outline {

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;  background: transparent;

  background-clip: text;

  font-weight: 900;  color: white;

}

  border: 2px solid rgba(255, 255, 255, 0.3);.mobile-menu-btn:active {}body::after {

/* ============================================

   PILL BOX  box-shadow: none;

   ============================================ */

}  transform: scale(0.9);

.pill-box {

  background: white;

  border-radius: 20px;

  padding: 2rem;.btn-outline:hover {}  width: 900px;

  box-shadow: var(--shadow-md);

  border: 1px solid rgba(0, 0, 0, 0.05);  background: rgba(255, 255, 255, 0.1);

  height: 100%;

}  border-color: white;



.pill-box h3 {}

  font-size: 1.5rem;

  font-weight: 800;nav {.logo img {  height: 900px;

  margin-bottom: 1.5rem;

  color: var(--text);.btn-small {

}

  padding: 0.6rem 1.4rem;  display: flex;

.pill-box ul {

  list-style: none;  font-size: 0.85rem;

}

}  align-items: center;  height: 42px;  background: linear-gradient(135deg, var(--pink), var(--teal));

.pill-box li {

  background: var(--bg-light);

  padding: 1rem 1.25rem;

  margin-bottom: 0.75rem;/* ============================================  gap: 2.5rem;

  border-radius: 12px;

  border-left: 4px solid var(--primary);   HERO - FULL SCREEN DARK

  font-weight: 500;

  color: var(--text);   ============================================ */}  width: auto;  bottom: -450px;

  transition: all 0.3s ease;

}



.pill-box li:hover {.hero {

  transform: translateX(5px);

  background: rgba(255, 107, 53, 0.1);  min-height: 100vh;

  border-left-color: var(--primary-dark);

}  display: flex;nav a {  max-width: 150px;  left: -450px;



/* ============================================  align-items: center;

   CARDS

   ============================================ */  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);  text-decoration: none;



.cards-3 {  position: relative;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));  overflow: hidden;  color: var(--text);  object-fit: contain;  animation-delay: -12s;

  gap: 2rem;

  margin-top: 3rem;  padding: 8rem 0 4rem;

}

  margin-top: -80px;  font-weight: 600;

.card {

  background: white;}

  border-radius: 20px;

  overflow: hidden;  font-size: 0.95rem;}}

  box-shadow: var(--shadow-md);

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);.hero::before {

  display: flex;

  flex-direction: column;  content: '';  transition: all 0.3s;

  border: 1px solid rgba(0, 0, 0, 0.05);

}  position: absolute;



.card:hover {  top: -50%;  position: relative;

  transform: translateY(-8px);

  box-shadow: var(--shadow-xl);  right: -20%;

}

  width: 800px;  padding: 0.5rem 0;

.card h3 {

  font-size: 1.375rem;  height: 800px;

  font-weight: 800;

  padding: 1.75rem 1.75rem 1rem;  background: radial-gradient(circle, rgba(255, 107, 53, 0.15), transparent 70%);}.mobile-menu-btn {@keyframes float {

  color: var(--text);

  margin: 0;  border-radius: 50%;

  line-height: 1.3;

}  animation: float 20s ease-in-out infinite;



.card p {}

  padding: 0 1.75rem 1.75rem;

  color: var(--text-light);nav a::after {  display: none;  0%, 100% {

  line-height: 1.7;

  margin: 0;.hero::after {

  flex-grow: 1;

  font-size: 1rem;  content: '';  content: '';

}

  position: absolute;

.card .btn {

  margin: 0 1.75rem 1.75rem;  bottom: -30%;  position: absolute;  background: none;    transform: translate(0, 0) rotate(0deg);

  align-self: flex-start;

}  left: -15%;



/* ============================================  width: 600px;  bottom: 0;

   PROJECT & DJ CARDS

   ============================================ */  height: 600px;



.project-card,  background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);  left: 50%;  border: none;  }

.dj-card {

  position: relative;  border-radius: 50%;

  overflow: hidden;

}  animation: float 15s ease-in-out infinite reverse;  transform: translateX(-50%);



.project-card img,}

.dj-card img {

  width: 100%;  width: 0;  font-size: 1.5rem;  33% {

  height: 260px;

  object-fit: cover;@keyframes float {

  display: block;

  transition: transform 0.5s ease;  0%, 100% {   height: 3px;

}

    transform: translate(0, 0) scale(1); 

.project-card:hover img,

.dj-card:hover img {    opacity: 0.8;  background: var(--gradient-1);  cursor: pointer;    transform: translate(40px, -40px) rotate(120deg);

  transform: scale(1.1);

}  }



.project-card > div:first-child,  50% {   border-radius: 2px;

.dj-card > div:first-child {

  position: relative;    transform: translate(30px, -30px) scale(1.1); 

  overflow: hidden;

  background: #f0f0f0;    opacity: 1;  transition: width 0.3s ease;  padding: 0.5rem;  }

}

  }

.project-card > div:first-child::after,

.dj-card > div:first-child::after {}}

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;.hero-content {  color: var(--text);  66% {

  right: 0;

  height: 50%;  max-width: 720px;

  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));

  pointer-events: none;  position: relative;nav a:hover::after,

}

  z-index: 10;

.proj-img,

.dj-img {}nav a.active::after {  z-index: 1001;    transform: translate(-30px, 30px) rotate(240deg);

  width: 100%;

  height: 260px;

  object-fit: cover;

  display: block;.badge {  width: 100%;

}

  display: inline-flex;

/* ============================================

   DONATION BOX  align-items: center;}}  }

   ============================================ */

  gap: 0.5rem;

.donation-box {

  background: linear-gradient(135deg, rgba(255, 107, 53, 0.08), rgba(99, 102, 241, 0.08));  background: rgba(255, 255, 255, 0.1);

  border: 2px solid rgba(255, 107, 53, 0.2);

  border-radius: 12px;  -webkit-backdrop-filter: blur(10px);

  padding: 1.25rem;

  margin-top: 1.25rem;  backdrop-filter: blur(10px);nav a:hover,}

}

  color: white;

.donation-box p {

  margin: 0.5rem 0;  padding: 0.6rem 1.5rem;nav a.active {

  padding: 0;

  font-size: 0.938rem;  border-radius: 50px;

  color: var(--text);

}  font-size: 0.85rem;  color: var(--primary);nav {



.donation-box strong {  font-weight: 700;

  color: var(--primary);

  font-weight: 700;  text-transform: uppercase;}

}

  letter-spacing: 0.1em;

/* ============================================

   FOOTER  margin-bottom: 2rem;  display: flex;.container {

   ============================================ */

  border: 1px solid rgba(255, 255, 255, 0.2);

.footer {

  background: var(--gradient-hero);  animation: slideDown 0.6s ease-out;/* ===== BUTTONS ===== */

  color: rgba(255, 255, 255, 0.8);

  padding: 2.5rem 0;}

  margin-top: var(--spacing-xl);

  border-top: 3px solid var(--primary);.btn {  align-items: center;  width: min(1200px, 100% - 2rem);

}

@keyframes slideDown {

.footer-flex {

  display: flex;  from {  display: inline-flex;

  justify-content: space-between;

  align-items: center;    opacity: 0;

  flex-wrap: wrap;

  gap: 1rem;    transform: translateY(-20px);  align-items: center;  gap: 2rem;  margin: 0 auto;

}

  }

.footer p {

  color: rgba(255, 255, 255, 0.8);  to {  gap: 0.5rem;

  font-size: 0.938rem;

}    opacity: 1;



.footer a {    transform: translateY(0);  padding: 0.9rem 2rem;}}

  color: white;

  text-decoration: none;  }

  font-weight: 700;

  transition: all 0.3s;}  background: var(--gradient-1);

}



.footer a:hover {

  color: var(--primary-light);.hero h1 {  color: white;

  transform: translateY(-2px);

}  font-size: clamp(2.8rem, 7vw, 5.5rem);



/* ============================================  font-weight: 900;  text-decoration: none;

   MOBILE RESPONSIVE

   ============================================ */  line-height: 1.1;



@media (max-width: 768px) {  margin-bottom: 2rem;  border-radius: 12px;nav a {/* Header */

  .container {

    padding: 0 1.5rem;  color: white;

  }

  animation: slideUp 0.8s ease-out 0.2s both;  font-weight: 700;

  .nav {

    padding: 0.875rem 0;}

  }

  font-size: 0.95rem;  text-decoration: none;.topbar {

  .logo img {

    height: 40px;@keyframes slideUp {

    max-width: 130px;

  }  from {  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);



  .mobile-menu-btn {    opacity: 0;

    display: block;

  }    transform: translateY(30px);  border: none;  color: var(--text);  position: sticky;



  nav {  }

    position: fixed;

    top: 0;  to {  cursor: pointer;

    right: -100%;

    width: 280px;    opacity: 1;

    height: 100vh;

    background: white;    transform: translateY(0);  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3);  font-weight: 500;  top: 0;

    flex-direction: column;

    align-items: flex-start;  }

    padding: 5rem 2rem 2rem;

    gap: 1.5rem;}  position: relative;

    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);

    transition: right 0.3s ease;

  }

.hero h1 .highlight,  overflow: hidden;  font-size: 0.95rem;  background: rgba(255, 255, 255, 0.95);

  nav.active {

    right: 0;.hero h1 span {

  }

  background: var(--gradient-1);}

  nav a {

    font-size: 1.125rem;  -webkit-background-clip: text;

    width: 100%;

    padding: 0.75rem 0;  -webkit-text-fill-color: transparent;  transition: color 0.2s;  backdrop-filter: blur(12px);

  }

  background-clip: text;

  .btn-small {

    width: 100%;  display: inline-block;.btn::before {

  }

  animation: shimmer 3s ease-in-out infinite;

  .hero {

    padding: 5rem 0 3rem;}  content: '';  position: relative;  -webkit-backdrop-filter: blur(12px);

    min-height: auto;

  }



  .hero h1 {@keyframes shimmer {  position: absolute;

    font-size: 2.25rem;

  }  0%, 100% { opacity: 1; }



  .lead {  50% { opacity: 0.8; }  top: 0;}  z-index: 50;

    font-size: 1.125rem;

  }}



  .hero-actions {  left: -100%;

    flex-direction: column;

    width: 100%;.lead {

  }

  font-size: 1.25rem;  width: 100%;  border-bottom: 1px solid rgba(15, 23, 42, 0.08);

  .hero-actions .btn {

    width: 100%;  color: rgba(255, 255, 255, 0.85);

  }

  line-height: 1.8;  height: 100%;

  .section {

    padding: 4rem 0;  margin-bottom: 2.5rem;

  }

  animation: slideUp 0.8s ease-out 0.4s both;  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);nav a::after {  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);

  .section h2 {

    font-size: 1.875rem;}

  }

  transition: left 0.6s;

  .cards-3 {

    grid-template-columns: 1fr;.hero-actions {

    gap: 1.5rem;

  }  display: flex;}  content: '';}



  .two-col {  gap: 1.2rem;

    grid-template-columns: 1fr;

    gap: 1.5rem;  flex-wrap: wrap;

  }

  animation: slideUp 0.8s ease-out 0.6s both;

  .connection-visual {

    gap: 1.5rem;}.btn:hover::before {  position: absolute;

    padding: 2rem;

  }



  .connection-icon > div:first-child {.hero-gradient {  left: 100%;

    font-size: 3rem;

  }  background: var(--gradient-dark);



  .footer-flex {}}  bottom: -4px;.nav {

    flex-direction: column;

    text-align: center;

  }

}/* ============================================



@media (max-width: 480px) {   SECTIONS

  .container {

    padding: 0 1rem;   ============================================ */.btn:hover {  left: 0;  display: flex;

  }



  .logo img {

    height: 36px;.section {  transform: translateY(-3px) scale(1.02);

    max-width: 110px;

  }  padding: 6rem 0;



  .hero h1 {  position: relative;  box-shadow: 0 12px 35px rgba(255, 107, 53, 0.4);  width: 0;  align-items: center;

    font-size: 1.875rem;

  }}



  .badge {}

    font-size: 0.75rem;

    padding: 0.5rem 1rem;.section-alt {

  }

  background: var(--bg-light);  height: 2px;  justify-content: space-between;

  .btn {

    padding: 0.75rem 1.5rem;}

    font-size: 0.875rem;

  }.btn:active {

}

.section-dark {

  background: var(--bg-dark);  transform: translateY(-1px) scale(0.98);  background: var(--accent);  gap: 1rem;

  color: white;

}}



.section-dark h2 {  transition: width 0.3s;  padding: 0.75rem 0;

  color: white;

}.btn-secondary {



.section-dark p {  background: white;}}

  color: rgba(255, 255, 255, 0.8);

}  color: var(--primary);



.section h2 {  border: 2px solid var(--primary);

  font-size: clamp(2.2rem, 5vw, 3.5rem);

  font-weight: 900;  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15);

  margin-bottom: 1.5rem;

  color: var(--text);}nav a:hover::after,.logo {

  position: relative;

  display: inline-block;

}

.btn-secondary:hover {nav a.active::after {  font-weight: 700;

.section h2::after {

  content: '';  background: var(--primary);

  display: block;

  width: 80px;  color: white;  width: 100%;  font-size: 1.2rem;

  height: 5px;

  background: var(--gradient-1);  border-color: var(--primary);

  margin-top: 1rem;

  border-radius: 3px;}}  letter-spacing: -0.02em;

}



.section > .container > p {

  font-size: 1.15rem;.btn-outline {  display: flex;

  color: var(--text-light);

  max-width: 750px;  background: transparent;

  margin-bottom: 3rem;

  line-height: 1.8;  color: var(--text);nav a:hover,  align-items: center;

}

  border: 2px solid var(--text-light);

.two-col {

  display: grid;  box-shadow: none;nav a.active {  gap: 0.5rem;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 3rem;}

  margin-top: 3rem;

}  color: var(--accent);}



/* ============================================.btn-outline:hover {

   CONNECTION VISUAL

   ============================================ */  background: var(--text);}



.connection-visual {  color: white;

  display: flex;

  align-items: center;  border-color: var(--text);.logo img {

  justify-content: center;

  gap: 2rem;}

  flex-wrap: wrap;

  padding: 3rem;.btn {  height: 50px;

  background: linear-gradient(135deg, rgba(255, 107, 53, 0.05), rgba(99, 102, 241, 0.05));

  border-radius: 24px;.btn-small {

  box-shadow: var(--shadow-md);

  margin-top: 3rem;  padding: 0.6rem 1.4rem;  display: inline-block;  width: auto;

  border: 2px solid rgba(255, 107, 53, 0.1);

}  font-size: 0.85rem;



.connection-icon {}  padding: 0.7rem 1.8rem;  filter: drop-shadow(0 2px 8px rgba(249, 115, 22, 0.15));

  text-align: center;

  animation: bounce 2s ease-in-out infinite;

}

/* ===== HERO - FULL SCREEN DARK WITH ANIMATIONS ===== */  background: var(--accent);  transition: all 0.3s ease;

.connection-icon:nth-child(1) {

  animation-delay: 0s;.hero {

}

  min-height: 100vh;  color: white;}

.connection-icon:nth-child(3) {

  animation-delay: 0.3s;  display: flex;

}

  align-items: center;  text-decoration: none;

.connection-icon:nth-child(5) {

  animation-delay: 0.6s;  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);

}

  position: relative;  border-radius: 50px;.logo:hover img {

@keyframes bounce {

  0%, 100% {  overflow: hidden;

    transform: translateY(0);

  }  padding: 8rem 0 4rem;  font-weight: 600;  transform: scale(1.05);

  50% {

    transform: translateY(-10px);  margin-top: -80px;

  }

}}  font-size: 0.9rem;  filter: drop-shadow(0 4px 12px rgba(249, 115, 22, 0.25));



.connection-icon > div:first-child {

  font-size: 4rem;

  margin-bottom: 0.8rem;.hero::before {  transition: all 0.3s;}

  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));

}  content: '';



.connection-icon small {  position: absolute;  border: none;

  font-weight: 700;

  font-size: 0.9rem;  top: -50%;

  text-transform: uppercase;

  letter-spacing: 0.1em;  right: -20%;  cursor: pointer;.mobile-menu-btn {

}

  width: 800px;

.connection-icon:nth-child(1) small { 

  color: var(--primary);   height: 800px;  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);  display: none;

  text-shadow: 0 2px 4px rgba(255, 107, 53, 0.2);

}  background: radial-gradient(circle, rgba(255, 107, 53, 0.15), transparent 70%);



.connection-icon:nth-child(3) small {   border-radius: 50%;}  background: none;

  color: var(--secondary); 

  text-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);  animation: float 20s ease-in-out infinite;

}

}  border: none;

.connection-icon:nth-child(5) small { 

  color: var(--accent); 

  text-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);

}.hero::after {.btn:hover {  font-size: 1.5rem;



.connection-visual > div:nth-child(2),  content: '';

.connection-visual > div:nth-child(4) {

  font-size: 2.5rem;  position: absolute;  background: var(--accent-dark);  cursor: pointer;

  background: var(--gradient-1);

  -webkit-background-clip: text;  bottom: -30%;

  -webkit-text-fill-color: transparent;

  background-clip: text;  left: -15%;  transform: translateY(-2px);  padding: 0.5rem;

  font-weight: 900;

}  width: 600px;



/* ============================================  height: 600px;  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);  color: var(--text);

   PILL BOX

   ============================================ */  background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);



.pill-box {  border-radius: 50%;}  transition: color 0.3s ease;

  background: white;

  border-radius: 20px;  animation: float 15s ease-in-out infinite reverse;

  padding: 2.5rem;

  box-shadow: var(--shadow-md);}}

  border: 1px solid rgba(0, 0, 0, 0.05);

}



.pill-box h3 {@keyframes float {.btn-secondary {

  font-size: 1.6rem;

  font-weight: 800;  0%, 100% { 

  margin-bottom: 2rem;

  color: var(--text);    transform: translate(0, 0) scale(1);   background: white;.mobile-menu-btn:hover {

}

    opacity: 0.8;

.pill-box ul {

  list-style: none;  }  color: var(--accent);  color: var(--accent);

}

  50% { 

.pill-box li {

  background: var(--bg-light);    transform: translate(30px, -30px) scale(1.1);   border: 2px solid var(--accent);}

  padding: 1.1rem 1.5rem;

  margin-bottom: 0.9rem;    opacity: 1;

  border-radius: 12px;

  border-left: 4px solid var(--primary);  }  box-shadow: none;

  font-weight: 600;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}

  position: relative;

  overflow: hidden;}nav a {

}

.hero-content {

.pill-box li::before {

  content: '';  max-width: 720px;  margin-right: 1.5rem;

  position: absolute;

  left: 0;  position: relative;

  top: 0;

  bottom: 0;  z-index: 10;.btn-secondary:hover {  text-decoration: none;

  width: 0;

  background: var(--gradient-1);}

  transition: width 0.3s ease;

  z-index: 0;  background: var(--accent);  color: var(--text);

}

.badge {

.pill-box li:hover::before {

  width: 100%;  display: inline-flex;  color: white;  font-weight: 500;

}

  align-items: center;

.pill-box li:hover {

  transform: translateX(8px);  gap: 0.5rem;}  font-size: 0.95rem;

  color: white;

  border-left-color: transparent;  background: rgba(255, 255, 255, 0.1);

  box-shadow: var(--shadow-md);

}  -webkit-backdrop-filter: blur(10px);  transition: all 0.3s ease;



/* ============================================  backdrop-filter: blur(10px);

   CARDS

   ============================================ */  color: white;.btn-small {  position: relative;



.cards-3 {  padding: 0.6rem 1.5rem;

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));  border-radius: 50px;  padding: 0.5rem 1.3rem;}

  gap: 2.5rem;

  margin-top: 3rem;  font-size: 0.85rem;

}

  font-weight: 700;  font-size: 0.85rem;

.card {

  background: white;  text-transform: uppercase;

  border-radius: 20px;

  overflow: hidden;  letter-spacing: 0.1em;}nav a::after {

  box-shadow: var(--shadow-md);

  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);  margin-bottom: 2rem;

  display: flex;

  flex-direction: column;  border: 1px solid rgba(255, 255, 255, 0.2);  content: '';

  position: relative;

}  animation: slideDown 0.6s ease-out;



.card::before {}/* ===== HERO ===== */  position: absolute;

  content: '';

  position: absolute;

  top: 0;

  left: 0;@keyframes slideDown {.hero {  bottom: -5px;

  right: 0;

  height: 4px;  from {

  background: var(--gradient-1);

  transform: scaleX(0);    opacity: 0;  background: linear-gradient(135deg, #fff5f1 0%, #fff 50%, #fef3f8 100%);  left: 0;

  transition: transform 0.5s ease;

  z-index: 1;    transform: translateY(-20px);

}

  }  padding: 5rem 0;  width: 0;

.card:hover::before {

  transform: scaleX(1);  to {

}

    opacity: 1;  position: relative;  height: 2px;

.card:hover {

  transform: translateY(-12px);    transform: translateY(0);

  box-shadow: var(--shadow-xl);

}  }  overflow: hidden;  background: linear-gradient(90deg, var(--accent), var(--purple));



.card h3 {}

  font-size: 1.4rem;

  font-weight: 800;}  transition: width 0.3s ease;

  padding: 2rem 2rem 1rem;

  color: var(--text);.hero h1 {

  margin: 0;

  line-height: 1.3;  font-size: clamp(2.8rem, 7vw, 5.5rem);}

}

  font-weight: 900;

.card p {

  padding: 0 2rem 2rem;  line-height: 1.1;.hero::before {

  color: var(--text-light);

  line-height: 1.7;  margin-bottom: 2rem;

  margin: 0;

  flex-grow: 1;  color: white;  content: '';nav a:hover::after,

  font-size: 1rem;

}  animation: slideUp 0.8s ease-out 0.2s both;



.card .btn {}  position: absolute;nav a.active::after {

  margin: 0 2rem 2rem;

  align-self: flex-start;

}

@keyframes slideUp {  top: -50%;  width: 100%;

/* ============================================

   PROJECT & DJ CARDS  from {

   ============================================ */

    opacity: 0;  right: -10%;}

.project-card,

.dj-card {    transform: translateY(30px);

  position: relative;

  overflow: hidden;  }  width: 600px;

}

  to {

.project-card img,

.dj-card img {    opacity: 1;  height: 600px;nav a.active {

  width: 100%;

  height: 280px;    transform: translateY(0);

  object-fit: cover;

  display: block;  }  background: radial-gradient(circle, rgba(249, 115, 22, 0.1), transparent 70%);  color: var(--accent);

  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}}



.project-card:hover img,  border-radius: 50%;}

.dj-card:hover img {

  transform: scale(1.15) rotate(2deg);.hero h1 .highlight {

}

  background: var(--gradient-1);  animation: pulse 8s ease-in-out infinite;

.project-card > div:first-child,

.dj-card > div:first-child {  -webkit-background-clip: text;

  position: relative;

  overflow: hidden;  -webkit-text-fill-color: transparent;}nav a:last-child {

}

  background-clip: text;

.project-card > div:first-child::after,

.dj-card > div:first-child::after {  display: inline-block;  margin-right: 0;

  content: '';

  position: absolute;  animation: shimmer 3s ease-in-out infinite;

  bottom: 0;

  left: 0;}@keyframes pulse {}

  right: 0;

  height: 50%;

  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));

  pointer-events: none;@keyframes shimmer {  0%, 100% { transform: scale(1); opacity: 0.5; }

  transition: background 0.3s;

}  0%, 100% { opacity: 1; }



.project-card:hover > div:first-child::after,  50% { opacity: 0.8; }  50% { transform: scale(1.1); opacity: 0.7; }/* Buttons */

.dj-card:hover > div:first-child::after {

  background: linear-gradient(to bottom, rgba(255, 107, 53, 0.3), rgba(0, 0, 0, 0.8));}

}

}.btn {

.proj-img,

.dj-img {.hero h1 span {

  width: 100%;

  height: 280px;  background: var(--gradient-1);  display: inline-block;

  object-fit: cover;

  display: block;  -webkit-background-clip: text;

}

  -webkit-text-fill-color: transparent;.hero-content {  background: linear-gradient(135deg, var(--accent-vibrant), var(--accent));

/* ============================================

   DONATION BOX  background-clip: text;

   ============================================ */

  display: inline-block;  max-width: 680px;  color: #fff;

.donation-box {

  background: linear-gradient(135deg, rgba(255, 107, 53, 0.08), rgba(99, 102, 241, 0.08));}

  border: 2px solid rgba(255, 107, 53, 0.2);

  border-radius: 16px;  position: relative;  padding: 0.75rem 1.75rem;

  padding: 1.5rem;

  margin-top: 1.5rem;.lead {

}

  font-size: 1.25rem;  z-index: 1;  border-radius: 999px;

.donation-box p {

  margin: 0.5rem 0;  color: rgba(255, 255, 255, 0.85);

  padding: 0;

  font-size: 0.95rem;  line-height: 1.8;}  text-decoration: none;

}

  margin-bottom: 2.5rem;

.donation-box strong {

  color: var(--primary);  animation: slideUp 0.8s ease-out 0.4s both;  border: none;

  font-weight: 700;

}}



/* ============================================.badge {  cursor: pointer;

   FOOTER

   ============================================ */.hero-actions {



.footer {  display: flex;  display: inline-block;  font-weight: 600;

  background: var(--gradient-dark);

  color: rgba(255, 255, 255, 0.7);  gap: 1.2rem;

  padding: 3rem 0;

  margin-top: 6rem;  flex-wrap: wrap;  background: rgba(249, 115, 22, 0.1);  font-size: 0.95rem;

  border-top: 4px solid;

  border-image: var(--gradient-1) 1;  animation: slideUp 0.8s ease-out 0.6s both;

  position: relative;

}}  color: var(--accent);  transition: all 0.3s ease;



.footer::before {

  content: '';

  position: absolute;.hero-gradient {  padding: 0.5rem 1.2rem;  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.3);

  top: 0;

  left: 0;  background: var(--gradient-dark);

  right: 0;

  height: 1px;}  border-radius: 50px;  position: relative;

  background: var(--gradient-1);

}



.footer-flex {/* ===== SECTIONS ===== */  font-size: 0.8rem;  overflow: hidden;

  display: flex;

  justify-content: space-between;.section {

  align-items: center;

  flex-wrap: wrap;  padding: 6rem 0;  font-weight: 600;}

  gap: 1.5rem;

}  position: relative;



.footer a {}  text-transform: uppercase;

  color: white;

  text-decoration: none;

  font-weight: 700;

  transition: all 0.3s;.section-alt {  letter-spacing: 0.05em;.btn::before {

  position: relative;

  display: inline-block;  background: var(--bg-light);

}

}  margin-bottom: 1.5rem;  content: '';

.footer a::after {

  content: '';

  position: absolute;

  bottom: -2px;.section-dark {  border: 1px solid rgba(249, 115, 22, 0.2);  position: absolute;

  left: 0;

  width: 0;  background: var(--bg-dark);

  height: 2px;

  background: var(--gradient-1);  color: white;}  top: 0;

  transition: width 0.3s;

}}



.footer a:hover::after {  left: -100%;

  width: 100%;

}.section-dark .section h2,



.footer a:hover {.section-dark h2 {.hero h1 {  width: 100%;

  color: var(--primary);

  transform: translateY(-2px);  color: white;

}

}  font-size: clamp(2.5rem, 6vw, 4.2rem);  height: 100%;

/* ============================================

   MOBILE RESPONSIVE

   ============================================ */

.section-dark .section > .container > p,  font-weight: 800;  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

@media (max-width: 768px) {

  .container {.section-dark p {

    padding: 0 1.5rem;

  }  color: rgba(255, 255, 255, 0.8);  line-height: 1.15;  transition: left 0.6s;



  .nav {}

    padding: 1rem 0;

  }  margin-bottom: 1.5rem;}



  .logo img {.section h2 {

    height: 40px;

    max-width: 130px;  font-size: clamp(2.2rem, 5vw, 3.5rem);  color: var(--text);

  }

  font-weight: 900;

  .mobile-menu-btn {

    display: block;  margin-bottom: 1.5rem;}.btn:hover::before {

  }

  color: var(--text);

  nav {

    position: fixed;  position: relative;  left: 100%;

    top: 0;

    right: -100%;  display: inline-block;

    width: 300px;

    height: 100vh;}.hero h1 .highlight {}

    background: white;

    flex-direction: column;

    align-items: flex-start;

    padding: 5rem 2rem 2rem;.section h2::after {  background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);

    gap: 2rem;

    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.15);  content: '';

    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  }  display: block;  -webkit-background-clip: text;.btn:hover {



  nav.active {  width: 80px;

    right: 0;

  }  height: 5px;  -webkit-text-fill-color: transparent;  transform: translateY(-2px);



  nav a {  background: var(--gradient-1);

    font-size: 1.2rem;

    width: 100%;  margin-top: 1rem;  background-clip: text;  box-shadow: 0 8px 30px rgba(249, 115, 22, 0.45);

    padding: 0.8rem 0;

  }  border-radius: 3px;



  nav a::after {}}}

    bottom: 0;

    left: 0;

    transform: none;

  }.section > .container > p {



  .btn-small {  font-size: 1.15rem;

    width: 100%;

    justify-content: center;  color: var(--text-light);.hero h1 span {.btn-secondary {

  }

  max-width: 750px;

  .hero {

    padding: 5rem 0 3rem;  margin-bottom: 3rem;  background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);  background: #fff;

    min-height: auto;

  }  line-height: 1.8;



  .hero h1 {}  -webkit-background-clip: text;  color: var(--text);

    font-size: 2.5rem;

  }



  .lead {.two-col {  -webkit-text-fill-color: transparent;  border: 2px solid rgba(15, 23, 42, 0.12);

    font-size: 1.1rem;

  }  display: grid;



  .hero-actions {  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  background-clip: text;  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08);

    flex-direction: column;

    width: 100%;  gap: 3rem;

  }

  margin-top: 2rem;}}

  .hero-actions .btn {

    width: 100%;}

    justify-content: center;

  }



  .section {/* ===== CONNECTION VISUAL ===== */

    padding: 4rem 0;

  }.connection-visual {.lead {.btn-secondary:hover {



  .section h2 {  display: flex;

    font-size: 2rem;

  }  align-items: center;  font-size: 1.15rem;  border-color: var(--accent);



  .cards-3 {  justify-content: center;

    grid-template-columns: 1fr;

    gap: 2rem;  gap: 2rem;  color: var(--text-light);  color: var(--accent);

  }

  flex-wrap: wrap;

  .two-col {

    grid-template-columns: 1fr;  padding: 3rem;  line-height: 1.7;  box-shadow: 0 6px 25px rgba(249, 115, 22, 0.2);

    gap: 2rem;

  }  background: linear-gradient(135deg, rgba(255, 107, 53, 0.05), rgba(99, 102, 241, 0.05));



  .connection-visual {  border-radius: 24px;  margin-bottom: 2rem;}

    gap: 1.5rem;

    padding: 2rem;  box-shadow: var(--shadow-md);

  }

  margin-top: 3rem;}

  .connection-icon > div:first-child {

    font-size: 3rem;  border: 2px solid rgba(255, 107, 53, 0.1);

  }

}.btn-small {

  .connection-visual > div:nth-child(2),

  .connection-visual > div:nth-child(4) {

    font-size: 2rem;

  }.connection-icon {.hero-actions {  padding: 0.5rem 1.2rem;



  .footer-flex {  text-align: center;

    flex-direction: column;

    text-align: center;  animation: bounce 2s ease-in-out infinite;  display: flex;  font-size: 0.85rem;

  }

}}



@media (max-width: 480px) {  gap: 1rem;}

  .container {

    padding: 0 1rem;.connection-icon:nth-child(1) {

  }

  animation-delay: 0s;  flex-wrap: wrap;

  .logo img {

    height: 36px;}

    max-width: 110px;

  }}/* Hero Section */



  .hero h1 {.connection-icon:nth-child(3) {

    font-size: 2rem;

  }  animation-delay: 0.3s;.hero {



  .badge {}

    font-size: 0.75rem;

    padding: 0.5rem 1.2rem;.hero-gradient {  padding-top: 6rem;

  }

.connection-icon:nth-child(5) {

  .btn {

    padding: 0.8rem 1.5rem;  animation-delay: 0.6s;  background: linear-gradient(135deg, #fff5f1 0%, #fff 50%, #fef3f8 100%);  padding-bottom: 6rem;

    font-size: 0.9rem;

  }}



  .section {}  min-height: 85vh;

    padding: 3rem 0;

  }@keyframes bounce {



  .connection-visual {  0%, 100% {  display: flex;

    padding: 1.5rem;

  }    transform: translateY(0);

}

  }/* ===== SECTIONS ===== */  align-items: center;

  50% {

    transform: translateY(-10px);.section {}

  }

}  padding: 4rem 0;



.connection-icon > div:first-child {}.hero-gradient {

  font-size: 4rem;

  margin-bottom: 0.8rem;  background: 

  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));

}.section-alt {    linear-gradient(135deg, rgba(255, 242, 233, 0.9) 0%, rgba(255, 232, 240, 0.9) 50%, rgba(255, 255, 255, 0.9) 100%),



.connection-icon small {  background: var(--bg-light);    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54 16.88 218.2 35.26 69.27 18 138.3 24.88 209.4 13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z" opacity=".1" fill="%23f97316"/></svg>') bottom center/100% auto no-repeat;

  font-weight: 700;

  font-size: 0.9rem;}  position: relative;

  text-transform: uppercase;

  letter-spacing: 0.1em;  overflow: hidden;

}

.section h2 {}

.connection-icon:nth-child(1) small { 

  color: var(--primary);   font-size: clamp(2rem, 4vw, 2.8rem);

  text-shadow: 0 2px 4px rgba(255, 107, 53, 0.2);

}  font-weight: 800;.hero-gradient::before {



.connection-icon:nth-child(3) small {   margin-bottom: 1rem;  content: '';

  color: var(--secondary); 

  text-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);  color: var(--text);  position: absolute;

}

}  width: 500px;

.connection-icon:nth-child(5) small { 

  color: var(--accent);   height: 500px;

  text-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);

}.section h2::after {  background: radial-gradient(circle, rgba(249, 115, 22, 0.2), transparent 70%);



.connection-visual > div:nth-child(2),  content: '';  border-radius: 50%;

.connection-visual > div:nth-child(4) {

  font-size: 2.5rem;  display: block;  top: -150px;

  background: var(--gradient-1);

  -webkit-background-clip: text;  width: 60px;  right: 5%;

  -webkit-text-fill-color: transparent;

  background-clip: text;  height: 4px;  animation: pulse 6s ease-in-out infinite;

  font-weight: 900;

}  background: linear-gradient(90deg, var(--accent), var(--purple));  pointer-events: none;



/* ===== PILL BOX ===== */  margin-top: 0.8rem;}

.pill-box {

  background: white;  border-radius: 2px;

  border-radius: 20px;

  padding: 2.5rem;}.hero-gradient::after {

  box-shadow: var(--shadow-md);

  border: 1px solid rgba(0, 0, 0, 0.05);  content: '';

}

.section > .container > p {  position: absolute;

.pill-box h3 {

  font-size: 1.6rem;  font-size: 1.05rem;  width: 400px;

  font-weight: 800;

  margin-bottom: 2rem;  color: var(--text-light);  height: 400px;

  color: var(--text);

}  max-width: 700px;  background: radial-gradient(circle, rgba(168, 85, 247, 0.15), transparent 70%);



.pill-box ul {  margin-bottom: 2.5rem;  border-radius: 50%;

  list-style: none;

}}  bottom: -100px;



.pill-box li {  left: 5%;

  background: var(--bg-light);

  padding: 1.1rem 1.5rem;.two-col {  animation: pulse 8s ease-in-out infinite;

  margin-bottom: 0.9rem;

  border-radius: 12px;  display: grid;  animation-delay: 2s;

  border-left: 4px solid var(--primary);

  font-weight: 600;  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  pointer-events: none;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;  gap: 2.5rem;}

  overflow: hidden;

}  margin-top: 2rem;



.pill-box li::before {}@keyframes pulse {

  content: '';

  position: absolute;  0%, 100% {

  left: 0;

  top: 0;/* ===== CONNECTION VISUAL ===== */    transform: scale(1);

  bottom: 0;

  width: 0;.connection-visual {    opacity: 0.2;

  background: var(--gradient-1);

  transition: width 0.3s ease;  display: flex;  }

  z-index: 0;

}  align-items: center;  50% {



.pill-box li:hover::before {  justify-content: center;    transform: scale(1.3);

  width: 100%;

}  gap: 1.5rem;    opacity: 0.3;



.pill-box li:hover {  flex-wrap: wrap;  }

  transform: translateX(8px);

  color: white;  padding: 2rem;}

  border-left-color: transparent;

  box-shadow: var(--shadow-md);  background: white;

}

  border-radius: 16px;.hero-content {

/* ===== CARDS ===== */

.cards-3 {  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);  max-width: 720px;

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));  margin-top: 2rem;  padding-top: 2rem;

  gap: 2.5rem;

  margin-top: 3rem;}  position: relative;

}

  z-index: 1;

.card {

  background: white;.connection-icon {}

  border-radius: 20px;

  overflow: hidden;  text-align: center;

  box-shadow: var(--shadow-md);

  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);}.hero h1 {

  display: flex;

  flex-direction: column;  font-size: clamp(2.8rem, 5vw, 4.8rem);

  position: relative;

}.connection-icon > div:first-child {  margin-bottom: 1.5rem;



.card::before {  font-size: 3rem;  line-height: 1.1;

  content: '';

  position: absolute;  margin-bottom: 0.5rem;  font-weight: 800;

  top: 0;

  left: 0;}  color: var(--text);

  right: 0;

  height: 4px;  letter-spacing: -0.02em;

  background: var(--gradient-1);

  transform: scaleX(0);.connection-icon small {}

  transition: transform 0.5s ease;

}  font-weight: 600;



.card:hover::before {  font-size: 0.85rem;.hero h1 span {

  transform: scaleX(1);

}  text-transform: uppercase;  background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);



.card:hover {  letter-spacing: 0.05em;  -webkit-background-clip: text;

  transform: translateY(-12px);

  box-shadow: var(--shadow-xl);}  background-clip: text;

}

  -webkit-text-fill-color: transparent;

.card h3 {

  font-size: 1.4rem;.connection-icon:nth-child(1) small { color: var(--accent); }  display: inline-block;

  font-weight: 800;

  padding: 2rem 2rem 1rem;.connection-icon:nth-child(3) small { color: var(--purple); }}

  color: var(--text);

  margin: 0;.connection-icon:nth-child(5) small { color: var(--teal); }

  line-height: 1.3;

}.lead {



.card p {.connection-visual > div:nth-child(2),  font-size: 1.2rem;

  padding: 0 2rem 2rem;

  color: var(--text-light);.connection-visual > div:nth-child(4) {  color: var(--muted);

  line-height: 1.7;

  margin: 0;  font-size: 2rem;  line-height: 1.8;

  flex-grow: 1;

  font-size: 1rem;  color: var(--accent);  font-weight: 400;

}

  font-weight: 800;  margin-bottom: 2rem;

.card .btn {

  margin: 0 2rem 2rem;}}

  align-self: flex-start;

}



/* ===== PROJECT & DJ CARDS ===== *//* ===== PILL BOX ===== */.badge {

.project-card,

.dj-card {.pill-box {  display: inline-block;

  position: relative;

  overflow: hidden;  background: white;  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(168, 85, 247, 0.15));

}

  border-radius: 16px;  color: var(--accent);

.project-card img,

.dj-card img {  padding: 2rem;  padding: 0.5rem 1.2rem;

  width: 100%;

  height: 280px;  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);  border-radius: 999px;

  object-fit: cover;

  display: block;}  font-size: 0.75rem;

  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}  text-transform: uppercase;



.project-card:hover img,.pill-box h3 {  letter-spacing: 0.15em;

.dj-card:hover img {

  transform: scale(1.15) rotate(2deg);  font-size: 1.4rem;  margin-bottom: 1.5rem;

}

  font-weight: 700;  border: 1px solid rgba(249, 115, 22, 0.25);

/* Image overlay wrapper */

.project-card > div:first-child,  margin-bottom: 1.5rem;  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.12);

.dj-card > div:first-child {

  position: relative;  color: var(--text);  font-weight: 600;

  overflow: hidden;

}}}



.project-card > div:first-child::after,

.dj-card > div:first-child::after {

  content: '';.pill-box ul {.hero-actions {

  position: absolute;

  bottom: 0;  list-style: none;  display: flex;

  left: 0;

  right: 0;}  gap: 1.25rem;

  height: 50%;

  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));  margin-top: 2rem;

  pointer-events: none;

  transition: background 0.3s;.pill-box li {  flex-wrap: wrap;

}

  background: var(--bg-light);}

.project-card:hover > div:first-child::after,

.dj-card:hover > div:first-child::after {  padding: 0.9rem 1.2rem;

  background: linear-gradient(to bottom, rgba(255, 107, 53, 0.3), rgba(0, 0, 0, 0.8));

}  margin-bottom: 0.7rem;/* Sections */



.proj-img,  border-radius: 10px;.section {

.dj-img {

  width: 100%;  border-left: 3px solid var(--accent);  padding: 5rem 0;

  height: 280px;

  object-fit: cover;  font-weight: 500;  position: relative;

  display: block;

}  transition: all 0.2s;}



/* ===== DONATION BOX ===== */}

.donation-box {

  background: linear-gradient(135deg, rgba(255, 107, 53, 0.08), rgba(99, 102, 241, 0.08));.section-alt {

  border: 2px solid rgba(255, 107, 53, 0.2);

  border-radius: 16px;.pill-box li:hover {  background: linear-gradient(135deg, #f8fafc 0%, #fff 50%, #fef3f2 100%);

  padding: 1.5rem;

  margin-top: 1.5rem;  transform: translateX(5px);  position: relative;

}

  background: rgba(249, 115, 22, 0.08);}

.donation-box p {

  margin: 0.5rem 0;  border-left-color: var(--purple);

  padding: 0;

  font-size: 0.95rem;}.section-alt::before {

}

  content: '';

.donation-box strong {

  color: var(--primary);/* ===== CARDS ===== */  position: absolute;

  font-weight: 700;

}.cards-3 {  width: 350px;



/* ===== FOOTER ===== */  display: grid;  height: 350px;

.footer {

  background: var(--gradient-dark);  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));  background: radial-gradient(circle, rgba(168, 85, 247, 0.08), transparent 70%);

  color: rgba(255, 255, 255, 0.7);

  padding: 3rem 0;  gap: 2rem;  border-radius: 50%;

  margin-top: 6rem;

  border-top: 4px solid;  margin-top: 2.5rem;  bottom: -150px;

  border-image: var(--gradient-1) 1;

  position: relative;}  right: -150px;

}

  pointer-events: none;

.footer::before {

  content: '';.card {}

  position: absolute;

  top: 0;  background: white;

  left: 0;

  right: 0;  border-radius: 16px;.section h2 {

  height: 1px;

  background: var(--gradient-1);  overflow: hidden;  font-size: 2.5rem;

}

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);  margin-bottom: 1.5rem;

.footer-flex {

  display: flex;  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  font-weight: 800;

  justify-content: space-between;

  align-items: center;  display: flex;  color: var(--text);

  flex-wrap: wrap;

  gap: 1.5rem;  flex-direction: column;  letter-spacing: -0.02em;

}

}}

.footer a {

  color: white;

  text-decoration: none;

  font-weight: 700;.card:hover {.section h2::after {

  transition: all 0.3s;

  position: relative;  transform: translateY(-8px);  content: '';

  display: inline-block;

}  box-shadow: 0 12px 35px rgba(249, 115, 22, 0.2);  display: block;



.footer a::after {}  width: 80px;

  content: '';

  position: absolute;  height: 5px;

  bottom: -2px;

  left: 0;.card h3 {  background: linear-gradient(90deg, var(--accent), var(--purple));

  width: 0;

  height: 2px;  font-size: 1.2rem;  margin-top: 1rem;

  background: var(--gradient-1);

  transition: width 0.3s;  font-weight: 700;  border-radius: 999px;

}

  padding: 1.5rem 1.5rem 0.8rem;}

.footer a:hover::after {

  width: 100%;  color: var(--text);

}

  margin: 0;.section p {

.footer a:hover {

  color: var(--primary);}  max-width: 65rem;

  transform: translateY(-2px);

}  font-size: 1.05rem;



/* ===== MOBILE RESPONSIVE ===== */.card p {  line-height: 1.8;

@media (max-width: 768px) {

  .container {  padding: 0 1.5rem 1.5rem;  color: var(--muted);

    padding: 0 1.5rem;

  }  color: var(--text-light);}



  .nav {  line-height: 1.6;

    padding: 1rem 0;

  }  margin: 0;.two-col {



  .logo img {  flex-grow: 1;  display: grid;

    height: 40px;

    max-width: 130px;}  gap: 3rem;

  }

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  .mobile-menu-btn {

    display: block;.card .btn {  align-items: start;

  }

  margin: 0 1.5rem 1.5rem;  margin-top: 2rem;

  nav {

    position: fixed;  align-self: flex-start;}

    top: 0;

    right: -100%;}

    width: 300px;

    height: 100vh;.pill-box {

    background: white;

    flex-direction: column;/* ===== PROJECT & DJ CARDS ===== */  background: #fff;

    align-items: flex-start;

    padding: 5rem 2rem 2rem;.project-card,  border: 1px solid rgba(15, 23, 42, 0.08);

    gap: 2rem;

    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.15);.dj-card {  border-radius: 1.5rem;

    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  }  position: relative;  padding: 2rem;



  nav.active {}  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.08);

    right: 0;

  }  position: relative;



  nav a {.project-card img,}

    font-size: 1.2rem;

    width: 100%;.dj-card img {

    padding: 0.8rem 0;

  }  width: 100%;.pill-box::before {



  nav a::after {  height: 240px;  content: '♪';

    bottom: 0;

    left: 0;  object-fit: cover;  position: absolute;

    transform: none;

  }  display: block;  top: 1.5rem;



  .btn-small {  transition: transform 0.4s;  right: 1.5rem;

    width: 100%;

    justify-content: center;}  font-size: 3.5rem;

  }

  opacity: 0.05;

  .hero {

    padding: 5rem 0 3rem;.project-card:hover img,  color: var(--accent);

    min-height: auto;

  }.dj-card:hover img {}



  .hero h1 {  transform: scale(1.08);

    font-size: 2.5rem;

  }}.pill-box h3 {



  .lead {  margin-top: 0;

    font-size: 1.1rem;

  }/* Image overlay on hover */  margin-bottom: 1.5rem;



  .hero-actions {.project-card::before,  font-size: 1.5rem;

    flex-direction: column;

    width: 100%;.dj-card::before {  color: var(--text);

  }

  content: '';}

  .hero-actions .btn {

    width: 100%;  position: absolute;

    justify-content: center;

  }  top: 0;.pill-box ul {



  .section {  left: 0;  list-style: none;

    padding: 4rem 0;

  }  right: 0;  padding-left: 0;



  .section h2 {  height: 240px;  margin: 0;

    font-size: 2rem;

  }  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));}



  .cards-3 {  opacity: 0;

    grid-template-columns: 1fr;

    gap: 2rem;  transition: opacity 0.3s;.pill-box li {

  }

  pointer-events: none;  background: linear-gradient(135deg, #f8fafc, #fff);

  .two-col {

    grid-template-columns: 1fr;}  padding: 0.75rem 1rem;

    gap: 2rem;

  }  border-radius: 0.75rem;



  .connection-visual {.project-card:hover::before,  margin-bottom: 0.75rem;

    gap: 1.5rem;

    padding: 2rem;.dj-card:hover::before {  font-weight: 500;

  }

  opacity: 1;  border-left: 4px solid var(--accent);

  .connection-icon > div:first-child {

    font-size: 3rem;}  transition: all 0.3s ease;

  }

  color: var(--text);

  .connection-visual > div:nth-child(2),

  .connection-visual > div:nth-child(4) {.proj-img,}

    font-size: 2rem;

  }.dj-img {



  .footer-flex {  width: 100%;.pill-box li:hover {

    flex-direction: column;

    text-align: center;  height: 240px;  transform: translateX(8px);

  }

}  object-fit: cover;  background: linear-gradient(135deg, #fff2e9, #fff);



@media (max-width: 480px) {  display: block;  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.15);

  .container {

    padding: 0 1rem;}  border-left-color: var(--purple);

  }

}

  .logo img {

    height: 36px;/* ===== DONATION BOX ===== */

    max-width: 110px;

  }.donation-box {/* Cards */



  .hero h1 {  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(168, 85, 247, 0.08));.cards-3 {

    font-size: 2rem;

  }  border: 2px solid rgba(249, 115, 22, 0.2);  display: grid;



  .badge {  border-radius: 12px;  gap: 2rem;

    font-size: 0.75rem;

    padding: 0.5rem 1.2rem;  padding: 1.2rem;  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  }

  margin-top: 1rem;  margin-top: 3rem;

  .btn {

    padding: 0.8rem 1.5rem;}}

    font-size: 0.9rem;

  }



  .section {.donation-box p {.card {

    padding: 3rem 0;

  }  margin: 0.4rem 0;  background: #fff;



  .connection-visual {  padding: 0;  border-radius: 1.5rem;

    padding: 1.5rem;

  }  font-size: 0.95rem;  padding: 0;

}

}  border: none;

  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);

.donation-box strong {  display: flex;

  color: var(--accent);  flex-direction: column;

}  gap: 0;

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

/* ===== FOOTER ===== */  position: relative;

.footer {  overflow: hidden;

  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);}

  color: #d1d5db;

  padding: 2rem 0;.card::before {

  margin-top: 4rem;  content: '';

  border-top: 3px solid var(--accent);  position: absolute;

}  top: 0;

  left: 0;

.footer-flex {  right: 0;

  display: flex;  height: 5px;

  justify-content: space-between;  background: linear-gradient(90deg, var(--accent), var(--purple), var(--pink), var(--teal));

  align-items: center;  transform: scaleX(0);

  flex-wrap: wrap;  transform-origin: left;

  gap: 1rem;  transition: transform 0.5s ease;

}  z-index: 2;

}

.footer a {

  color: white;.card:hover {

  text-decoration: none;  transform: translateY(-12px) scale(1.02);

  font-weight: 600;  box-shadow: 0 25px 60px rgba(249, 115, 22, 0.25);

  transition: color 0.2s;}

}

.card:hover::before {

.footer a:hover {  transform: scaleX(1);

  color: var(--accent);}

}

.card h3 {

/* ===== MOBILE RESPONSIVE ===== */  padding: 1.5rem 1.5rem 1rem;

@media (max-width: 768px) {  margin: 0;

  .container {  font-size: 1.3rem;

    padding: 0 1rem;  font-weight: 700;

  }  color: var(--text);

  line-height: 1.4;

  .nav {}

    padding: 0.8rem 0;

  }.card p {

  padding: 0 1.5rem 1.5rem;

  .logo img {  margin: 0;

    height: 36px;  color: var(--muted);

    max-width: 120px;  line-height: 1.7;

  }}



  .mobile-menu-btn {.card .btn {

    display: block;  margin: 0 1.5rem 1.5rem;

  }  align-self: flex-start;

}

  nav {

    position: fixed;/* Project and DJ Cards */

    top: 0;.project-card,

    right: -100%;.dj-card {

    width: 280px;  cursor: pointer;

    height: 100vh;}

    background: white;

    flex-direction: column;.project-card img,

    align-items: flex-start;.dj-card img {

    padding: 5rem 2rem 2rem;  width: 100%;

    gap: 1.5rem;  height: 280px;

    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);  object-fit: cover;

    transition: right 0.3s ease;  margin-bottom: 0;

  }  background: linear-gradient(135deg, #f8fafc, #fff2e9);

  transition: all 0.5s ease;

  nav.active {  position: relative;

    right: 0;}

  }

.project-card::after,

  nav a {.dj-card::after {

    font-size: 1.1rem;  content: '';

    width: 100%;  position: absolute;

    padding: 0.5rem 0;  top: 0;

  }  left: 0;

  right: 0;

  nav a::after {  height: 280px;

    bottom: 0;  background: linear-gradient(to bottom, transparent 0%, rgba(15, 23, 42, 0.6) 100%);

  }  opacity: 0;

  transition: opacity 0.4s ease;

  .btn-small {  pointer-events: none;

    display: none;  z-index: 1;

  }}



  .hero {.project-card:hover::after,

    padding: 3rem 0;.dj-card:hover::after {

  }  opacity: 1;

}

  .hero h1 {

    font-size: 2.2rem;.project-card:hover img,

  }.dj-card:hover img {

  transform: scale(1.1);

  .lead {  filter: brightness(1.1);

    font-size: 1.05rem;}

  }

/* Connection Visual */

  .hero-actions {.connection-visual {

    flex-direction: column;  margin-top: 2.5rem;

  }  display: flex;

  align-items: center;

  .hero-actions .btn {  gap: 1.5rem;

    width: 100%;  justify-content: center;

    text-align: center;  flex-wrap: wrap;

  }  padding: 2rem;

  background: rgba(255, 255, 255, 0.6);

  .section {  border-radius: 1.5rem;

    padding: 3rem 0;  backdrop-filter: blur(10px);

  }  -webkit-backdrop-filter: blur(10px);

}

  .section h2 {

    font-size: 1.8rem;.connection-icon {

  }  text-align: center;

  animation: bounceIn 0.8s ease-out;

  .cards-3 {  animation-fill-mode: backwards;

    grid-template-columns: 1fr;}

    gap: 1.5rem;

  }.connection-icon:nth-child(1) {

  animation-delay: 0.2s;

  .two-col {}

    grid-template-columns: 1fr;

    gap: 1.5rem;.connection-icon:nth-child(3) {

  }  animation-delay: 0.4s;

}

  .connection-visual {

    gap: 1rem;.connection-icon:nth-child(5) {

    padding: 1.5rem;  animation-delay: 0.6s;

  }}



  .connection-icon > div:first-child {.connection-icon > div:first-child {

    font-size: 2.5rem;  font-size: 3.5rem;

  }  margin-bottom: 0.75rem;

  filter: drop-shadow(0 6px 12px rgba(249, 115, 22, 0.25));

  .connection-visual > div:nth-child(2),}

  .connection-visual > div:nth-child(4) {

    font-size: 1.5rem;.connection-icon small {

  }  font-weight: 700;

  font-size: 0.9rem;

  .footer-flex {  text-transform: uppercase;

    flex-direction: column;  letter-spacing: 0.05em;

    text-align: center;}

  }

}.connection-icon:nth-child(1) small {

  color: var(--accent);

@media (max-width: 480px) {}

  .logo img {

    height: 32px;.connection-icon:nth-child(3) small {

    max-width: 100px;  color: var(--purple);

  }}



  .hero h1 {.connection-icon:nth-child(5) small {

    font-size: 1.9rem;  color: var(--teal);

  }}



  .badge {.connection-visual > div:nth-child(2),

    font-size: 0.7rem;.connection-visual > div:nth-child(4) {

    padding: 0.4rem 1rem;  font-size: 2.5rem;

  }  color: var(--accent);

  font-weight: 800;

  .btn {}

    padding: 0.6rem 1.5rem;

    font-size: 0.85rem;@keyframes bounceIn {

  }  0% {

}    opacity: 0;

    transform: scale(0.3);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Donation Box */
.donation-box {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(168, 85, 247, 0.08));
  border: 2px solid rgba(249, 115, 22, 0.25);
  border-radius: 1rem;
  padding: 1.25rem;
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}

.donation-box::before {
  content: '♥';
  position: absolute;
  top: -10px;
  right: 15px;
  font-size: 3.5rem;
  opacity: 0.1;
  color: var(--accent);
  animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.donation-box p {
  margin: 0.5rem 0;
  padding: 0;
}

.donation-box strong {
  color: var(--accent);
}

/* Footer */
.footer {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #cbd5f5;
  padding: 2rem 0;
  margin-top: 4rem;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--purple), var(--pink), var(--teal));
}

.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.footer a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: var(--accent);
}

/* Mobile Responsive */
@media (max-width: 720px) {
  .mobile-menu-btn {
    display: block;
  }
  
  nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1.5rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  }
  
  nav.active {
    display: flex;
  }
  
  nav a {
    margin-right: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
  }
  
  nav a::after {
    display: none;
  }
  
  nav a:hover,
  nav a.active {
    background: var(--accent-soft);
    color: var(--accent);
  }
  
  .btn-small {
    display: none;
  }
  
  .footer-flex {
    flex-direction: column;
    text-align: center;
  }
  
  .hero {
    text-align: left;
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .section {
    padding: 3rem 0;
  }
  
  .section h2 {
    font-size: 2rem;
  }
  
  .cards-3 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .connection-visual {
    gap: 1rem;
    padding: 1.5rem;
  }
  
  .connection-icon > div:first-child {
    font-size: 2.5rem;
  }
  
  .two-col {
    gap: 2rem;
  }
}