/* ════════════════════════════════════════════════════════════
   ROBIN — Site-spezifische Styles
   Dual-Product: Robin (Cyan) + LittleJohn (Orange)
   Dark-Mode Tint: --nm-bg: #0e1a1e (Cyan)
════════════════════════════════════════════════════════════ */


/* ── Accent-Variablen (Robin = Cyan) ── */
:root {
  --accent:     var(--cyan);
  --accent-dk:  var(--cyan-dk);
  --accent-on:  var(--navy);
  --accent-t07: rgba(0,188,212,.07);
  --accent-t12: rgba(0,188,212,.12);
  --accent-t15: rgba(0,188,212,.15);
  --accent-t25: rgba(0,188,212,.25);
  --dropdown-bg: #0e1a1e;
}

/* ── Dark Mode Override: Robin Tint ── */
html.dark {
  --nm-bg:       #0e1a1e;
  --surface-card:#141b27;
  --nm-a-bg:     #0e1a1e;
  --nm-a-out:    6px 6px 14px rgba(0,0,0,.50),-6px -6px 14px rgba(255,255,255,.04);
  --nm-a-sm:     3px 3px 8px rgba(0,0,0,.45),-3px -3px 8px rgba(255,255,255,.03);
  --nm-o-bg:     #1a1000;
  --nm-o-out:    6px 6px 14px rgba(0,0,0,.50),-6px -6px 14px rgba(255,255,255,.04);
  --nm-o-sm:     3px 3px 8px rgba(0,0,0,.45),-3px -3px 8px rgba(255,255,255,.03);
}

/* ── Light Mode Neumorphic vars ── */
:root {
  --surface-card:   #ffffff;
  --nm-a-bg:        var(--nm-bg);
  --nm-a-out:       var(--nm-shadow-out);
  --nm-a-sm:        var(--nm-shadow-sm);
  --nm-o-bg:        var(--nm-bg);
  --nm-o-out:       var(--nm-shadow-out);
  --nm-o-sm:        var(--nm-shadow-sm);
}

/* Scrollbar: via bowhuman-tokens.css (var(--accent)) */
::selection { background: rgba(0,188,212,.2); color: inherit }

/* ── Focus: Cyan ── */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--r-sm) }
html.dark :focus-visible { outline-color: var(--cyan) }
:focus:not(:focus-visible) { outline: none }

/* ── Body ── */
html, body { height: 100%; scroll-behavior: smooth }
html { overflow-x: clip; scroll-padding-top: 60px }
body { font-family: var(--font-base); font-size: 16px; background: var(--bg);
       color: var(--text-primary); line-height: 1.6;
       -webkit-font-smoothing: antialiased; padding-top: 60px }

i[aria-hidden="true"] { pointer-events: none; user-select: none }

/* ════ SKIP LINK ════ */


/* ════ NAV — Sherwood-Schema ════ */


.nav-mobile-theme i { font-size: 18px }


/* ════ SECTION ════ */
.section { padding: var(--section-pad-v) clamp(20px,6vw,80px);
  max-width: var(--content-max); margin: 0 auto }
@media (max-width: 768px) { .section { padding: 64px 20px } }
.section-header { text-align: center; margin-bottom: clamp(40px,5vw,64px) }
.section-tag { display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 12px }
.section-tag.c { color: var(--cyan) }
.section-tag.o { color: var(--orange) }
.section-title { font-size: clamp(26px,3.5vw,42px); font-weight: 800;
  color: var(--text-primary); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 14px }
.section-lead { font-size: clamp(14px,1.4vw,17px); color: var(--text-secondary);
  max-width: 560px; margin: 0 auto; line-height: 1.75 }
.divider { height: 1px; background: linear-gradient(90deg,transparent,var(--border),transparent) }

/* ════ HERO ROBIN ════ */
.hero-r {
  min-height: calc(100vh - 60px);
  background: linear-gradient(160deg,var(--navy) 0%,#112233 60%,#0a1e2e 100%);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(48px,8vh,96px) clamp(20px,6vw,80px);
  position: relative; overflow: hidden;
}
.hero-r::before { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,188,212,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,188,212,.04) 1px,transparent 1px);
  background-size: 48px 48px; pointer-events: none }
