* { margin: 0; padding: 0; box-sizing: border-box; } html, body { margin: 0 !important; padding: 0 !important; width: 100% !important; background: #0B0D10 !important; } .hero { width: 100vw; height: 100vh; position: relative; left: 50%; margin-left: -50vw; background: linear-gradient(135deg, rgba(11, 13, 16, 0.95) 0%, rgba(51, 42, 35, 0.6) 100%); display: flex; align-items: center; justify-content: center; text-align: center; color: white; overflow: hidden; } .hero h1 { font-size: 4.5rem; font-weight: 700; margin-bottom: 1.5rem; font-family: Georgia, serif; letter-spacing: -2px; text-shadow: 0 4px 20px rgba(0,0,0,0.6); max-width: 900px; } .hero p { font-size: 1.35rem; color: #C8CDD3; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.7; text-shadow: 0 2px 10px rgba(0,0,0,0.5); } .hero-buttons { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; } button { padding: 0.85rem 2rem; border: 1.5px solid #8B755B; background: transparent; color: #D4A373; cursor: pointer; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; border-radius: 4px; transition: all 0.3s ease; } button:hover { background: rgba(212, 163, 115, 0.12); border-color: #D4A373; transform: translateY(-2px); } button.primary { background: #D4A373; color: #0B0D10; box-shadow: 0 8px 24px rgba(212, 163, 115, 0.25); } button.primary:hover { background: #E5B89A; box-shadow: 0 12px 32px rgba(212, 163, 115, 0.35); } .section { width: 100%; background: #0B0D10; padding: 5rem 2rem; } .inner { max-width: 1200px; margin: 0 auto; } h2 { font-size: 2.2rem; color: white; margin-bottom: 3rem; text-align: center; font-family: Georgia, serif; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; } .card { background: linear-gradient(135deg, rgba(51, 42, 35, 0.5) 0%, rgba(30, 27, 24, 0.5) 100%); border: 1px solid rgba(212, 163, 115, 0.2); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; min-height: 260px; } .card:hover { transform: translateY(-6px); border-color: rgba(212, 163, 115, 0.5); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4); } .card-image { height: 140px; background: linear-gradient(135deg, #8B755B 0%, #5A4E42 100%); display: flex; align-items: center; justify-content: center; font-size: 3rem; } .card-body { padding: 1.75rem; flex-grow: 1; } .card-body h3 { font-size: 1.15rem; color: #D4A373; margin-bottom: 0.75rem; font-weight: 600; } .card-body p { font-size: 0.95rem; color: #9BA0A8; line-height: 1.6; } .article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; } .article-card { background: rgba(51, 42, 35, 0.35); border: 1px solid rgba(212, 163, 115, 0.18); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; } .article-card:hover { transform: translateY(-8px); border-color: rgba(212, 163, 115, 0.35); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); } .article-image { width: 100%; height: 220px; background: linear-gradient(135deg, #8B755B 0%, #5A4E42 100%); display: flex; align-items: center; justify-content: center; font-size: 3rem; } .article-body { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; } .article-meta { display: flex; gap: 1.25rem; font-size: 0.8rem; color: #9BA0A8; margin-bottom: 1.25rem; } .article-body h3 { font-size: 1.35rem; color: white; margin-bottom: 0.75rem; font-weight: 600; } .article-body p { font-size: 0.95rem; color: #B0B4BA; flex-grow: 1; line-height: 1.6; } .ebook { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; background: linear-gradient(135deg, rgba(51, 42, 35, 0.6) 0%, rgba(30, 27, 24, 0.6) 100%); border: 1px solid rgba(212, 163, 115, 0.25); padding: 4rem; border-radius: 12px; margin-top: 3rem; } .book { width: 220px; height: 310px; background: linear-gradient(135deg, #8B755B 0%, #5A4E42 100%); border: 2px solid #D4A373; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: rgba(212, 163, 115, 0.3); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6); margin: 0 auto; } .ebook h2 { text-align: left; margin: 0 0 1.25rem 0; font-size: 2.2rem; } .ebook p { color: #B0B4BA; margin-bottom: 2rem; line-height: 1.8; font-size: 1.05rem; } .features { list-style: none; margin: 2rem 0; padding: 0; } .features li { color: #D4A373; margin-bottom: 1rem; padding-left: 1.75rem; position: relative; font-size: 1rem; } .features li::before { content: ‘▸’; position: absolute; left: 0; } .newsletter { text-align: center; background: linear-gradient(135deg, rgba(212, 163, 115, 0.1) 0%, rgba(212, 163, 115, 0.04) 100%); border: 1px solid rgba(212, 163, 115, 0.3); border-radius: 12px; padding: 4rem 2rem; } .newsletter h2 { margin-bottom: 1rem; } .newsletter p { color: #B0B4BA; margin-bottom: 2.5rem; font-size: 1.15rem; } .form { display: flex; gap: 0.75rem; max-width: 550px; margin: 0 auto; flex-wrap: wrap; justify-content: center; } .form input { flex: 1; min-width: 280px; padding: 0.9rem 1.25rem; background: rgba(30, 27, 24, 0.7); border: 1px solid rgba(212, 163, 115, 0.3); border-radius: 4px; color: white; font-size: 0.95rem; } .form input::placeholder { color: #8B8F97; } .form input:focus { outline: none; border-color: #D4A373; background: rgba(30, 27, 24, 0.9); } footer { background: rgba(11, 13, 16, 0.98); border-top: 1px solid rgba(139, 117, 91, 0.2); padding: 2.5rem; text-align: center; color: #8B8F97; font-size: 0.9rem; width: 100vw; position: relative; left: 50%; margin-left: -50vw; } footer a { color: #D4A373; text-decoration: none; } @media (max-width: 768px) { .hero h1 { font-size: 2.5rem; } .hero p { font-size: 1.05rem; } button { font-size: 12px; padding: 0.7rem 1.3rem; } h2 { font-size: 1.75rem; } }