.hero-content {
   animation: fadeInDown 1.2s;
}
.hero-logo {
   animation: bounceIn 1.4s;
}
.hero-title {
   animation: fadeInLeft 1.2s;
}
.hero-subtitle {
   animation: fadeInRight 1.2s;
}
.cta-btn {
   animation: pulse 2s infinite alternate;
}
.pillar-card {
   animation: fadeInUp 1.2s;
   transition: transform 0.3s, box-shadow 0.3s;
}
.pillar-card:hover {
   box-shadow: 0 12px 32px rgba(106,27,154,0.22);
   background: linear-gradient(120deg, #b8860b 0%, #f3e9fc 100%);
}
.section-card {
   transition: transform 0.3s, box-shadow 0.3s, background 0.3s, color 0.3s;
   animation: fadeInUp 1.2s;
   color: #6a1b9a;
}
.section-card:hover {
   transform: scale(0.9) translateY(-4px);
   background: linear-gradient(120deg, #b8860b 0%, #f3e9fc 100%);
   box-shadow: 0 8px 32px rgba(106,27,154,0.22);
   letter-spacing: 0.5px;
}
.coming-soon {
   animation: fadeIn 1.2s;
}
.news-placeholder {
   animation: fadeInUp 1.2s;
}
.community-cta {
   animation: fadeInDown 1.2s;
}
.cta-link {
   transition: background 0.2s, color 0.2s, box-shadow 0.2s;
   animation: pulse 2s infinite alternate;
}
.cta-link:hover {
   background: #fff;
   color: #b8860b;
   box-shadow: 0 4px 16px rgba(184,134,11,0.18);
}

@keyframes fadeInDown {
   0% { opacity: 0; transform: translateY(-40px); }
   100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
   0% { opacity: 0; transform: translateX(-40px); }
   100% { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
   0% { opacity: 0; transform: translateX(40px); }
   100% { opacity: 1; transform: translateX(0); }
}
@keyframes bounceIn {
   0% { opacity: 0; transform: scale(0.5); }
   60% { opacity: 1; transform: scale(1.2); }
   80% { transform: scale(0.95); }
   100% { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
   0% { box-shadow: 0 0 0 0 rgba(106,27,154,0.18); }
   100% { box-shadow: 0 0 24px 8px rgba(184,134,11,0.18); }
}

body {
   font-family: 'Segoe UI', Arial, sans-serif;
   margin: 0;
   padding: 0;
   background: linear-gradient(120deg, #f8fafc 0%, #e9e4f0 100%);
   color: #222;
}

.hero {
   background: linear-gradient(120deg, #b8860b 0%, #6a1b9a 100%);
   color: #fff;
   padding: 64px 0 48px 0;
   text-align: center;
   position: relative;
   box-shadow: 0 4px 24px rgba(106,27,154,0.08);
}
.hero-logo {
   width: 100px;
   height: 50px;
   display: none;
   margin-bottom: 16px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.hero-title {
   font-size: 2.5rem;
   font-weight: 700;
   margin: 0 0 12px 0;
   letter-spacing: 1px;
}
.hero-subtitle {
   font-size: 1.2rem;
   font-weight: 400;
   margin-bottom: 32px;
}
.cta-btn {
   display: inline-block;
   background: #fff;
   color: #6a1b9a;
   font-weight: 600;
   padding: 12px 32px;
   border-radius: 32px;
   text-decoration: none;
   font-size: 1.1rem;
   box-shadow: 0 2px 8px rgba(0,0,0,0.08);
   transition: background 0.2s, color 0.2s, box-shadow 0.2s;
   animation: fadeInUp 1.2s;
}
.cta-btn:hover {
   background: #6a1b9a;
   color: #fff;
   box-shadow: 0 4px 16px rgba(106,27,154,0.18);
}

.pillars {
   background: #fff;
   padding: 40px 0 24px 0;
   text-align: center;
}
.pillars-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
   justify-content: center;
   margin-top: 24px;
}
.pillar-card {
   background: #f3e9fc;
   border-radius: 16px;
   box-shadow: 0 2px 8px rgba(106,27,154,0.08);
   padding: 24px 32px;
   min-width: 220px;
   max-width: 300px;
   flex: 1 1 220px;
   transition: box-shadow 0.2s;
}
.pillar-card:hover {
   box-shadow: 0 6px 24px rgba(106,27,154,0.18);
}

.sections-grid {
   background: #f8fafc;
   padding: 40px 0;
   text-align: center;
}
.grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 20px;
   margin-top: 24px;
}
.section-card {
   background: #fff;
   border-radius: 14px;
   box-shadow: 0 2px 8px rgba(106,27,154,0.08);
   padding: 24px 0;
   font-size: 1.1rem;
   font-weight: 600;
   color: #6a1b9a;
   text-decoration: none;
   transition: box-shadow 0.2s, background 0.2s, color 0.2s;
   position: relative;
}
.section-card:hover {
   background: #6a1b9a;
   color: #fff;
   box-shadow: 0 6px 24px rgba(106,27,154,0.18);
}
.coming-soon {
   opacity: 0.6;
   pointer-events: none;
   background: repeating-linear-gradient(135deg, #f3e9fc, #f8fafc 20px);
}

.latest-news {
   background: #fff;
   padding: 32px 0;
   text-align: center;
}
.news-placeholder {
   background: #f3e9fc;
   border-radius: 12px;
   padding: 24px;
   color: #6a1b9a;
   font-size: 1.1rem;
   margin: 0 auto;
   max-width: 400px;
}

.community-cta {
   background: linear-gradient(120deg, #b8860b 0%, #6a1b9a 100%);
   color: #fff;
   padding: 40px 0;
   text-align: center;
}
.community-cta .cta-link {
   color: #fff;
   background: #6a1b9a;
   padding: 8px 20px;
   border-radius: 20px;
   text-decoration: none;
   font-weight: 600;
   margin-left: 8px;
   transition: background 0.2s;
}
.community-cta .cta-link:hover {
   background: #b8860b;
}

.site-footer {
   background: #6a1b9a;
   color: #fff;
   text-align: center;
   padding: 24px 0 12px 0;
   font-size: 1rem;
   margin-top: 32px;
}

@media (max-width: 700px) {
    .hero-title { font-size: 1.5rem; }
    /* Stack pillar cards vertically with consistent spacing */
    .pillars-grid {
       display: flex;
       flex-direction: column;
       gap: 16px;
       align-items: stretch;
    }
    /* Make the sections grid a single-column responsive layout */
    .grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 16px;
       margin-top: 20px;
       padding: 0 12px;
       box-sizing: border-box;
    }
    .pillar-card, .section-card {
       width: 100%;
       min-width: 0;
       max-width: 100%;
       padding: 16px;
       box-sizing: border-box;
    }
    .section-card { font-size: 1rem; }
}

@keyframes fadeInUp {
   0% { opacity: 0; transform: translateY(20px); }
   100% { opacity: 1; transform: translateY(0); }
}

.github {
   color: #fadf9c;
   font-size: bold;
   font-family: monospace;
}