.hero-r::after { content: ''; position: absolute; width: 600px; height: 600px;
  background: radial-gradient(circle,rgba(0,188,212,.09) 0%,transparent 70%);
  top: -100px; right: -100px; pointer-events: none }

/* ════ HERO LITTLEJOHN ════ */
.hero-lj {
  min-height: 80vh;
  background: linear-gradient(160deg,var(--navy) 0%,#1a1200 60%,#1e0f00 100%);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(64px,8vh,96px) clamp(20px,6vw,80px);
  position: relative; overflow: hidden;
}
.hero-lj::before { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,109,0,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,109,0,.04) 1px,transparent 1px);
  background-size: 48px 48px; pointer-events: none }
.hero-lj::after { content: ''; position: absolute; width: 500px; height: 500px;
  background: radial-gradient(circle,rgba(255,109,0,.08) 0%,transparent 70%);
  top: -80px; left: -80px; pointer-events: none }
.hero-lj .hero-visual { order: -1 }

/* ════ HERO SHARED ════ */
/* Zentrierter max-width Container — gleich wie marian/.hero-inner */
.hero-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(32px,5vw,64px);
  max-width: var(--content-max); width: 100%;
}
.hero-content { position: relative; z-index: 1 }
.hero-visual { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end }
.hero-badge { display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--r-full); margin-bottom: 20px }
.hero-badge i { font-size: 11px }
.hero-badge.c { color: var(--cyan); border: 1px solid rgba(0,188,212,.3); background: rgba(0,188,212,.08) }
.hero-badge.o { color: var(--orange); border: 1px solid rgba(255,109,0,.3); background: rgba(255,109,0,.08) }
.hero-title { font-size: clamp(48px,7vw,88px); font-weight: 800; line-height: 1.0; letter-spacing: -.04em; margin-bottom: 8px }
.hero-title.c { background: linear-gradient(135deg,var(--cyan),var(--cyan-dk),#4dd9ec);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.hero-title.o { background: linear-gradient(135deg,var(--orange),var(--orange-dk),#ff9a4d);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.hero-subtitle { font-size: clamp(16px,2.2vw,24px); font-weight: 300;
  color: rgba(255,255,255,.55); margin-bottom: 14px }
.hero-tagline { font-size: clamp(14px,1.3vw,16px); color: rgba(255,255,255,.65);
  margin-bottom: 40px; max-width: 480px; line-height: 1.75 }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px }
.store-note { font-size: 12.5px; color: rgba(255,255,255,.4); margin: 0 0 36px }
.btn-store { display: flex; align-items: center; gap: 10px; padding: 12px 20px;
  border-radius: var(--r-xl); font-family: var(--font-base); cursor: pointer;
  transition: all .2s; border: 1.5px solid transparent; text-decoration: none }
.btn-primary-c { background: var(--cyan); color: var(--navy); box-shadow: 0 4px 20px rgba(0,188,212,.35) }
.btn-primary-c:hover { background: var(--cyan-dk); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,188,212,.45) }
.btn-primary-o { background: var(--orange); color: #fff; box-shadow: 0 4px 20px rgba(255,109,0,.35) }
.btn-primary-o:hover { background: var(--orange-dk); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,109,0,.45) }
.btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.85) }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); transform: translateY(-2px) }
.btn-icon { font-size: 22px; flex-shrink: 0 }
.btn-txt { display: flex; flex-direction: column; line-height: 1.2 }
.btn-lbl { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .7 }
.btn-name { font-size: 14px; font-weight: 800 }

.hero-stats { display: flex; gap: 32px; flex-wrap: wrap }
.hero-stat { display: flex; flex-direction: column; gap: 2px }
.stat-val { font-family: var(--font-mono); font-size: 28px; font-weight: 700; line-height: 1 }
.stat-val.c { color: var(--cyan) }
.stat-val.o { color: var(--orange) }
.stat-lbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4) }

