.hero-shop:after{right:auto;top:auto}
.site-header{color:#fff}
.site-header .brand img{filter:brightness(0) invert(1)}
.site-header .brand b{color:#d2c4ff}
.site-header nav a{color:rgba(255,255,255,.82)}
.site-header nav a:hover{color:#fff}
.site-header .header-action{background:#fff;color:#251820}
@media(max-width:1000px){.site-header nav a{color:#39405a}.site-header nav a:hover{color:#c87894}}

/* Seamless landing artwork: no card edge, no visible image boundary. */
@media(min-width:1101px){
  .hero-shop{display:block;padding-right:48vw}
  .hero-shop .hero-copy{max-width:760px;top:50%;transform:translateY(-48%)}
  .hero-visual{position:absolute;inset:0 0 0 auto;width:64%;height:100%;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;filter:saturate(1.05) contrast(1.03);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 12%,#000 35%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 12%,#000 35%,#000 100%)}
  .hero-visual .hero-art{object-position:62% center}
  .hero-visual:before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,rgba(42,67,222,.28) 0%,transparent 35%,rgba(7,12,43,.34) 100%);pointer-events:none}
  .hero-visual:after{border-radius:0;box-shadow:inset -120px 0 150px rgba(6,10,38,.34)}
  .hero-visual .phone-stage{right:4vw}
}
@media(max-width:1100px){
  .hero-visual{margin-left:-24px;margin-right:-24px;width:calc(100% + 48px);border-radius:0;box-shadow:none;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 100%)}
  .hero-visual:after{border-radius:0;box-shadow:inset 0 -90px 100px rgba(7,12,43,.28)}
}

/* Pink & Blue role selectors */
.role-actions{gap:10px}
.role-actions a{position:relative;min-height:94px;padding:17px 15px;grid-template-columns:42px minmax(0,1fr) 34px;grid-template-rows:auto auto;column-gap:12px;align-content:center;border:1px solid rgba(255,255,255,.5);border-radius:24px;background:rgba(255,255,255,.94);overflow:hidden}
.role-actions a:after{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#2fbecb,#c87894);opacity:0;transition:.2s}
.role-actions a:before{grid-column:1;grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#2fbecb,#c87894);color:#fff;font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:700;box-shadow:0 8px 18px rgba(62,61,221,.22)}
.role-actions a:nth-child(1):before{content:"B"}
.role-actions a:nth-child(2):before{content:"▦"}
.role-actions a:nth-child(3):before{content:"↗"}
.role-actions small{grid-column:2;grid-row:1;font-size:7px;letter-spacing:1.5px;color:#6f7892}
.role-actions b{grid-column:2;grid-row:2;font-size:12px;white-space:nowrap;margin-top:3px}
.role-actions i{grid-column:3;grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff0f6;color:#c87894;font-size:15px;transition:.2s}
.role-actions a:hover{transform:translateY(-4px);background:#fff;box-shadow:0 18px 38px rgba(8,17,47,.2)}
.role-actions a:hover:after{opacity:1}
.role-actions a:hover i{color:#fff;background:linear-gradient(145deg,#2fbecb,#c87894);transform:translateX(2px)}
@media(max-width:1350px) and (min-width:1101px){.role-actions{grid-template-columns:1fr}.role-actions a{min-height:68px}.role-actions b{font-size:11px}}
@media(max-width:600px){.role-actions a{min-height:70px;border-radius:19px}.role-actions b{white-space:normal}.role-actions a:before{width:38px;height:38px;border-radius:12px}}