:root { --seo-dark: #061b0d; --seo-dark-card: #102b17; --seo-cream: #f5ecd7; --seo-muted: #c8c4b5; --seo-amber: #d4842a; --seo-amber-light: #f5a843; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--seo-dark); color: var(--seo-cream); font-family: 'Outfit', sans-serif; }
a { color: inherit; text-decoration: none; }
.seo-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1160px; margin: 0 auto; padding: 1.15rem 1.4rem; }
.seo-brand { display: flex; align-items: center; gap: .55rem; color: var(--seo-amber-light); font-family: 'Playfair Display', serif; font-size: 1.45rem; font-weight: 700; }
.seo-brand::before { content: ''; width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem; border-radius: 50%; background: url('images/yala-safari-logo.png') center / cover no-repeat; box-shadow: 0 0 10px rgba(212,132,42,.4); }
.seo-nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; color: var(--seo-muted); font-size: .85rem; font-weight: 600; }
.seo-nav-links a:hover { color: var(--seo-amber-light); }
.seo-nav-links .seo-nav-cta { padding: .55rem .85rem; border: 1px solid rgba(245,236,215,.24); border-radius: 99px; color: var(--seo-cream); }
.seo-hero { padding: 5.5rem 1.4rem 4rem; background: linear-gradient(110deg, rgba(4,23,11,.96), rgba(4,23,11,.67)), var(--seo-hero, url('images/113786328082718223.jpg')) center/cover; }
.seo-wrap { width: min(1080px, 100%); margin: 0 auto; }
.seo-eyebrow { color: var(--seo-amber-light); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.seo-hero h1 { max-width: 800px; margin: .8rem 0 1rem; font-family: 'Playfair Display', serif; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.04; }
.seo-lead { max-width: 680px; margin: 0; color: var(--seo-muted); font-size: 1.08rem; line-height: 1.7; }
.seo-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.seo-button { display: inline-block; padding: .85rem 1.15rem; border-radius: 99px; background: var(--seo-amber); color: #112011; font-size: .9rem; font-weight: 800; }
.seo-button.alt { border: 1px solid rgba(245,236,215,.35); background: transparent; color: var(--seo-cream); }
.seo-content { padding: 4rem 1.4rem; }
.seo-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.4rem; }
.seo-panel { padding: 1.55rem; border: 1px solid rgba(245,236,215,.1); border-radius: 1rem; background: var(--seo-dark-card); }
.seo-panel h2 { margin: 0 0 .75rem; color: var(--seo-cream); font-family: 'Playfair Display', serif; font-size: 1.7rem; }
.seo-panel p, .seo-panel li { color: var(--seo-muted); font-size: .94rem; line-height: 1.72; }
.seo-panel p:last-child { margin-bottom: 0; }
.seo-panel ul { display: grid; gap: .45rem; padding-left: 1.15rem; margin: .7rem 0 0; }
.seo-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.4rem; }
.seo-tip { padding: 1.2rem; border-radius: .85rem; background: rgba(245,236,215,.045); }
.seo-tip strong { display: block; margin-bottom: .35rem; color: var(--seo-amber-light); font-size: .84rem; }
.seo-tip span { color: var(--seo-muted); font-size: .8rem; line-height: 1.5; }
.seo-related { margin-top: 1.4rem; padding: 1.35rem; border-left: 3px solid var(--seo-amber); border-radius: 0 .7rem .7rem 0; background: rgba(212,132,42,.08); }
.seo-related strong { color: var(--seo-cream); }
.seo-related a { color: var(--seo-amber-light); text-decoration: underline; text-underline-offset: 3px; }
.seo-footer { padding: 2rem 1.4rem; border-top: 1px solid rgba(245,236,215,.1); color: var(--seo-muted); font-size: .8rem; text-align: center; }
@media (max-width: 760px) { .seo-nav { align-items: flex-start; flex-direction: column; } .seo-grid, .seo-tips { grid-template-columns: 1fr; } .seo-hero { padding-top: 3.5rem; } }