/* ════ PHONE MOCKUP ════ */
.phone-wrap { position: relative; filter: drop-shadow(0 32px 80px rgba(0,0,0,.6)) }
.phone-frame { width: 280px; height: 580px; background: var(--navy); border-radius: 42px;
  border: 2px solid rgba(255,255,255,.12); overflow: hidden; position: relative }
.phone-island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 28px; background: #000; border-radius: 14px; z-index: 10 }
.phone-screen { position: absolute; inset: 0; background: linear-gradient(180deg,var(--navy),#141b27); display: flex; flex-direction: column }
.ps-ab { height: 52px; display: flex; align-items: center; padding: 0 16px; gap: 10px; margin-top: 46px; flex-shrink: 0 }
.ps-ab.c { background: var(--navy); border-bottom: 1px solid rgba(0,188,212,.15) }
.ps-ab.o { background: var(--navy); border-bottom: 1px solid rgba(255,109,0,.15) }
.ps-ab-title { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; flex: 1 }
.ps-ab-title.c { color: var(--cyan) }
.ps-ab-title.o { color: var(--orange) }
.ps-ab-badge { font-size: 8px; font-weight: 700; letter-spacing: .1em; padding: 2px 6px; border-radius: 3px }
.ps-ab-badge.c { color: var(--cyan); border: 1px solid rgba(0,188,212,.3); background: rgba(0,188,212,.1) }
.ps-ab-badge.o { color: var(--orange); border: 1px solid rgba(255,109,0,.3); background: rgba(255,109,0,.1) }
.ps-body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden }
.ps-card { background: #141b27; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); padding: 10px 12px }
.ps-card-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px }
.ps-card-ttl { font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35) }
.ps-card-val { font-family: monospace; font-size: 18px; font-weight: 700; color: var(--cyan) }
.ps-dots { display: flex; gap: 5px; flex-wrap: wrap }
.ps-dot { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700 }
.ps-dot.k { background: rgba(0,188,212,.2); color: var(--cyan); border: 1px solid rgba(0,188,212,.3) }
.ps-dot.w { background: rgba(233,30,140,.15); color: var(--magenta); border: 1px solid rgba(233,30,140,.25) }
.ps-dot.m { background: rgba(158,158,158,.1); color: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.1) }
.ps-animal { display: flex; align-items: center; gap: 10px; margin-top: 4px }
.ps-animal-img { width: 52px; height: 52px; border-radius: 8px;
  background: linear-gradient(135deg,var(--navy-2),var(--navy)); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; border: 1px solid rgba(255,255,255,.1); overflow: hidden }
.ps-animal-img img { width: 100%; height: 100%; object-fit: contain; opacity: .85 }
.ps-animal-info { flex: 1 }
.ps-animal-name { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85) }
.ps-animal-dist { font-size: 9px; color: rgba(255,255,255,.4) }
.ps-animal-score { font-family: monospace; font-size: 14px; font-weight: 700; color: var(--cyan) }
.ps-bnav { height: 52px; background: var(--navy); display: flex }
.ps-bnav.c { border-top: 1px solid rgba(0,188,212,.12) }
.ps-bnav.o { border-top: 1px solid rgba(255,109,0,.12) }
.ps-bn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px }
.ps-bn i { font-size: 16px; color: rgba(255,255,255,.3) }
.ps-bn span { font-size: 7px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.25) }
.ps-bn.ac i { color: var(--cyan) }
.ps-bn.ac span { color: var(--cyan) }
.ps-bn.ao i { color: var(--orange) }
.ps-bn.ao span { color: var(--orange) }
.phone-shadow { position: absolute; right: -80px; bottom: -20px; width: 220px; height: 460px;
  background: var(--navy); border-radius: 36px; border: 2px solid rgba(255,255,255,.06);
  opacity: .35; filter: blur(1px); transform: rotate(6deg); z-index: -1 }

