/* Centered, static brand panel. Keep all sizing inside the hero's right column. */
.hero .hero-art{width:100%;max-width:none;height:365px;margin:0;transform:none;transform-origin:center;background:radial-gradient(ellipse at center,#6887ff1d,transparent 66%)}
.hero-motion-scene{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.hero-art .hero-brand-card{
 position:relative;inset:auto;width:270px;height:300px;transform:none;
 border-radius:28px;overflow:hidden;text-align:center;
 background:radial-gradient(ellipse at 50% 0,#739cff26,transparent 70%),linear-gradient(155deg,#202e49,#111b2e 78%);
 border:1px solid #9fbaff4d;
 box-shadow:0 24px 56px #02081766,0 0 64px #607aff14,inset 0 1px 0 #ffffff1c;
}
.hero-art .hero-brand-card:before{content:"";position:absolute;left:34px;right:34px;top:0;height:2px;background:linear-gradient(90deg,transparent,#93c6ff,#b4a4ff,transparent)}
.hero-art .hero-brand-card:after{content:"";position:absolute;inset:10px;border:1px solid #bbceff12;border-radius:19px;pointer-events:none}
.hero-art .hero-brand-card .hero-brand-logo{width:116px;height:116px;margin:0 0 25px;border-radius:29px;box-shadow:0 12px 32px #02081750,0 0 32px #72a6ff20}
.hero-art .hero-brand-card strong{font-size:32px;letter-spacing:1.5px;color:#f1f5ff;line-height:1.3}
.hero-art .hero-brand-card>span{font-size:11px;letter-spacing:.2px;line-height:1.8;color:#b6c6e5;margin-top:9px;padding:0 18px}
.hero-art .art-grid{inset:0;transform:none;opacity:.6}
.hero-art .art-orbit{left:50%;top:50%;width:360px;height:360px;transform:translate(-50%,-50%) rotateX(62deg);border-color:#8baaff29}
.hero-art .art-orbit.second{left:50%;top:50%;width:440px;height:440px;border-style:dashed;border-color:#8baaff17;transform:translate(-50%,-50%) rotateX(62deg)}
@media(min-width:768px) and (max-width:1000px){.hero .hero-art{height:330px}.hero-art .hero-brand-card{width:240px;height:280px}.hero-art .art-orbit{width:310px;height:310px}.hero-art .art-orbit.second{width:370px;height:370px}}

/* Angled presentation, with restrained hover depth. */
.hero-art .hero-brand-card{transform:rotate(-7deg);pointer-events:auto;background:radial-gradient(ellipse at 15% 0,#8faaff42,transparent 60%),radial-gradient(ellipse at 100% 100%,#8b6ff51b,transparent 65%),linear-gradient(145deg,#263754,#101b30 78%);border-color:#a5bbff70;box-shadow:14px 24px 58px #02081770,-8px -4px 44px #7895ff12,inset 0 1px 0 #ffffff25}
.hero-art .hero-brand-card:after{border-color:#c2d1ff20}
.hero-art .hero-brand-card .hero-brand-logo{box-shadow:0 14px 32px #02081765,0 0 44px #72a6ff30}
.hero-art .art-orbit{transform:translate(-50%,-50%) rotate(-16deg) rotateX(62deg)}
.hero-art .art-orbit.second{transform:translate(-50%,-50%) rotate(15deg) rotateX(62deg)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero-art .hero-brand-card{transition:transform .6s cubic-bezier(.2,.75,.25,1),box-shadow .6s ease,border-color .6s ease}
 .hero-art:hover .hero-brand-card{transform:translateY(-6px) rotate(-3deg);border-color:#b5caff99;box-shadow:12px 32px 65px #02081780,0 0 65px #7895ff27,inset 0 1px 0 #ffffff30}
}

/* A lightweight CSS galaxy, scoped to the decorative brand artwork. */
.hero .hero-art{background:radial-gradient(ellipse at 32% 38%,#5966e832,transparent 50%),radial-gradient(ellipse at 77% 63%,#9b56d92b,transparent 48%),radial-gradient(ellipse at center,#347ba11f,transparent 72%)}
.hero-art:before{content:"";position:absolute;inset:-12px -16px;pointer-events:none;background-image:radial-gradient(circle at 8% 25%,#d8e7ff 0 1px,transparent 2px),radial-gradient(circle at 18% 70%,#aabfff 0 1px,transparent 2px),radial-gradient(circle at 29% 9%,#c4b5fd 0 1.5px,transparent 2.5px),radial-gradient(circle at 82% 17%,#cfe5ff 0 1px,transparent 2px),radial-gradient(circle at 93% 48%,#d6c5ff 0 1.5px,transparent 2.5px),radial-gradient(circle at 76% 91%,#bfdfff 0 1px,transparent 2px),radial-gradient(circle at 37% 94%,#c3b5ff 0 1px,transparent 2px),radial-gradient(circle at 6% 89%,#b0cfff 0 .8px,transparent 1.8px),radial-gradient(circle at 69% 5%,#a4c8ff 0 .8px,transparent 1.8px),radial-gradient(circle at 97% 78%,#d9c7ff 0 .8px,transparent 1.8px),radial-gradient(circle at 12% 48%,#9eb9ed 0 .7px,transparent 1.6px),radial-gradient(circle at 47% 3%,#b3c9ff 0 .7px,transparent 1.6px)}
.hero-art:after{content:"";position:absolute;left:14%;top:12%;width:15px;height:15px;background:linear-gradient(135deg,#ecf6ff,#9fafff);clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);pointer-events:none;filter:drop-shadow(0 0 7px #a4c8ff)}
.hero-art .hero-motion-scene{z-index:2}
.hero-art .art-grid{opacity:.18}
.hero-art .art-orbit{z-index:1;border-color:#96b4ff40;box-shadow:0 0 24px #7895ff0d}
.hero-art .art-orbit.second{border-style:solid;border-color:#b298ed24}
.hero-art .art-orbit:before{width:11px;height:11px;top:46px;left:48px;background:radial-gradient(circle at 30% 25%,#e4f3ff,#7ba8f5 45%,#334d96);box-shadow:0 0 19px #8cbbff70}
.hero-art .art-orbit.second:before{width:8px;height:8px;top:auto;left:auto;right:56px;bottom:55px;background:radial-gradient(circle at 30% 25%,#eadfff,#b08cef 50%,#584285);box-shadow:0 0 18px #bd91ff60}
.hero-art .hero-brand-card{box-shadow:14px 24px 58px #02081770,-12px -6px 55px #7895ff1a,12px 8px 45px #aa6cff14,inset 0 1px 0 #ffffff25}

/* Borderless brand constellation: let the light blend into the page. */
.hero-art .hero-brand-card,.hero-art:hover .hero-brand-card{width:320px;height:310px;max-width:100%;background:transparent;border:0;border-radius:0;box-shadow:none;transform:none;overflow:visible;transition:none}
.hero-art .hero-brand-card:before,.hero-art .hero-brand-card:after{display:none}
.hero-art .hero-brand-card .hero-brand-logo{width:76px;height:76px;border-radius:20px;margin-bottom:18px;transform:rotate(-7deg);box-shadow:0 12px 32px #02081750,0 0 42px #759cff33}
.hero-art .hero-brand-card strong{font-size:28px;letter-spacing:1.6px}
.hero-art .hero-brand-card>span{font-size:10px;color:#9fafcf;margin-top:5px}
.hero-art .hero-brand-card .hero-offer-title{font-size:20px;font-weight:700;line-height:1.6;margin:22px 0 7px;color:#e4eaff;letter-spacing:0}
.hero-art .hero-brand-card .hero-offer-copy{font-size:12px;line-height:1.9;color:#aebbd8;max-width:280px;margin:0;padding:0 12px}
.hero .hero-art{background:radial-gradient(ellipse at 42% 42%,#586fe52b,transparent 58%),radial-gradient(ellipse at 65% 58%,#9855d51f,transparent 58%)}

/* Frame the content only; feather the galaxy independently of the card. */
.hero .hero-art{background:none}
.hero-art .art-grid{inset:-22%;opacity:1;transform:none;border:0;border-radius:50%;background-image:radial-gradient(ellipse at 40% 43%,#6578e638 0,transparent 55%),radial-gradient(ellipse at 65% 58%,#a064df2b 0,transparent 55%);background-size:100% 100%;-webkit-mask-image:radial-gradient(ellipse closest-side,#000 25%,transparent 95%);mask-image:radial-gradient(ellipse closest-side,#000 25%,transparent 95%);pointer-events:none}
.hero-art .hero-brand-card,.hero-art:hover .hero-brand-card{width:310px;height:330px;max-width:calc(100% - 24px);border:1px solid #a5bdff59;border-radius:28px;background:linear-gradient(145deg,#24334cdb,#111b2ee8);box-shadow:0 22px 55px #02081750,inset 0 1px 0 #ffffff1a;overflow:hidden;transform:none}
.hero-art .hero-brand-card:before{display:block;left:32px;right:32px;background:linear-gradient(90deg,transparent,#9fc9ff,#bc9df4,transparent)}
.hero-art .hero-brand-card:after{display:block;inset:9px;border:1px solid #b8cbff12;border-radius:20px}
.hero-art .hero-brand-card .hero-brand-logo{width:76px;height:76px;margin-bottom:16px}
.hero-art .hero-brand-card .hero-offer-title{margin-top:18px;font-size:20px}
.hero-art .hero-brand-card .hero-offer-copy{max-width:265px}

/* Compact card, centered in the constellation. */
.hero-art .hero-motion-scene{inset:0;display:grid;place-items:center}
.hero-art .hero-brand-card,.hero-art:hover .hero-brand-card{position:relative;inset:auto;width:270px;height:300px;max-width:calc(100% - 32px);transform:rotate(-6deg);border-radius:25px}
.hero-art .hero-brand-card:after{border-radius:17px}
.hero-art .hero-brand-card .hero-brand-logo{width:64px;height:64px;margin-bottom:12px;transform:none;border-radius:17px}
.hero-art .hero-brand-card strong{font-size:25px;line-height:1.3}
.hero-art .hero-brand-card>span{font-size:10px;margin-top:5px}
.hero-art .hero-brand-card .hero-offer-title{font-size:18px;line-height:1.6;margin:16px 0 6px}
.hero-art .hero-brand-card .hero-offer-copy{font-size:11px;line-height:1.8;max-width:235px;padding:0 10px}
@media(min-width:768px) and (max-width:1000px){.hero-art .hero-brand-card,.hero-art:hover .hero-brand-card{width:248px;height:285px}}

/* Smaller centerpiece; retain the surrounding constellation. */
.hero-art .hero-brand-card,.hero-art:hover .hero-brand-card{width:232px;height:266px;border-radius:23px}
.hero-art .hero-brand-card:after{inset:8px;border-radius:15px}
.hero-art .hero-brand-card .hero-brand-logo{width:56px;height:56px;margin-bottom:10px;border-radius:15px}
.hero-art .hero-brand-card strong{font-size:23px}
.hero-art .hero-brand-card>span{font-size:9px;padding:0 10px}
.hero-art .hero-brand-card .hero-offer-title{font-size:16px;margin:13px 0 5px}
.hero-art .hero-brand-card .hero-offer-copy{font-size:11px;max-width:205px;line-height:1.7}
@media(min-width:768px) and (max-width:1000px){.hero-art .hero-brand-card,.hero-art:hover .hero-brand-card{width:220px;height:258px}}