/* Website UI Kit — components shared across marketing pages */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: #000;
  color: #fff;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: #000;
  border-bottom: 1px solid #1f1f1f;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 32px; }
.nav img { height: 28px; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.nav-links a:hover { color: #c4488e; }

/* Button primitives */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; font: 700 15px/1 var(--font-sans); cursor: pointer; border: 0; text-decoration: none; transition: background 140ms, color 140ms, border-color 140ms; }
.btn-primary { background: #B11871; color: #fff; }
.btn-primary:hover { background: #c4488e; }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid #fff; }
.btn-ghost:hover { background: #fff; color: #111; }
.btn-light { background: #fff; color: #111 !important; padding: 14px 28px; font-size: 14px; font-weight: 700; text-decoration: none !important; }
.btn-light:hover { background: #e6e6e6; color: #111 !important; }
.btn-primary, .btn-ghost { text-decoration: none !important; }

/* Signature underline */
.ck-under { background-image: linear-gradient(#B11871,#B11871); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 4px; padding-bottom: 3px; }
.tan { font-family: var(--font-display); font-style: normal; }

/* Lime/chartreuse banner accent (per brand: #DEE22A) */
.lime-under { background-image: linear-gradient(#DEE22A,#DEE22A); background-repeat:no-repeat; background-position: 0 92%; background-size: 100% 6px; padding-bottom: 6px; }

/* Black with subtle pink radial glow — used sparingly where contrast helps */
.bg-black-pink-radial {
  background:
    radial-gradient(ellipse 60% 80% at 18% 8%, rgba(177,24,113,.36) 0%, rgba(177,24,113,.10) 38%, rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 50% 60% at 92% 92%, rgba(177,24,113,.22) 0%, rgba(0,0,0,0) 60%),
    #000;
}
.bg-black-pink-radial-soft {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(177,24,113,.18) 0%, rgba(0,0,0,0) 60%),
    #000;
}

/* Quote-mark gradient (mimics reference: pink → magenta → light-pink) */
.q-gradient {
  background: linear-gradient(135deg, #B11871 0%, #E23DA3 45%, #F4A7CE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Platform icon chip */
.platform-chip { display:inline-flex; align-items:center; gap:10px; padding:12px 22px 12px 16px; border-radius: 999px; background:#fff; color:#111; border:1.5px solid #e6e6e6; font-weight:700; font-size:14px; white-space: nowrap; line-height: 1; }
.platform-chip svg { width:20px; height:20px; display:block; flex-shrink: 0; }
.platform-chip:hover { border-color:#B11871; color:#B11871; }

/* Forms */
.field-input { width: 100%; padding: 14px 16px; border: 0; font: 500 14px/1.2 var(--font-sans); background: #fff; color: #111; }

/* Photo tile (tilted collage element) */
.photo-tile { border-radius: 22px; overflow: hidden; display: block; box-shadow: 0 24px 60px rgba(0,0,0,.35); }