/* LittleJohn list in phone */
.lj-li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05) }
.lj-li:last-child { border-bottom: none }
.lj-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,109,0,.7); flex-shrink: 0 }
.lj-li-name { font-size: 9px; font-weight: 600; color: rgba(255,255,255,.6); flex: 1 }
.lj-li-dist { font-size: 9px; color: rgba(255,255,255,.3) }
.lj-li-st { font-size: 8px; font-weight: 700; padding: 2px 5px; border-radius: 3px; background: rgba(0,188,212,.15); color: var(--cyan) }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center }
  .hero-content { display: flex; flex-direction: column; align-items: center }
  .hero-visual { margin-top: 32px }
  .hero-lj .hero-visual { margin-top: 0; margin-bottom: 32px; order: 0 }
  .phone-shadow { display: none }
  .phone-frame { width: 240px; height: 500px }
  .hero-tagline { max-width: 100% }
}
@media (max-width: 600px) {
  .hero-actions { flex-direction: column; align-items: stretch }
  .btn-store { justify-content: center }
}

/* ════ FEATURES ════ */
/* ── Feat-Card: Basis in bowhuman-components.css ─────────────────────
   Robin hat 2 Akzent-Sektionen (Cyan = Robin, Orange = LittleJohn).
   Sektion-BG + Icon-Farben werden hier als Overrides gesetzt. ── */
.feat-bg-c { background: var(--nm-a-bg) }
.feat-bg-o { background: var(--nm-o-bg) }
/* ::before Akzentbalken pro Sektion */
.feat-card.c::before { background: var(--cyan) }
.feat-card.o::before { background: var(--orange) }
/* Icon-Farben: .c = cyan-Section, .o = orange-Section */
.feat-icon.c { color: var(--cyan-dk) }
html.dark .feat-icon.c { color: var(--cyan) }
.feat-icon.o { color: var(--orange) }
html.dark .feat-icon.o { color: var(--orange) }
/* Badge-Farben */
.feat-badge.nc { background: rgba(0,188,212,.1); color: var(--cyan); border-color: rgba(0,188,212,.25) }
.feat-badge.sc { background: rgba(255,109,0,.1); color: var(--orange); border-color: rgba(255,109,0,.2) }

/* ════ STEPS ════ */
.steps-bg { background: var(--nm-a-bg) }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 0 }
.step-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 24px; position: relative }
.step-item:not(:last-child)::after { content: ''; position: absolute; top: 52px; right: -1px;
  width: 2px; height: 32px; background: linear-gradient(180deg,var(--cyan),transparent); opacity: .4 }
@media (max-width: 640px) { .step-item:not(:last-child)::after { display: none } }
.step-nr { width: 56px; height: 56px; border-radius: 50%; background: var(--nm-a-bg);
  box-shadow: var(--nm-a-sm); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--cyan);
  margin-bottom: 16px; flex-shrink: 0 }
.step-icon { font-size: 24px; color: var(--cyan); margin-bottom: 12px }
.step-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px }
.step-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6 }

