/* Font Import */
@font-face {
  font-family: 'BBH Sans Bogle';
  src: url('assets/fonts/BBHSansBogle-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Base Styles */
:root{--bg:#ffffff;--bg2:#f8fafc;--text:#0f172a;--muted:#475569;--primary:#1567bd;--overlay:rgba(0,0,0,.55)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'BBH Sans Bogle',Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";color:#0f172a;background:var(--bg);line-height:1.6}
img{max-width:100%;display:block}
button{font:inherit}

/* Layout Helpers */
.container{width:min(1120px,92%);margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:#ffffffcc;backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;justify-content:flex-start;padding:16px 0;position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-logo{width:56px;height:56px;border-radius:12px;object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.brand-name{font-weight:800;font-size:28px;letter-spacing:.2px;color:#0f172a;position:absolute;left:50%;transform:translateX(-50%);text-align:center}

.hamburger{display:none}

.nav{display:none}

@media(min-width:900px){
  .hamburger{display:none}
  .nav{display:block}
  .nav ul{position:static;flex-direction:row;border:none;padding:0;background:transparent}
}
@media(min-width:1000px){
  .brand-name{font-size:50px}
  .brand-logo{width:100px;height:100px}
}
@media(max-width:700px){
  .brand-name{position:static;transform:none;text-align:left}
}

/* Hero */
.hero{padding:72px 0 24px;background:transparent}
.hero-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.hero-copy h1{font-size:48px;line-height:1.05;margin:0 0 12px;font-weight:800;letter-spacing:.2px}
.hero-copy p{color:#475569;margin:0 0 22px}
.store-badges{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.store-badges .badge img{height:40px}
.social-btn{display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border-radius:50px;color:#ffffff;border:0;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:.2s ease;letter-spacing:.3px;text-decoration:none;font-weight:normal;font-family:Poppins,sans-serif}
.social-btn img{width:24px;height:24px;border-radius:4px;object-fit:contain;display:block}
.social-btn.yt{background:linear-gradient(180deg,#ff4d4f,#d92b2e)}
.social-btn.wa{background:linear-gradient(180deg,#25D366,#18b352)}
.social-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,0,0,.24)}
.dark .social-btn{box-shadow:0 8px 20px rgba(0,0,0,.35)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:50px;text-decoration:none;font-weight:normal;font-family:Poppins,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:.2s ease;letter-spacing:.3px}
.btn-apk{background:linear-gradient(180deg,#1567bd,#0f4a8a);color:#ffffff;border:1px solid rgba(15,23,42,.1)}
.btn-apk:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.22)}

.hero-media{position:relative;max-width:580px;z-index:1;pointer-events:none}
.hero-copy{position:relative;z-index:3}
.device{position:relative;border-radius:30px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);background:#000}
.device-large{transform:translateY(0);}
.device-large img{aspect-ratio:9/16;object-fit:cover}
.device-small{position:absolute;width:52%;left:55%;bottom:-18%;transform:translateX(-50%);z-index:1}
.parallax{will-change:transform;transition:transform .06s linear;pointer-events:none}

@media(min-width:1000px){
  .hero-grid{grid-template-columns:1fr 1fr}
  .hero-media{order:1}
  .hero-copy{order:2}
  .hero-copy h1{font-size:64px}
}
@media(max-width:700px){
  .hero{padding:48px 0 8px}
  .hero-grid{display:flex;flex-direction:column}
  .hero-copy{text-align:center;order:-1;margin-bottom:14px}
  .hero-copy h1{font-size:38px}
  .hero-copy p{font-size:15px;margin-bottom:16px}
  .store-badges{flex-direction:row;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
  .store-badges .badge img{height:32px}
  .btn{padding:12px 20px}
  .hero-media{max-width:260px;margin:0 auto 12px}
  .device-large img{width:100%;height:auto}
  .device-small{display:none}
}
@media(min-width:701px){
  .store-badges{display:flex;flex-direction:row;gap:14px;align-items:center;flex-wrap:wrap}
  .store-badges .btn-apk{order:1}
  .store-badges .social-btn.wa{order:2}
  .store-badges .social-btn.yt{order:3}
}

/* CTA section with background image overlay */
.cta{position:relative;color:#fff;isolation:isolate}
.cta-backdrop{position:absolute;inset:0;background:url('assets/winning.jpg') center/cover no-repeat;filter:saturate(110%);will-change:transform;pointer-events:none}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,.35));pointer-events:none}
.cta-inner{position:relative;padding:96px 0}
.cta h2{color:#ffffff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.cta p{color:#f2f6ff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.cta-content{max-width:720px;position:relative;z-index:2}
.cta h2{margin:0 0 10px;font-size:40px;line-height:1.1}
.cta p{margin:0 0 18px;color:#e6e6e6}
.store-badges.dark .badge img{filter:none;}
.store-badges .badge img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}

@media(min-width:900px){
  .cta h2{font-size:48px}
}
@media(max-width:700px){
  .cta-inner{padding:64px 0}
  .cta h2{font-size:34px}
  .cta p{font-size:15px}
  .store-badges .badge img{height:34px}
}

/* Footer */
.site-footer{position:relative;isolation:isolate;padding:48px 0;color:#0f172a;border-top:1px solid rgba(0,0,0,.1);background:#ffffff}
.footer-inner{display:grid;gap:12px;justify-items:center;text-align:center}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{width:28px;height:28px;border-radius:6px;object-fit:cover}
.footer-brand span{font-weight:700;letter-spacing:.3px}
.footer-links{list-style:none;display:flex;gap:18px;margin:2px 0 0;padding:0}
.footer-links a{color:#475569;text-decoration:none;font-size:13px}
.footer-links a:hover{color:#0f172a;text-decoration:underline}
.footer-social{display:flex;gap:14px}
.footer-social .social{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:#475569;background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);transition:.2s ease;overflow:hidden}
.footer-social .social img{width:100%;height:100%;object-fit:cover}
.footer-social .social:hover{transform:translateY(-1px);background:rgba(0,0,0,.1)}
.footer-social .yt{color:#ff4d4f}
.footer-social .wa{color:#25D366}
.footer-copy{margin:6px 0 0;font-size:12px;color:#64748b}