:root { --ink: #5a2448; --berry: #ff3f7f; --deep: #c92460; --lemon: #ffc42e; --cream: #fff6ea; }
html, body { margin: 0; color: var(--ink); background: var(--cream); font-family: "Baloo 2", "Trebuchet MS", system-ui, sans-serif; }
em { font-style: normal; color: var(--lemon); }
.site-nav { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; box-sizing: border-box; }
.brand { font-family: Bangers, "Trebuchet MS", sans-serif; font-size: 26px; letter-spacing: .03em; color: #fff; text-decoration: none; text-shadow: 0 2px 0 var(--deep); }
.nav-play { font-weight: 800; color: #fff; text-decoration: none; padding: 5px 18px; background: var(--berry); border-radius: 999px; box-shadow: 0 3px 0 var(--deep); }
.hero { position: relative; height: 100vh; min-height: 480px; overflow: hidden; background: #e9a06c url('https://prodmedia.tyga.host/public/tyga.cloud/landing/chainofballs.com/chainofballs_ingame_1.jpg') center / cover no-repeat; }
.hero-content { position: absolute; top: 9vh; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px; text-align: center; }
.logo { font-family: Bangers, "Trebuchet MS", sans-serif; letter-spacing: .03em; font-size: clamp(52px, 11vw, 124px); line-height: 1; color: #fff; -webkit-text-stroke: 2px var(--berry); text-shadow: 0 7px 0 var(--deep); }
.hero-sub { margin: 0; padding: 3px 18px; font-size: clamp(16px, 2.4vw, 22px); font-weight: 800; background: rgba(255, 246, 234, .88); border-radius: 999px; }
#cta, .seo-cta { display: inline-block; margin-top: 6px; font-size: 26px; font-weight: 800; color: #fff; text-decoration: none; padding: 9px 46px; background: var(--berry); border-radius: 999px; box-shadow: 0 5px 0 var(--deep); transition: transform .08s; }
#cta:active, .seo-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--deep); }
.seo { max-width: 720px; margin: 0 auto; padding: 36px 16px 48px; font-size: 18px; line-height: 1.5; }
.seo h1 { font-size: clamp(26px, 4.5vw, 38px); line-height: 1.15; margin: 0 0 12px; color: var(--deep); }
.seo h2 { font-size: 26px; margin: 30px 0 6px; color: var(--deep); }
.seo h3 { font-size: 19px; margin: 16px 0 0; }
.seo p { margin: 4px 0; }
.site-footer { padding: 18px 16px; text-align: center; font-size: 14px; font-weight: 600; background: #ffe0ec; }
@media (max-height: 480px) { .hero-content { top: 46px; gap: 4px; } .logo { font-size: 46px; } #cta { font-size: 20px; padding: 4px 30px; } }