/* ════ ECOSYSTEM ════ */
.eco-bg { background: var(--bg) }
.eco-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px }
/* eco-card = feat-card Optik + produkt-spezifischer Akzentbalken */
.eco-card {
  background: var(--nm-a-bg); border-radius: 20px; padding: 24px 22px;
  box-shadow: var(--nm-a-out);
  transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden;
}
.eco-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 20px 20px 0 0;
}
.eco-card.cr::before { background: var(--cyan) }
.eco-card.cm::before { background: var(--magenta) }
.eco-card.cg::before { background: var(--green) }
.eco-card.co::before { background: var(--orange) }
.eco-card:hover { transform: translateY(-5px) }
html:not(.dark) .eco-card:hover { box-shadow: 8px 8px 20px rgba(163,177,198,.60), -8px -8px 20px rgba(255,255,255,.95) }
html.dark .eco-card:hover { box-shadow: 8px 8px 20px rgba(0,0,0,.55), -8px -8px 20px rgba(255,255,255,.05) }
.eco-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; background: var(--nm-a-bg); box-shadow: var(--nm-a-sm) }
.eco-icon.c { color: var(--cyan-dk) }
html.dark .eco-icon.c { color: var(--cyan) }
.eco-icon.o { color: var(--orange) }
.eco-icon.m { color: var(--magenta) }
.eco-icon.gr { color: #6abf00 }
html.dark .eco-icon.gr { color: var(--green) }
.eco-card h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px }
.eco-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px }
.eco-badge { display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-full); position: absolute; top: 16px; right: 16px }
.eco-badge.lc { background: rgba(0,188,212,.1); color: var(--cyan); border: 1px solid rgba(0,188,212,.2) }
.eco-badge.lo { background: rgba(255,109,0,.1); color: var(--orange); border: 1px solid rgba(255,109,0,.2) }
.eco-badge.lm { background: rgba(233,30,140,.1); color: var(--magenta); border: 1px solid rgba(233,30,140,.2) }
.eco-badge.lg { background: rgba(180,255,46,.18); color: #6abf00; border: 1px solid rgba(180,255,46,.3) }
.eco-badge.sn { background: rgba(120,120,120,.08); color: var(--text-muted); border: 1px solid rgba(120,120,120,.15) }
.eco-url { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; text-decoration: none; transition: color .2s }
.eco-url.c { color: var(--cyan) }
.eco-url.c:hover { color: var(--cyan-dk) }
.eco-url.o { color: var(--orange) }
.eco-url.o:hover { color: var(--orange-dk) }
.eco-url.m { color: var(--magenta) }
.eco-url.m:hover { color: var(--mag-dk) }
.eco-url.gr { color: #6abf00 }
.eco-url i { font-size: 10px }

/* ════ CTA ════ */
.cta-bg { background: linear-gradient(160deg,#0a1e2e 0%,var(--navy) 50%,var(--navy) 100%);
  border-top: 1px solid rgba(0,188,212,.07); border-bottom: 1px solid rgba(0,188,212,.07) }
.cta { padding: var(--section-pad-v) clamp(20px,6vw,80px);
  max-width: var(--content-max); margin: 0 auto; text-align: center }
.cta h2 { font-size: clamp(26px,3.5vw,46px); font-weight: 800; color: #fff;
  letter-spacing: -.03em; margin-bottom: 14px }
.cta p { font-size: clamp(14px,1.4vw,17px); color: rgba(255,255,255,.45);
  max-width: 480px; margin: 0 auto 40px; line-height: 1.75 }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap }
.cta-note { font-size: 12px; color: rgba(255,255,255,.3); margin-top: 20px }

/* ════ FOOTER ════ */


@media (max-width: 960px) {  }
@media (max-width: 600px) {   }


/* ════ STORE TOOLTIP ════ */
.cs { position: relative }
.cs::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--navy-2); color: rgba(255,255,255,.8); font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: var(--r-md); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .2s; border: 1px solid rgba(255,255,255,.1) }
.cs:hover::after { opacity: 1 }

/* ════ PWA MODAL ════ */
.modal-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px }
.modal-card { background: var(--surface-card); border-radius: var(--r-2xl); padding: 36px 32px 28px;
  max-width: 420px; width: 100%; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,.35) }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--text-muted); line-height: 1; padding: 4px 8px;
  border-radius: var(--r-md); transition: color .15s, background .15s }
.modal-close:hover { color: var(--text-primary); background: var(--border) }
.modal-icon { font-size: 2.5rem; margin-bottom: 12px; line-height: 1 }
.modal-icon .ph-target { color: var(--cyan) }
.modal-icon .ph-leaf { color: var(--orange) }
.modal-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 10px; color: var(--text-primary) }
.modal-body { font-size: .9rem; color: var(--text-secondary); line-height: 1.6 }

/* Bogenjagd clock icon */
.ph-light.ph-clock::before { content: "\e198" }

/* ── Marian CTA (Magenta) ── */
.btn-primary-m { background: var(--magenta); color: #fff; box-shadow: 0 4px 20px rgba(233,30,140,.35) }
.btn-primary-m:hover { background: #c2176f; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(233,30,140,.45) }