* {    
margin: 0;    
padding: 0;    
box-sizing: border-box;
}
body {    
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);    
min-height: 100vh;    
padding: 20px;    
line-height: 1.6;
}
.container {    
max-width: 900px;    
margin: 0 auto;    
background: white;    
border-radius: 20px;    
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);    
overflow: hidden;
}
header {    
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);    
color: white;    
padding: 40px 30px;    
text-align: center;
}
header h1 {    
font-size: 2.5rem;    
margin-bottom: 10px;    
font-weight: 700;
}
.subtitle {    
font-size: 1.1rem;    
opacity: 0.9;    
font-weight: 300;
}
main {    
padding: 30px;
}
.reason-item {    
margin-bottom: 15px;    
border: 2px solid #e0e0e0;    
border-radius: 12px;    
overflow: hidden;    
transition: all 0.3s ease;
}
.reason-item:hover {    
border-color: #667eea;    
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}
.reason-header {    
display: flex;    
align-items: center;    
padding: 20px 25px;    
cursor: pointer;    
background: #f8f9fa;    
transition: background 0.3s ease;    
user-select: none;
}
.reason-header:hover {    
background: #e9ecef;
}
.reason-item.active .reason-header {    
background: #667eea;    
color: white;
}
.number {    
font-size: 1.5rem;    
font-weight: bold;    
color: #667eea;    
margin-right: 15px;    
min-width: 35px;
}
.reason-item.active .number {    
color: white;
}
.reason-header h2 {    
flex: 1;    
font-size: 1.2rem;    
font-weight: 600;
}
.icon {    
font-size: 1.8rem;    
font-weight: 300;    
color: #667eea;    
transition: transform 0.3s ease;    
margin-left: 15px;
}
.reason-item.active .icon {    
transform: rotate(45deg);    
color: white;
}
.reason-content {    
max-height: 0;    
overflow: hidden;    
transition: max-height 0.4s ease, padding 0.4s ease;    
background: white;
}
.reason-item.active .reason-content {    
max-height: 500px;    
padding: 20px 25px;    
border-top: 1px solid rgba(102, 126, 234, 0.2);
}
.reason-content p {    
color: #495057;    
font-size: 1rem;    
line-height: 1.8;
}
footer {    
background: #f8f9fa;    
padding: 20px;    
text-align: center;    
color: #6c757d;    
font-size: 0.9rem;    
border-top: 1px solid #e0e0e0;
}
/* Responsive Design */
@media (max-width: 768px) {    
header h1 {        
font-size: 1.8rem;    
}    
.subtitle {        
font-size: 1rem;    
}    
main {        
padding: 20px;    
}    
.reason-header {        
padding: 15px 20px;    
}    
.reason-header h2 {        
font-size: 1rem;    
}    
.number {        
font-size: 1.2rem;        
min-width: 30px;    
}    
.icon {        
font-size: 1.5rem;    
}
}
@media (max-width: 480px) {    
body {        
padding: 10px;    
}    
header {        
padding: 30px 20px;    
}    
header h1 {        
font-size: 1.5rem;    
}    
main {        
padding: 15px;    
}    
.reason-header h2 {        
font-size: 0.95rem;    
}
}