.collection-banner{position:relative;isolation:isolate;overflow:hidden;border-block:1px solid #bc955d75;background:radial-gradient(circle at 76% 50%,#1646639c,transparent 42%),linear-gradient(125deg,#071726 10%,#0c2940 55%,#071522 100%)}
.collection-banner::before{content:"";position:absolute;z-index:-2;inset:0;background:url('assets/monstra-environment-base-v2.png') center 48%/cover no-repeat;opacity:.18;filter:saturate(.65)}
.collection-banner::after{content:"";position:absolute;z-index:-1;inset:0;background-image:radial-gradient(#eac987 1px,transparent 1.4px),radial-gradient(#8edbe4 .8px,transparent 1.3px);background-size:221px 189px,287px 211px;background-position:18px 30px,119px 88px;opacity:.22}
.collection-banner-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(450px,.9fr);gap:clamp(25px,4vw,70px);align-items:center;min-height:620px;padding-block:58px}
.collection-banner-copy{position:relative;z-index:2;padding-left:clamp(0px,2vw,24px)}
.collection-banner-eyebrow{display:flex;align-items:center;gap:12px;margin:0;color:#f4cd85;font:900 .75rem Arial,sans-serif;letter-spacing:.18em}.collection-banner-eyebrow::before{content:"";width:31px;height:1px;background:#f4cd85}
.collection-banner h2{max-width:770px;margin:20px 0;font:700 clamp(3.2rem,5.1vw,5.8rem)/1.03 Georgia,serif;letter-spacing:-.055em;color:#fff0d2;text-shadow:0 8px 28px #0009}
.collection-banner-lead{max-width:610px;margin:0;color:#cfe3e8;font:400 clamp(1rem,1.25vw,1.14rem)/1.65 Arial,sans-serif}
.collection-banner-counts{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0 30px}.collection-banner-counts span{padding:9px 12px;border:1px solid #7d9eaa8c;border-radius:999px;background:#102b3bcc;color:#f8e4b8;font:800 .7rem Arial,sans-serif;letter-spacing:.05em}
.collection-banner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}.collection-banner-cta{display:inline-flex;align-items:center;justify-content:center;gap:30px;min-height:55px;padding:14px 21px;border:1px solid #f3d39a;border-radius:10px;background:linear-gradient(120deg,#ffe4aa,#d7a95c);box-shadow:0 10px 30px #0007,inset 0 1px #fff9;color:#082335;font:900 .92rem Arial,sans-serif;text-decoration:none;transition:transform .2s,box-shadow .2s}.collection-banner-cta:hover{transform:translateY(-3px);box-shadow:0 16px 37px #0009,0 0 20px #e8bd6e77;color:#082335}.collection-banner-secondary{padding:8px 0;border-bottom:1px solid #e9c582;color:#ffe5b1;font:800 .85rem Arial,sans-serif;text-decoration:none}.collection-banner-secondary:hover{color:white}.collection-banner-note{margin:29px 0 0;color:#a8c1c8;font:.76rem Arial,sans-serif}
.collection-banner-cards{position:relative;height:515px;min-width:0;perspective:1000px}.collection-banner-halo{position:absolute;left:50%;top:45%;width:430px;aspect-ratio:1;border:1px solid #e6c37f7d;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 22px #d1a45a13,0 0 65px #e5a2573d,inset 0 0 70px #78c2e62b}.collection-banner-halo::before,.collection-banner-halo::after{content:"";position:absolute;inset:17px;border:1px dashed #e8c98d6a;border-radius:50%}.collection-banner-halo::after{inset:53px;border-style:solid;border-color:#74d4de61}
.showcase-card{position:absolute;display:block;width:210px;height:auto;aspect-ratio:63/88;object-fit:contain;border-radius:10px;box-shadow:0 20px 26px #000b,0 0 16px #d0ad7038;transition:transform .3s,box-shadow .3s}.showcase-card-flaro{z-index:2;left:1%;top:101px;transform:rotate(-17deg)}.showcase-card-boss{z-index:1;left:24%;top:35px;transform:rotate(-6deg)}.showcase-card-tactic{z-index:3;right:15%;top:71px;transform:rotate(9deg)}.showcase-card-fenara{z-index:4;right:-1%;top:145px;transform:rotate(18deg)}.collection-banner-cards:hover .showcase-card-flaro{transform:rotate(-20deg) translate(-8px,-5px)}.collection-banner-cards:hover .showcase-card-boss{transform:rotate(-8deg) translateY(-8px)}.collection-banner-cards:hover .showcase-card-tactic{transform:rotate(11deg) translateY(-9px)}.collection-banner-cards:hover .showcase-card-fenara{transform:rotate(21deg) translate(7px,-5px)}
@media(max-width:1180px){.collection-banner-inner{grid-template-columns:minmax(0,1fr) minmax(380px,.8fr);gap:20px}.showcase-card{width:180px}.collection-banner-cards{height:450px}.collection-banner-halo{width:360px}.showcase-card-flaro{top:96px}.showcase-card-boss{top:40px}.showcase-card-tactic{top:75px}.showcase-card-fenara{top:135px}}
@media(max-width:900px){.collection-banner-inner{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding-block:55px 20px}.collection-banner-copy{padding-left:0}.collection-banner h2{max-width:650px}.collection-banner-cards{width:min(100%,650px);height:420px;align-self:center;margin-top:10px}.showcase-card{width:190px}.showcase-card-flaro{left:5%;top:94px}.showcase-card-boss{left:28%;top:29px}.showcase-card-tactic{right:18%;top:65px}.showcase-card-fenara{right:2%;top:125px}}
@media(max-width:600px){.collection-banner-inner{padding-block:47px 20px}.collection-banner h2{font-size:clamp(2.8rem,11vw,4.2rem);margin:16px 0}.collection-banner-counts{gap:7px;margin:24px 0}.collection-banner-counts span{font-size:.65rem;padding:8px 10px}.collection-banner-actions{gap:15px}.collection-banner-cta{width:100%;justify-content:space-between}.collection-banner-note{margin-top:23px}.collection-banner-cards{height:310px;margin-top:22px}.collection-banner-halo{width:290px;top:48%}.showcase-card{width:129px;border-radius:7px}.showcase-card-flaro{left:1%;top:68px}.showcase-card-boss{left:24%;top:22px}.showcase-card-tactic{right:19%;top:49px}.showcase-card-fenara{right:1%;top:88px}}
@media(max-width:370px){.showcase-card{width:116px}.collection-banner-cards{height:285px}.collection-banner-halo{width:255px}.showcase-card-flaro{top:72px}.showcase-card-fenara{top:90px}}
@media(prefers-reduced-motion:reduce){.showcase-card,.collection-banner-cta{transition:none}}
