/* STLBEAST v21 visual lock: fix live hero/mobile mismatch and remove flat-square hero behavior */
:root{--v21-blue:#0788ff;--v21-cyan:#00d7ff;--v21-mag:#f42bdc;--v21-orange:#ff6b18;--v21-gold:#ffd12a;--v21-card:#07111e;}
body{background:#02050a!important;}
.shell{max-width:1920px!important;width:100%!important;overflow:hidden!important;}
.nav{z-index:30!important;}
.logo img{filter:drop-shadow(0 0 12px rgba(0,138,255,.65))!important;}
.hero{position:relative!important;min-height:620px!important;background-image:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.82) 34%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.55) 100%),url('/assets/images/stlbeast-hero-cinematic-v21.jpg')!important;background-size:cover!important;background-position:center right!important;background-repeat:no-repeat!important;overflow:hidden!important;border-bottom:1px solid rgba(0,140,255,.35)!important;}
.hero:before{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(circle at 65% 45%,rgba(0,136,255,.32),transparent 28%),radial-gradient(circle at 84% 48%,rgba(244,43,220,.22),transparent 30%),linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.68))!important;z-index:1!important;pointer-events:none!important;}
.hero:after{content:""!important;position:absolute!important;inset:auto 0 0 0!important;height:145px!important;background:linear-gradient(0deg,rgba(2,5,10,.96),rgba(2,5,10,0))!important;z-index:2!important;pointer-events:none!important;}
.hero-inner{position:relative!important;z-index:5!important;min-height:620px!important;display:grid!important;grid-template-columns:minmax(440px,45%) 1fr!important;align-items:center!important;padding:64px 52px 60px!important;}
.hero-inner>div:first-child{z-index:8!important;max-width:680px!important;}
.headline{font-size:clamp(54px,5.5vw,92px)!important;line-height:.88!important;letter-spacing:.012em!important;text-transform:uppercase!important;margin:0 0 20px!important;color:#fff!important;text-shadow:0 4px 0 #000,0 0 24px rgba(0,130,255,.38)!important;}
.headline .accent{display:block!important;color:var(--v21-blue)!important;text-shadow:0 0 28px rgba(7,136,255,.95),0 3px 0 #000!important;}
.copy{font-size:21px!important;line-height:1.45!important;color:#f5f9ff!important;max-width:620px!important;text-shadow:0 2px 12px #000!important;margin-bottom:30px!important;}
.actions{display:flex!important;gap:18px!important;align-items:center!important;flex-wrap:wrap!important;}
.btn{border-radius:8px!important;height:58px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:15px!important;font-weight:1000!important;letter-spacing:.02em!important;text-transform:uppercase!important;}
.btn.primary{background:linear-gradient(90deg,#0788ff 0%,#1475ff 58%,#f42bdc 100%)!important;box-shadow:0 0 28px rgba(7,136,255,.55)!important;border-color:#18a0ff!important;}
.hero-art{position:absolute!important;right:5.2%!important;bottom:28px!important;width:min(440px,28vw)!important;min-height:0!important;height:180px!important;z-index:7!important;pointer-events:none!important;overflow:visible!important;}
.hero-art .v20-beast-photo,.hero-art:before,.hero-art:after{display:none!important;}
.hero-art .shield-lockup{display:block!important;position:absolute!important;right:110px!important;bottom:68px!important;width:160px!important;filter:drop-shadow(0 0 22px rgba(0,145,255,.85))!important;opacity:.98!important;}
.hero-art .lockup-title{display:block!important;position:absolute!important;right:0!important;bottom:0!important;width:290px!important;padding:13px 18px!important;background:rgba(3,7,13,.86)!important;backdrop-filter:blur(12px)!important;border:1px solid rgba(126,197,255,.55)!important;border-radius:10px!important;box-shadow:0 0 30px rgba(0,136,255,.34)!important;}
.hero-art .lockup-title b{font-size:39px!important;}
.trust{grid-template-columns:repeat(4,1fr)!important;background:#03070d!important;border-color:rgba(0,136,255,.24)!important;}
.trust .item{min-height:72px!important;}
.trust .icon{color:var(--v21-cyan)!important;}
.cards4{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;}
.slot{min-height:218px!important;border-radius:12px!important;}
.slot:before{background-size:88% auto!important;background-position:center 18px!important;opacity:.74!important;}
.slot-content{margin-top:115px!important;}
.card{background:linear-gradient(180deg,rgba(9,20,35,.96),rgba(3,8,15,.98))!important;}
/* Hub hero: real mascot integrated as a cinematic background, not a tiny separate flat asset */
.hub-hero{position:relative!important;min-height:330px!important;background-image:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.43) 55%,rgba(0,0,0,.62)),url('/assets/images/stlbeast-hub-hero-cinematic-v21.jpg')!important;background-size:cover!important;background-position:center right!important;background-repeat:no-repeat!important;overflow:hidden!important;}
.hub-hero:before{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(circle at 72% 48%,rgba(0,142,255,.32),transparent 30%),radial-gradient(circle at 88% 46%,rgba(244,43,220,.2),transparent 28%)!important;z-index:1!important;pointer-events:none!important;}
.hub-content{position:relative!important;z-index:4!important;}
.hub-beast{display:none!important;}
.hub-shield{right:58px!important;top:56px!important;width:190px!important;z-index:5!important;filter:drop-shadow(0 0 30px rgba(0,145,255,.8))!important;}
.hub-cards{position:relative!important;z-index:8!important;}
@media(max-width:1100px){
  .hero{min-height:560px!important;background-position:58% center!important;}
  .hero-inner{grid-template-columns:1fr!important;min-height:560px!important;padding:54px 34px 42px!important;}
  .hero-inner>div:first-child{max-width:620px!important;}
  .headline{font-size:clamp(46px,9vw,76px)!important;}
  .hero-art{right:24px!important;bottom:22px!important;width:300px!important;height:138px!important;opacity:.95!important;}
  .hero-art .shield-lockup{width:130px!important;right:108px!important;bottom:57px!important;}
  .hero-art .lockup-title{width:245px!important;}
  .cards4{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .trust{grid-template-columns:repeat(2,1fr)!important;}
  .hub-hero{background-position:60% center!important;}
}
@media(max-width:720px){
  .topbar{height:24px!important;font-size:10px!important;line-height:24px!important;}
  .nav{padding:16px 18px 12px!important;gap:12px!important;background:#02050a!important;}
  .logo{font-size:26px!important;}.logo img{width:42px!important;height:42px!important}.logo small{font-size:9px!important;letter-spacing:.28em!important;}
  .navlinks{width:100%!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;}
  .navlinks a{font-size:10px!important;text-align:left!important;white-space:nowrap!important;}
  .hero{min-height:590px!important;background-size:auto 100%!important;background-position:62% bottom!important;}
  .hero:before{background:linear-gradient(180deg,rgba(0,0,0,.74),rgba(0,0,0,.12) 48%,rgba(0,0,0,.76)),linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.14))!important;}
  .hero-inner{min-height:590px!important;padding:34px 20px 22px!important;display:block!important;}
  .headline{font-size:40px!important;line-height:.92!important;max-width:380px!important;margin-top:0!important;margin-bottom:14px!important;}
  .copy{font-size:15px!important;line-height:1.45!important;max-width:360px!important;margin-bottom:18px!important;}
  .actions{gap:10px!important;}
  .btn{height:48px!important;padding:0 16px!important;font-size:11px!important;}
  .hero-art{right:12px!important;bottom:28px!important;width:210px!important;height:98px!important;opacity:.96!important;}
  .hero-art .shield-lockup{width:82px!important;right:90px!important;bottom:46px!important;}
  .hero-art .lockup-title{width:190px!important;right:0!important;bottom:0!important;padding:8px 10px!important;}
  .hero-art .lockup-title b{font-size:28px!important;}.hero-art .lockup-title span{font-size:9px!important;letter-spacing:.28em!important;}
  .trust{display:grid!important;grid-template-columns:repeat(2,1fr)!important;padding:10px 14px!important;gap:8px!important;}
  .trust .item{padding:10px 8px!important;min-height:58px!important;border:1px solid rgba(0,136,255,.18)!important;border-radius:8px!important;}
  .trust b{font-size:11px!important}.trust span{font-size:9px!important}.trust .icon{font-size:20px!important;}
  .section{padding:22px 12px!important;}
  .section h2{font-size:18px!important;}.section-head{align-items:center!important;}
  .cards4{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .slot{min-height:176px!important;padding:12px 8px 8px!important;}
  .slot:before{background-size:110% auto!important;background-position:center 8px!important;opacity:.74!important;}
  .slot-content{margin-top:88px!important;}.slot-title{font-size:13px!important}.slot-sub{font-size:9px!important;margin-bottom:10px!important}.slot-bottom{font-size:10px!important;padding:9px 8px!important;margin:0 -8px -8px!important;}.locked{font-size:9px!important;}
  .cards3{grid-template-columns:1fr!important;gap:12px!important;}.feature{min-height:112px!important;padding:18px!important;}
  .mini-trust{grid-template-columns:1fr!important;padding:16px 20px!important;gap:12px!important;}
  .footer{grid-template-columns:1fr 1fr!important;padding:24px 20px!important;gap:18px!important;}
  .hub-hero{min-height:360px!important;background-size:auto 100%!important;background-position:68% bottom!important;padding:32px 20px 20px!important;}
  .hub-hero:before{background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.45) 58%,rgba(0,0,0,.12)),linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.68))!important;}
  .hub-hero h1{font-size:28px!important;max-width:320px!important;}.hub-hero p{font-size:14px!important;max-width:310px!important;}
  .hub-shield{right:18px!important;top:122px!important;width:110px!important;opacity:.96!important;}
  .hub-cards{grid-template-columns:repeat(2,1fr)!important;padding:0 12px!important;gap:10px!important;}
}