*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;line-height:1.65}body{background:#0E0E1A;color:#FFFFFF;font-family:'Inter',sans-serif}
.container{max-width:900px;margin:0 auto;padding:0 24px}
.site-header{text-align:center;padding:48px 24px;background:linear-gradient(180deg,#141424,#0E0E1A)}
.logo{font-size:2.4rem;font-weight:700;color:#D4A340;text-shadow:0 0 30px rgba(212,163,64,0.3)}
.tagline{color:#1A1A2E;font-size:0.85rem;margin-top:8px;color:rgba(255,255,255,0.5)}
.hero{text-align:center;padding:48px 0;border-bottom:1px solid #1A1A2E}
.hero h2{font-size:2rem;color:#D4A340;margin-bottom:12px}
.hero p{color:rgba(255,255,255,0.7);max-width:560px;margin:0 auto;font-size:0.95rem}
.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding:48px 0}
.story-card{background:#141424;border:1px solid #1A1A2E;border-radius:8px;padding:24px;opacity:0;transform:translateY(20px);transition:all 500ms ease-out}
.story-card.visible{opacity:1;transform:translateY(0)}
.story-card:hover{border-color:#D4A340;box-shadow:0 0 20px rgba(212,163,64,0.1)}
.card-tag{font-size:0.65rem;color:#D4A340;letter-spacing:0.1em;font-weight:600}
.story-card h3{font-size:1.1rem;color:#FFFFFF;margin:8px 0}
.story-card p{font-size:0.8rem;color:rgba(255,255,255,0.6)}
.cta-section{text-align:center;padding:32px 0}
.cta-text{color:#D4A340;font-size:0.9rem;border:1px solid #D4A340;display:inline-block;padding:12px 32px;border-radius:4px;cursor:pointer;transition:all 200ms}
.cta-text:hover{background:#D4A340;color:#0E0E1A}
.site-footer{text-align:center;padding:24px;color:rgba(255,255,255,0.3);font-size:0.8rem}