/* ==========================================================================
   v4 — deeper banner with a restrained graphic
   The full-brightness violet gradient was overpowering at full height, so the
   ground drops to a deep violet and the interest comes from geometry instead
   of saturation: a fine grid, a soft mesh glow and a faint diagonal sheen.
   All CSS, no image request.
   ========================================================================== */
.hero.on-dark{
  background:
    linear-gradient(150deg,#2E1B57 0%,#241246 45%,#1B0E36 100%);
}
.hero::before{
  background:
    radial-gradient(920px 540px at 80% 4%,rgba(139,92,246,.44),transparent 62%),
    radial-gradient(700px 440px at 6% 98%,rgba(107,70,193,.32),transparent 66%);
  opacity:1;
}
/* The banner graphic is the Quay monogram itself, set large and faint and
   bleeding off the right edge. It belongs to the brand, so it reads as
   identity rather than decoration. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    url('quay-mark-light.svg') no-repeat,
    linear-gradient(112deg,transparent 40%,rgba(196,181,253,.07) 50%,transparent 60%);
  background-size:min(58vw,760px) auto, 100% 100%;
  background-position:right -7vw center, 0 0;
  opacity:.11;
}
@media (max-width:900px){
  .hero::after{background-size:min(96vw,560px) auto,100% 100%;background-position:right -30vw bottom 8%,0 0;opacity:.085}
}
.hero > *{position:relative;z-index:1}

.hero .lede{color:rgba(255,255,255,.82)}
.hero .tag,.hero .tag-accent{color:var(--accent-lt)}
.hero .btn-solid{background:var(--accent);color:#fff;border-color:var(--accent)}
.hero .btn-solid:hover{background:#A78BFA;border-color:#A78BFA}
.hero .btn-solid:active{background:#7C3AED;border-color:#7C3AED}
.hero .btn-line{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero .cleat{background:var(--accent-lt)}
.hero .rope{background:linear-gradient(to right,rgba(196,181,253,.9),rgba(196,181,253,.2))}
.hero .moor-list::before{background:linear-gradient(to bottom,transparent,rgba(196,181,253,.7) 12%,rgba(196,181,253,.7) 88%,transparent)}
.hero .moor-cap{border-bottom-color:rgba(255,255,255,.24)}
.hero .moor-sector{color:rgba(255,255,255,.58)}
.hero .scroll-cue{color:rgba(255,255,255,.6)}