* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }

 body {
 font-family: sans-serif;
 background: linear-gradient(180deg, #0a0a0f 0%, #12121a 50%, #0d0d14 100%);
 color: #fff;
 min-height: 100vh;
 line-height: 1.6;
 }

 a {
 text-decoration: none;
 color: inherit;
 }

 .container {
 max-width: 1000px;
 margin: 0 auto;
 padding: 0 20px;
 }

 /* Header */
 .header {
 background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(236, 72, 153, 0.15) 100%);
 border-bottom: 1px solid rgba(139, 92, 246, 0.2);
 padding: 50px 0;
 text-align: center;
 position: relative;
 overflow: hidden;
 }

 .header::before {
 content: '';
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 600px;
 height: 600px;
 background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
 pointer-events: none;
 }

 .header-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: linear-gradient(135deg, #8b5cf6, #ec4899);
 padding: 8px 20px;
 border-radius: 30px;
 font-size: 13px;
 font-weight: 600;
 margin-bottom: 20px;
 box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
 }

 .header-title {
 font-size: 42px;
 font-weight: 900;
 background: linear-gradient(135deg, #fff 0%, #c4b5fd 50%, #f0abfc 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 margin-bottom: 16px;
 letter-spacing: -1px;
 }

 .header-subtitle {
 color: #a5b4fc;
 font-size: 18px;
 margin-bottom: 16px;
 font-weight: 500;
 }

 .header-source {
 color: #64748b;
 font-size: 14px;
 }

 .header-source a {
 color: #a78bfa;
 text-decoration: none;
 font-weight: 600;
 transition: color 0.3s;
 }

 .header-source a:hover {
 color: #c4b5fd;
 }

 /* Info Section */
 .info-section {
 padding: 30px 0;
 }

 .info-box {
 background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.05) 100%);
 border: 1px solid rgba(139, 92, 246, 0.25);
 border-radius: 16px;
 padding: 20px 28px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 16px;
 }

 .info-left {
 display: flex;
 align-items: center;
 gap: 12px;
 }

 .info-icon {
 width: 44px;
 height: 44px;
 background: linear-gradient(135deg, #8b5cf6, #ec4899);
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 22px;
 }

 .info-text h3 {
 font-size: 16px;
 font-weight: 700;
 margin-bottom: 2px;
 }

 .info-text p {
 font-size: 13px;
 color: #94a3b8;
 }

 .info-criteria {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 }

 .criteria-tag {
 background: rgba(255, 255, 255, 0.08);
 border: 1px solid rgba(255, 255, 255, 0.1);
 padding: 8px 16px;
 border-radius: 25px;
 font-size: 13px;
 font-weight: 500;
 display: flex;
 align-items: center;
 gap: 6px;
 transition: all 0.3s;
 }

 .criteria-tag:hover {
 background: rgba(139, 92, 246, 0.2);
 border-color: rgba(139, 92, 246, 0.4);
 }

 /* Section Titles */
 .section-title {
 font-size: 28px;
 font-weight: 800;
 margin-bottom: 28px;
 text-align: center;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 12px;
 }

 .section-title-icon {
 font-size: 32px;
 }

 /* TOP-3 Section */
 .top3-section {
 padding: 40px 0;
 }

 .top3-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
 }

 /* TOP-3 Card */
 .top3-card {
 background: linear-gradient(180deg, rgba(30, 30, 50, 0.9) 0%, rgba(20, 20, 35, 0.95) 100%);
 border-radius: 20px;
 overflow: hidden;
 position: relative;
 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s;
 }

 .top3-card::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: 20px;
 padding: 2px;
 background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%);
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
 pointer-events: none;
 }

 .top3-card:hover {
 transform: translateY(-8px) scale(1.02);
 }

 .top3-card.rank-1 {
 background: linear-gradient(180deg, rgba(251, 191, 36, 0.15) 0%, rgba(20, 20, 35, 0.95) 30%);
 box-shadow: 0 0 40px rgba(251, 191, 36, 0.2), 0 20px 40px rgba(0,0,0,0.3);
 }

 .top3-card.rank-1::before {
 background: linear-gradient(180deg, rgba(251, 191, 36, 0.6) 0%, rgba(251, 191, 36, 0.1) 50%, transparent 100%);
 }

 .top3-card.rank-1:hover {
 box-shadow: 0 0 60px rgba(251, 191, 36, 0.35), 0 25px 50px rgba(0,0,0,0.4);
 }

 .top3-card.rank-2 {
 background: linear-gradient(180deg, rgba(192, 192, 192, 0.12) 0%, rgba(20, 20, 35, 0.95) 30%);
 box-shadow: 0 0 40px rgba(192, 192, 192, 0.15), 0 20px 40px rgba(0,0,0,0.3);
 }

 .top3-card.rank-2::before {
 background: linear-gradient(180deg, rgba(192, 192, 192, 0.5) 0%, rgba(192, 192, 192, 0.1) 50%, transparent 100%);
 }

 .top3-card.rank-2:hover {
 box-shadow: 0 0 60px rgba(192, 192, 192, 0.3), 0 25px 50px rgba(0,0,0,0.4);
 }

 .top3-card.rank-3 {
 background: linear-gradient(180deg, rgba(205, 127, 50, 0.12) 0%, rgba(20, 20, 35, 0.95) 30%);
 box-shadow: 0 0 40px rgba(205, 127, 50, 0.15), 0 20px 40px rgba(0,0,0,0.3);
 }

 .top3-card.rank-3::before {
 background: linear-gradient(180deg, rgba(205, 127, 50, 0.5) 0%, rgba(205, 127, 50, 0.1) 50%, transparent 100%);
 }

 .top3-card.rank-3:hover {
 box-shadow: 0 0 60px rgba(205, 127, 50, 0.3), 0 25px 50px rgba(0,0,0,0.4);
 }

 .card-image-wrapper {
 position: relative;
 height: 160px;
 overflow: hidden;
 }

 .top3-card .card-image-wrapper {
 height: 180px;
 }

 .card-image {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.5s;
 }

 .top3-card:hover .card-image {
 transform: scale(1.1);
 }

 .card-image-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8) 100%);
 }

 .card-rank {
 position: absolute;
 top: 14px;
 left: 14px;
 width: 42px;
 height: 42px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
 font-size: 18px;
 box-shadow: 0 4px 15px rgba(0,0,0,0.3);
 }

 .rank-1 .card-rank {
 background: linear-gradient(135deg, #fbbf24, #f59e0b);
 color: #000;
 }

 .rank-2 .card-rank {
 background: linear-gradient(135deg, #e5e7eb, #9ca3af);
 color: #000;
 }

 .rank-3 .card-rank {
 background: linear-gradient(135deg, #cd7f32, #b8860b);
 color: #fff;
 }

 .card-rating {
 position: absolute;
 top: 14px;
 right: 14px;
 background: rgba(0, 0, 0, 0.75);
 backdrop-filter: blur(10px);
 padding: 6px 14px;
 border-radius: 25px;
 font-size: 15px;
 font-weight: 700;
 display: flex;
 align-items: center;
 gap: 5px;
 border: 1px solid rgba(255,255,255,0.1);
 }

 .card-rating-star {
 color: #fbbf24;
 }

 .card-badge {
 position: absolute;
 bottom: 14px;
 left: 14px;
 padding: 6px 14px;
 border-radius: 25px;
 font-size: 12px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 }

 .rank-1 .card-badge {
 background: linear-gradient(135deg, #fbbf24, #f59e0b);
 color: #000;
 box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
 }

 .rank-2 .card-badge {
 background: linear-gradient(135deg, #e5e7eb, #9ca3af);
 color: #000;
 box-shadow: 0 4px 15px rgba(192, 192, 192, 0.3);
 }

 .rank-3 .card-badge {
 background: linear-gradient(135deg, #cd7f32, #b8860b);
 color: #fff;
 box-shadow: 0 4px 15px rgba(205, 127, 50, 0.4);
 }

 .card-content {
 padding: 20px;
 }

 .card-name {
 font-size: 18px;
 font-weight: 700;
 margin-bottom: 10px;
 }

 .card-description {
 color: #94a3b8;
 font-size: 14px;
 margin-bottom: 14px;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
 line-height: 1.5;
 }

 .card-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 16px;
 }

 .card-tag {
 background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(236, 72, 153, 0.15) 100%);
 color: #c4b5fd;
 padding: 5px 12px;
 border-radius: 8px;
 font-size: 12px;
 font-weight: 500;
 border: 1px solid rgba(139, 92, 246, 0.2);
 }

 .card-buttons {
 display: flex;
 gap: 10px;
 }

 .btn-open {
 flex: 1;
 background: linear-gradient(135deg, #8b5cf6, #7c3aed);
 color: #fff;
 border: none;
 padding: 12px 10px;
 border-radius: 12px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 text-decoration: none;
 text-align: center;
 transition: all 0.3s;
 box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
 }

 .btn-open:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
 }

 .btn-details {
 background: rgba(255, 255, 255, 0.08);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.15);
 padding: 12px 20px;
 border-radius: 12px;
 font-size: 14px;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.3s;
 text-decoration: none;
 text-align: center;
 }

 .btn-details:hover {
 background: rgba(139, 92, 246, 0.2);
 border-color: rgba(139, 92, 246, 0.4);
 color: #c4b5fd;
 }

 /* Other Section */
 .other-section {
 padding: 40px 0 50px;
 }

 .other-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 18px;
 }

 /* Other Card (smaller) */
 .other-card {
 background: linear-gradient(180deg, rgba(30, 30, 50, 0.7) 0%, rgba(20, 20, 35, 0.8) 100%);
 border: 1px solid rgba(255, 255, 255, 0.08);
 border-radius: 16px;
 overflow: hidden;
 transition: all 0.3s;
 }

 .other-card:hover {
 transform: translateY(-4px);
 border-color: rgba(139, 92, 246, 0.4);
 box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 20px rgba(139, 92, 246, 0.15);
 }

 .other-card:hover .card-image {
 transform: scale(1.1);
 }

 .other-card .card-image-wrapper {
 height: 110px;
 }

 .other-card .card-rank {
 width: 32px;
 height: 32px;
 font-size: 14px;
 background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(124, 58, 237, 0.9));
 top: 10px;
 left: 10px;
 }

 .other-card .card-rating {
 top: 10px;
 right: 10px;
 padding: 4px 10px;
 font-size: 13px;
 }

 .other-card .card-content {
 padding: 14px;
 }

 .other-card .card-name {
 font-size: 15px;
 margin-bottom: 8px;
 }

 .other-card .card-description {
 font-size: 12px;
 -webkit-line-clamp: 2;
 margin-bottom: 12px;
 }

 .other-card .card-tags {
 display: none;
 }

 .other-card .card-buttons {
 flex-direction: column;
 gap: 8px;
 }

 .other-card .btn-open,
 .other-card .btn-details {
 padding: 10px 14px;
 font-size: 13px;
 }

 .other-card .btn-open {
 width: 100%;
 }

 .other-card .btn-details {
 width: 100%;
 }

 /* Join Section */
 .join-section {
 padding: 50px 0;
 }

 .join-box {
 background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(236, 72, 153, 0.1) 100%);
 border: 1px solid rgba(139, 92, 246, 0.3);
 border-radius: 24px;
 padding: 40px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 24px;
 position: relative;
 overflow: hidden;
 }

 .join-box::before {
 content: '';
 position: absolute;
 top: -50%;
 right: -20%;
 width: 400px;
 height: 400px;
 background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
 pointer-events: none;
 }

 .join-icon {
 font-size: 48px;
 margin-bottom: 12px;
 }

 .join-title {
 font-size: 24px;
 font-weight: 800;
 margin-bottom: 8px;
 }

 .join-text {
 color: #94a3b8;
 font-size: 15px;
 }

 .join-button {
 background: linear-gradient(135deg, #8b5cf6, #ec4899);
 color: #fff;
 border: none;
 padding: 16px 40px;
 border-radius: 14px;
 font-size: 17px;
 font-weight: 700;
 cursor: pointer;
 transition: all 0.3s;
 box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
 position: relative;
 z-index: 1;
 text-decoration: none;
 display: inline-block;
 }

 .join-button:hover {
 transform: translateY(-3px) scale(1.02);
 box-shadow: 0 12px 40px rgba(139, 92, 246, 0.5);
 }

 /* Footer */
 .footer {
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 padding: 40px 0;
 background: rgba(0, 0, 0, 0.2);
 }

 .footer-content {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 20px;
 flex-wrap: wrap;
 gap: 20px;
 }

 .footer-logo {
 display: flex;
 align-items: center;
 gap: 10px;
 font-weight: 700;
 font-size: 18px;
 }

 .footer-logo-icon {
 font-size: 28px;
 }

 .footer-links {
 display: flex;
 gap: 30px;
 }

 .footer-links a {
 color: #94a3b8;
 text-decoration: none;
 font-size: 15px;
 font-weight: 500;
 transition: color 0.3s;
 }

 .footer-links a:hover {
 color: #a78bfa;
 }

 .footer-copy {
 color: #475569;
 font-size: 14px;
 text-align: center;
 }

 /* Responsive */
 @media (max-width: 900px) {
 .other-grid {
 grid-template-columns: repeat(3, 1fr);
 }
 }

 @media (max-width: 768px) {
 .container {
 padding: 0 16px;
 }

 .header {
 padding: 40px 0;
 }
 
 .header-title {
 font-size: 32px;
 }
 
 .header-subtitle {
 font-size: 16px;
 }
 
 .info-box {
 flex-direction: column;
 align-items: flex-start;
 padding: 20px;
 }
 
 .info-criteria {
 width: 100%;
 justify-content: flex-start;
 }

 .section-title {
 font-size: 24px;
 }
 
 .top3-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: 16px;
 }
 
 .other-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: 14px;
 }
 
 .join-box {
 flex-direction: column;
 text-align: center;
 padding: 32px 24px;
 }
 
 .join-button {
 width: 100%;
 }

 .footer-content {
 flex-direction: column;
 text-align: center;
 }
 }

 @media (max-width: 540px) {
 .container {
 padding: 0 14px;
 }
 
 .header {
 padding: 32px 0;
 }
 
 .header-badge {
 font-size: 12px;
 padding: 6px 16px;
 }
 
 .header-title {
 font-size: 26px;
 }

 .header-subtitle {
 font-size: 14px;
 }

 .info-left {
 flex-direction: column;
 align-items: flex-start;
 gap: 10px;
 }

 .criteria-tag {
 padding: 6px 12px;
 font-size: 12px;
 }

 .section-title {
 font-size: 20px;
 margin-bottom: 20px;
 }

 .section-title-icon {
 font-size: 26px;
 }
 
 .top3-grid {
 grid-template-columns: 1fr;
 gap: 18px;
 }

 .top3-card .card-image-wrapper {
 height: 220px;
 }

 .top3-card .card-content {
 padding: 16px;
 }
 
 .other-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: 12px;
 }
 
 .other-card .card-image-wrapper {
 height: 90px;
 }
 
 .other-card .card-content {
 padding: 12px;
 }
 
 .other-card .card-name {
 font-size: 13px;
 }
  

 .other-card .btn-open,
 .other-card .btn-details {
 padding: 8px 10px;
 font-size: 12px;
 }
.section-title { 
    text-align: left;
 }

 .join-title {
 font-size: 20px;
 }

 .join-text {
 font-size: 14px;
 }

 .join-button {
 padding: 14px 32px;
 font-size: 15px;
 }
 }

 /* Animations */
 @keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }

 .top3-card, .other-card {
 animation: fadeInUp 0.5s ease forwards;
 }

 .top3-card:nth-child(1) { animation-delay: 0.1s; }
 .top3-card:nth-child(2) { animation-delay: 0.2s; }
 .top3-card:nth-child(3) { animation-delay: 0.3s; }