*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
body{font-family:Arial,sans-serif;background:linear-gradient(45deg,#1f293b,#2d3748,#1f293b,#4a5568,#2d3748);background-size:400% 400%;animation:gradientShift 20s ease infinite;color:#ffffff;line-height:1.6;overflow-x:hidden}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.banner-background{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:-2;overflow:hidden}
.banner-background img{width:100%;height:100%;object-fit:cover;opacity:0.1}
.top-navigation{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(31,41,59,0.95);backdrop-filter:blur(10px);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;transition:all 0.3s ease}
.nav-brand img{display:block}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-item,.nav-item-active{text-decoration:none;color:#ffffff;font-weight:500;transition:color 0.3s ease}
.nav-item:hover{color:#ffd700}
.nav-item-active{color:#ffd700;font-weight:600}
.auth-buttons{display:flex;gap:15px}
.btn-signin,.btn-signup{padding:8px 20px;border-radius:25px;text-decoration:none;font-weight:600;transition:all 0.3s ease}
.btn-signin{background:transparent;border:2px solid #ffd700;color:#ffd700}
.btn-signin:hover{background:#ffd700;color:#1f293b}
.btn-signup{background:#ffd700;color:#1f293b;border:2px solid #ffd700}
.btn-signup:hover{background:transparent;color:#ffd700}
.mobile-menu-toggle{display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:5px}
.mobile-menu-toggle span{width:25px;height:3px;background:#ffffff;margin:3px 0;transition:0.3s}
.mobile-menu{display:none;position:fixed;top:70px;left:0;right:0;background:rgba(31,41,59,0.98);backdrop-filter:blur(15px);z-index:999;padding:20px;border-top:1px solid rgba(255,215,0,0.3)}
.mobile-nav-links{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}
.mobile-nav-item,.mobile-nav-item-active{text-decoration:none;color:#ffffff;font-size:18px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.1)}
.mobile-nav-item-active{color:#ffd700;font-weight:600}
.mobile-auth-buttons{display:flex;gap:10px}
.mobile-btn-signin,.mobile-btn-signup{padding:12px 25px;border-radius:25px;text-decoration:none;font-weight:600;text-align:center;flex:1}
.mobile-btn-signin{background:transparent;border:2px solid #ffd700;color:#ffd700}
.mobile-btn-signup{background:#ffd700;color:#1f293b;border:2px solid #ffd700}
.page-wrapper{margin-top:70px;position:relative;z-index:1}
.page-wrapper::before{content:'⚽';position:absolute;font-size:8rem;opacity:0.12;top:100px;left:5%;animation:floatLeft 20s linear infinite;z-index:-1}
.page-wrapper::after{content:'🎰';position:absolute;font-size:6rem;opacity:0.08;top:800px;right:8%;animation:floatRight 25s linear infinite;z-index:-1}
@keyframes floatLeft{0%{transform:translateX(-50px) translateY(0px)}50%{transform:translateX(100px) translateY(-30px)}100%{transform:translateX(-50px) translateY(0px)}}
@keyframes floatRight{0%{transform:translateX(50px) translateY(0px)}50%{transform:translateX(-80px) translateY(40px)}100%{transform:translateX(50px) translateY(0px)}}
.platform-introduction{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;padding:20px}
.intro-layout{max-width:800px;z-index:2;position:relative}
.intro-layout h1{font-size:clamp(2rem,5vw,4rem);margin-bottom:20px;background:linear-gradient(45deg,#ffffff,#ffd700);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.lead-statement{font-size:clamp(1.1rem,2.5vw,1.4rem);margin-bottom:30px;opacity:0.9}
.cta-primary{display:inline-block;padding:15px 40px;background:linear-gradient(45deg,#ffd700,#ffed4e);color:#1f293b;text-decoration:none;border-radius:30px;font-weight:700;font-size:1.2rem;transition:all 0.3s ease;box-shadow:0 10px 30px rgba(255,215,0,0.3)}
.cta-primary:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(255,215,0,0.4)}
.quick-stats{padding:60px 20px;position:relative}
.quick-stats::before{content:'💎';position:absolute;font-size:7rem;opacity:0.1;top:20px;right:10%;animation:floatDiagonal 18s ease-in-out infinite;z-index:-1}
@keyframes floatDiagonal{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-40px,-20px) rotate(180deg)}100%{transform:translate(0,0) rotate(360deg)}}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;max-width:1200px;margin:0 auto}
.stat-card{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);padding:25px;border-radius:20px;text-align:center;transition:all 0.3s ease;border:1px solid rgba(255,215,0,0.2)}
.stat-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,0.2)}
.stat-emoji{font-size:2.5rem;margin-bottom:10px}
.stat-number{font-size:1.8rem;font-weight:700;color:#ffd700;margin-bottom:5px}
.stat-label{font-size:0.9rem;opacity:0.8}
.sports-betting-overview{padding:80px 20px;position:relative}
.sports-betting-overview::before{content:'⚡';position:absolute;font-size:6rem;opacity:0.15;top:50px;left:5%;animation:pulse 15s ease-in-out infinite;z-index:-1}
@keyframes pulse{0%,100%{opacity:0.15;transform:scale(1)}50%{opacity:0.05;transform:scale(1.1)}}
.sports-betting-overview h2{font-size:clamp(1.8rem,4vw,2.5rem);text-align:center;margin-bottom:30px;color:#ffd700}
.sports-betting-overview>p{max-width:800px;margin:0 auto 40px;text-align:center;font-size:1.1rem;opacity:0.9}
.betting-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1200px;margin:0 auto}
.feature-card{background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);padding:30px;border-radius:20px;transition:all 0.3s ease}
.feature-card:hover{transform:translateY(-5px);background:rgba(255,255,255,0.12)}
.feature-card h3{color:#ffd700;margin-bottom:15px;font-size:1.3rem}
.feature-card p{margin-bottom:15px;opacity:0.9}
.casino-gaming-features{padding:80px 20px;position:relative}
.casino-gaming-features::before{content:'🎲';position:absolute;font-size:7rem;opacity:0.12;bottom:100px;right:8%;animation:rotateFloat 22s linear infinite;z-index:-1}
@keyframes rotateFloat{0%{transform:rotate(0deg) translateX(30px)}25%{transform:rotate(90deg) translateX(-20px)}50%{transform:rotate(180deg) translateX(30px)}75%{transform:rotate(270deg) translateX(-20px)}100%{transform:rotate(360deg) translateX(30px)}}
.casino-gaming-features h2{font-size:clamp(1.8rem,4vw,2.5rem);text-align:center;margin-bottom:30px;color:#ffd700}
.casino-gaming-features>p{max-width:800px;margin:0 auto 40px;text-align:center;font-size:1.1rem;opacity:0.9}
.casino-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1200px;margin:0 auto}
.game-category{background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);padding:30px;border-radius:20px;transition:all 0.3s ease}
.game-category:hover{transform:translateY(-5px);background:rgba(255,255,255,0.12)}
.game-category h3{color:#ffd700;margin-bottom:15px;font-size:1.3rem}
.game-category p{margin-bottom:15px;opacity:0.9}
.payment-methods-kenya{padding:80px 20px;position:relative}
.payment-methods-kenya::before{content:'💳';position:absolute;font-size:6rem;opacity:0.1;top:80px;left:8%;animation:slideVertical 20s ease-in-out infinite;z-index:-1}
@keyframes slideVertical{0%,100%{transform:translateY(0px)}50%{transform:translateY(-50px)}}
.payment-methods-kenya h2{font-size:clamp(1.8rem,4vw,2.5rem);text-align:center;margin-bottom:30px;color:#ffd700}
.payment-methods-kenya>p{max-width:800px;margin:0 auto 40px;text-align:center;font-size:1.1rem;opacity:0.9}
.payments-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1200px;margin:0 auto}
.payment-method{background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);padding:30px;border-radius:20px;transition:all 0.3s ease}
.payment-method:hover{transform:translateY(-5px);background:rgba(255,255,255,0.12)}
.payment-method h3{color:#ffd700;margin-bottom:15px;font-size:1.3rem}
.payment-method p{margin-bottom:15px;opacity:0.9}
.registration-process{padding:80px 20px;text-align:center;position:relative}
.registration-process::before{content:'📝';position:absolute;font-size:6rem;opacity:0.12;top:40px;right:10%;animation:bounce 16s ease-in-out infinite;z-index:-1}
@keyframes bounce{0%,100%{transform:translateY(0px)}50%{transform:translateY(-25px)}}
.registration-process h2{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:30px;color:#ffd700}
.registration-process>p{max-width:800px;margin:0 auto 40px;font-size:1.1rem;opacity:0.9}
.registration-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;max-width:1000px;margin:0 auto 40px}
.step-card{background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);padding:25px;border-radius:20px;position:relative;transition:all 0.3s ease}
.step-card:hover{transform:translateY(-5px);background:rgba(255,255,255,0.12)}
.step-number{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:#ffd700;color:#1f293b;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem}
.step-content{padding-top:20px}
.step-content h4{color:#ffd700;margin-bottom:10px;font-size:1.1rem}
.step-content p{opacity:0.9;font-size:0.95rem;text-align:left}
.cta-secondary{display:inline-block;padding:12px 35px;background:linear-gradient(45deg,#ffd700,#ffed4e);color:#1f293b;text-decoration:none;border-radius:25px;font-weight:600;transition:all 0.3s ease;margin-top:20px}
.cta-secondary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,215,0,0.3)}
.mobile-app-overview{padding:80px 20px;position:relative}
.mobile-app-overview::before{content:'📱';position:absolute;font-size:7rem;opacity:0.1;bottom:60px;left:5%;animation:swing 18s ease-in-out infinite;z-index:-1}
@keyframes swing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.mobile-app-overview h2{font-size:clamp(1.8rem,4vw,2.5rem);text-align:center;margin-bottom:30px;color:#ffd700}
.mobile-app-overview>p{max-width:800px;margin:0 auto 40px;text-align:center;font-size:1.1rem;opacity:0.9}
.mobile-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1000px;margin:0 auto 40px}
.mobile-feature{background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);padding:30px;border-radius:20px;transition:all 0.3s ease}
.mobile-feature:hover{transform:translateY(-5px);background:rgba(255,255,255,0.12)}
.mobile-feature h3{color:#ffd700;margin-bottom:15px;font-size:1.3rem}
.mobile-feature p{margin-bottom:15px;opacity:0.9}
.mobile-app-overview>p:last-of-type{max-width:800px;margin:0 auto;text-align:center;opacity:0.9}
.bonus-promotions{padding:80px 20px;position:relative}
.bonus-promotions::before{content:'🎁';position:absolute;font-size:6rem;opacity:0.15;top:100px;right:12%;animation:rotateScale 20s ease-in-out infinite;z-index:-1}
@keyframes rotateScale{0%,100%{transform:rotate(0deg) scale(1)}25%{transform:rotate(90deg) scale(1.05)}50%{transform:rotate(180deg) scale(0.95)}75%{transform:rotate(270deg) scale(1.05)}}
.bonus-promotions h2{font-size:clamp(1.8rem,4vw,2.5rem);text-align:center;margin-bottom:30px;color:#ffd700}
.bonus-promotions>p{max-width:800px;margin:0 auto 40px;text-align:center;font-size:1.1rem;opacity:0.9}
.bonus-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1200px;margin:0 auto}
.bonus-card{background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);padding:30px;border-radius:20px;transition:all 0.3s ease}
.bonus-card:hover{transform:translateY(-5px);background:rgba(255,255,255,0.12)}
.bonus-card h3{color:#ffd700;margin-bottom:15px;font-size:1.3rem}
.bonus-card p{margin-bottom:15px;opacity:0.9}
.about-scorepesa{padding:80px 20px;position:relative}
.about-scorepesa::before{content:'🏆';position:absolute;font-size:6rem;opacity:0.12;top:120px;left:8%;animation:glow 17s ease-in-out infinite;z-index:-1}
@keyframes glow{0%,100%{opacity:0.12;filter:brightness(1)}50%{opacity:0.18;filter:brightness(1.2)}}
.about-scorepesa h2{font-size:clamp(1.8rem,4vw,2.5rem);text-align:center;margin-bottom:30px;color:#ffd700}
.about-scorepesa>p{max-width:800px;margin:0 auto 40px;text-align:center;font-size:1.1rem;opacity:0.9}
.about-content{max-width:900px;margin:0 auto;background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);padding:40px;border-radius:20px;transition:all 0.3s ease}
.about-content:hover{background:rgba(255,255,255,0.12)}
.about-content h3{color:#ffd700;margin:30px 0 15px 0;font-size:1.4rem}
.about-content p{margin-bottom:20px;opacity:0.9;line-height:1.7}
.customer-support{padding:80px 20px;position:relative}
.customer-support::before{content:'📞';position:absolute;font-size:6rem;opacity:0.1;bottom:80px;right:10%;animation:ring 14s ease-in-out infinite;z-index:-1}
@keyframes ring{0%,100%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.05) rotate(-2deg)}50%{transform:scale(0.98) rotate(2deg)}75%{transform:scale(1.02) rotate(-1deg)}}
.customer-support h2{font-size:clamp(1.8rem,4vw,2.5rem);text-align:center;margin-bottom:30px;color:#ffd700}
.customer-support>p{max-width:800px;margin:0 auto 40px;text-align:center;font-size:1.1rem;opacity:0.9}
.support-channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1000px;margin:0 auto 40px}
.support-method{background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);padding:30px;border-radius:20px;transition:all 0.3s ease}
.support-method:hover{transform:translateY(-5px);background:rgba(255,255,255,0.12)}
.support-method h3{color:#ffd700;margin-bottom:15px;font-size:1.3rem}
.support-method p{margin-bottom:15px;opacity:0.9}
.customer-support>p:last-of-type{max-width:800px;margin:0 auto;text-align:center;opacity:0.9}
.responsible-gaming{padding:80px 20px;position:relative}
.responsible-gaming::before{content:'🛡️';position:absolute;font-size:6rem;opacity:0.12;top:60px;left:6%;animation:shield 19s ease-in-out infinite;z-index:-1}
@keyframes shield{0%,100%{transform:translateX(0px) scale(1)}33%{transform:translateX(15px) scale(1.02)}66%{transform:translateX(-10px) scale(0.98)}}
.responsible-gaming h2{font-size:clamp(1.8rem,4vw,2.5rem);text-align:center;margin-bottom:30px;color:#ffd700}
.responsible-gaming>p{max-width:800px;margin:0 auto 40px;text-align:center;font-size:1.1rem;opacity:0.9}
.protection-measures{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1200px;margin:0 auto 40px}
.protection-tool{background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);padding:30px;border-radius:20px;transition:all 0.3s ease}
.protection-tool:hover{transform:translateY(-5px);background:rgba(255,255,255,0.12)}
.protection-tool h3{color:#ffd700;margin-bottom:15px;font-size:1.3rem}
.protection-tool p{margin-bottom:15px;opacity:0.9}
.responsible-gaming>p:last-of-type{max-width:800px;margin:0 auto;text-align:center;font-weight:600;color:#ffd700;background:rgba(255,215,0,0.1);padding:15px;border-radius:10px}
.security-measures{padding:80px 20px;position:relative}
.security-measures::before{content:'🔐';position:absolute;font-size:6rem;opacity:0.1;top:100px;right:8%;animation:lock 16s ease-in-out infinite;z-index:-1}
@keyframes lock{0%,100%{transform:rotate(0deg)}50%{transform:rotate(10deg)}}
.security-measures h2{font-size:clamp(1.8rem,4vw,2.5rem);text-align:center;margin-bottom:30px;color:#ffd700}
.security-measures>p{max-width:800px;margin:0 auto 40px;text-align:center;font-size:1.1rem;opacity:0.9}
.security-content{max-width:900px;margin:0 auto;background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);padding:40px;border-radius:20px;transition:all 0.3s ease}
.security-content:hover{background:rgba(255,255,255,0.12)}
.security-content h3{color:#ffd700;margin:30px 0 15px 0;font-size:1.4rem}
.security-content p{margin-bottom:20px;opacity:0.9;line-height:1.7}
.cta-final{display:inline-block;padding:15px 40px;background:linear-gradient(45deg,#ffd700,#ffed4e);color:#1f293b;text-decoration:none;border-radius:30px;font-weight:700;font-size:1.2rem;transition:all 0.3s ease;box-shadow:0 10px 30px rgba(255,215,0,0.3);margin:0 auto;display:block;width:fit-content}
.cta-final:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(255,215,0,0.4)}
.site-footer{background:rgba(31,41,59,0.95);backdrop-filter:blur(10px);padding:40px 20px 20px;margin-top:80px;position:relative}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:30px}
.footer-links a{color:#ffffff;text-decoration:none;transition:color 0.3s ease;font-size:0.9rem}
.footer-links a:hover{color:#ffd700}
.payment-providers{margin-bottom:30px}
.payments-section,.providers-section{margin-bottom:25px}
.payments-section h4,.providers-section h4{color:#ffd700;text-align:center;margin-bottom:15px;font-size:1.1rem}
.payment-icons,.provider-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;align-items:center}
.payment-icons img,.provider-logos img{transition:transform 0.3s ease;opacity:0.8}
.payment-icons img:hover,.provider-logos img:hover{transform:scale(1.1);opacity:1}
.brand-statement{background:rgba(255,255,255,0.05);padding:25px;border-radius:15px;margin-bottom:25px;text-align:center}
.brand-statement p{font-size:0.95rem;opacity:0.9;line-height:1.5}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.1)}
.footer-brand{color:#ffd700;font-weight:700;font-size:1.2rem}
.legal-notice p{font-size:0.85rem;opacity:0.7;text-align:right}
@media screen and (max-width:1080px){
.nav-links,.auth-buttons{display:none}
.mobile-menu-toggle{display:flex}
.mobile-menu.active{display:block}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.betting-features,.casino-highlights,.payments-breakdown,.bonus-details{grid-template-columns:1fr}
.support-channels{grid-template-columns:1fr}
.registration-steps{grid-template-columns:1fr}
.mobile-features{grid-template-columns:1fr}
.protection-measures{grid-template-columns:1fr}
.footer-bottom{flex-direction:column;text-align:center}
.legal-notice p{text-align:center}
}
@media screen and (max-width:768px){
.stats-grid{grid-template-columns:repeat(2,1fr);gap:15px}
.platform-introduction{padding:10px;min-height:80vh}
.intro-layout{padding:0 10px}
section{padding:60px 15px}
.feature-card,.game-category,.payment-method,.bonus-card,.support-method,.protection-tool{padding:20px}
.step-card{padding:20px;margin-bottom:15px}
.mobile-feature{padding:20px}
.about-content,.security-content{padding:25px;margin:0 15px}
.footer-links{gap:15px}
.footer-links a{font-size:0.85rem}
.payment-icons,.provider-logos{gap:10px}
}
@media screen and (max-width:480px){
.stats-grid{grid-template-columns:1fr}
.top-navigation{padding:8px 15px}
.platform-introduction{min-height:70vh;padding:5px}
section{padding:50px 10px}
.feature-card,.game-category,.payment-method,.bonus-card,.support-method,.protection-tool,.mobile-feature{padding:15px}
.step-card{padding:15px}
.about-content,.security-content{padding:20px;margin:0 10px}
.footer-links{flex-direction:column;gap:10px;text-align:center}
.payment-icons,.provider-logos{justify-content:center;gap:8px}
.brand-statement{padding:20px}
}
@media screen and (max-width:320px){
.mobile-menu-toggle{padding:3px}
.mobile-menu-toggle span{width:22px}
.intro-layout h1{font-size:1.8rem}
.lead-statement{font-size:1rem}
.cta-primary,.cta-final{padding:12px 25px;font-size:1rem}
.stat-card{padding:15px}
.stat-emoji{font-size:2rem}
.stat-number{font-size:1.5rem}
h2{font-size:1.5rem}
h3{font-size:1.2rem}
.step-number{width:35px;height:35px;font-size:1rem}
.payment-icons img,.provider-logos img{max-width:30px;height:auto}
}