/* ============================================================================
 *  BamBuddies marketing site — shared design system
 *  Source: docs/ios/mockups/prototype-public-site.html (frame-shared CSS)
 *
 *  Each page links this file via <link rel="stylesheet" href="/css/site.css">
 *  and adds only page-specific styles inline. Keep CDN imports per-page so
 *  fonts/icons fail-fast if CDNs go down (matches current repo pattern).
 * ========================================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary:        #c93b8b;
  --primary-dark:   #9d2467;
  --primary-light:  #ec4fa3;
  --primary-tint:   #fce7f3;
  --primary-tint2:  #fdf2f8;
  --cream:          #fdf8f0;
  --text:           #1a1a1a;
  --muted:          #6b7280;
  --border:         #ece8e0;
  --green:          #15803d;
}

body {
  background:   var(--cream);
  color:        var(--text);
  font-family:  'Outfit', system-ui, -apple-system, sans-serif;
  min-height:   100vh;
  line-height:  1.5;
  position:     relative;
  overflow-x:   hidden;
}

/* Subtle tile pattern in the background */
body::before {
  content:        '';
  position:       fixed;
  inset:          0;
  opacity:        .04;
  pointer-events: none;
  z-index:        0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23c93b8b' stroke-width='1' opacity='.5'><rect x='8' y='8' width='20' height='26' rx='3'/><rect x='36' y='14' width='20' height='26' rx='3'/><rect x='12' y='44' width='20' height='26' rx='3'/><rect x='44' y='46' width='22' height='26' rx='3'/></g></svg>");
}

a { color: inherit; }

/* ─── Navigation ────────────────────────────────────────────────────────── */

.nav {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          20px 48px;
  position:         sticky;
  top:              0;
  z-index:          50;
  background:       rgba(253, 248, 240, .92);
  backdrop-filter:  blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:    1px solid rgba(0, 0, 0, .05);
}

.logo {
  display:          flex;
  align-items:      center;
  gap:              10px;
  text-decoration:  none;
}

.logo-mark {
  width:            36px;
  height:           36px;
  border-radius:    10px;
  display:          block;
  flex:             none;
  object-fit:       contain;
}

.logo-text {
  font-family:    'DM Serif Display', serif;
  font-size:      22px;
  color:          var(--text);
}

.nav-links {
  display:      flex;
  gap:          28px;
  align-items:  center;
}

.nav-link {
  font-size:        14px;
  color:            var(--text);
  font-weight:      500;
  text-decoration:  none;
  transition:       color .15s;
}

.nav-link:hover            { color: var(--primary); }
.nav-link.active           { color: var(--primary); }

.nav-cta {
  display:      flex;
  gap:          10px;
  align-items:  center;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */

.btn-sm {
  padding:          8px 16px;
  border-radius:    99px;
  font-size:        13px;
  font-weight:      600;
  cursor:           pointer;
  border:           none;
  font-family:      inherit;
  text-decoration:  none;
  display:          inline-flex;
  align-items:      center;
  gap:              6px;
  transition:       transform .15s, box-shadow .15s;
}

.btn-sm.secondary {
  background: transparent;
  color:      var(--text);
}

.btn-sm.primary {
  background: var(--primary);
  color:      #fff;
  box-shadow: 0 4px 12px rgba(201, 59, 139, .25);
}

.btn-sm.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(201, 59, 139, .32);
}

.btn-lg {
  padding:          14px 24px;
  border-radius:    99px;
  font-size:        15px;
  font-weight:      700;
  cursor:           pointer;
  border:           none;
  display:          inline-flex;
  align-items:      center;
  gap:              8px;
  font-family:      inherit;
  text-decoration:  none;
  transition:       transform .15s, box-shadow .15s;
}

.btn-lg.primary {
  background: var(--primary);
  color:      #fff;
  box-shadow: 0 8px 24px rgba(201, 59, 139, .3);
}

.btn-lg.primary:hover {
  transform:  translateY(-1px);
  box-shadow: 0 12px 28px rgba(201, 59, 139, .35);
}

.btn-lg.secondary {
  background: #fff;
  color:      var(--text);
  border:     1.5px solid var(--border);
}

.btn-lg.secondary:hover {
  border-color: var(--primary);
  color:        var(--primary);
}

/* ─── Section headings ──────────────────────────────────────────────────── */

.section-title {
  font-family:    'DM Serif Display', serif;
  font-size:      44px;
  line-height:    1.1;
  letter-spacing: -1px;
  color:          var(--text);
  text-align:     center;
  margin-bottom:  14px;
}

.section-title .script {
  font-family:  'Caveat', cursive;
  color:        var(--primary);
  font-weight:  700;
}

.section-sub {
  text-align:     center;
  font-size:      16px;
  color:          var(--muted);
  margin:         0 auto 48px;
  max-width:      600px;
  line-height:    1.5;
}

/* ─── Page container ────────────────────────────────────────────────────── */

.content {
  padding:    60px 48px;
  position:   relative;
  z-index:    1;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */

.footer {
  background:   #1a1a1a;
  color:        #999;
  padding:      48px 48px 30px;
  position:     relative;
  z-index:      1;
}

.footer-grid {
  display:                grid;
  grid-template-columns:  2fr 1fr 1fr 1fr;
  gap:                    40px;
  margin:                 0 auto 32px;
  max-width:              1200px;
}

.footer-col h4 {
  color:          #fff;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom:  14px;
}

.footer-col a {
  display:          block;
  color:            #999;
  font-size:        13px;
  margin-bottom:    8px;
  text-decoration:  none;
  transition:       color .15s;
}

.footer-col a:hover { color: var(--primary); }

.footer-brand   { max-width: 280px; }
.footer-brand p { font-size: 13px; line-height: 1.6; margin-top: 12px; color: #999; }

.footer-bottom {
  max-width:      1200px;
  margin:         0 auto;
  padding-top:    24px;
  border-top:     1px solid #333;
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  font-size:      12px;
  color:          #666;
}

.socials      { display: flex; gap: 10px; margin-top: 16px; }
.social {
  width:            32px;
  height:           32px;
  border-radius:    8px;
  background:       #2a2a2a;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            #999;
  text-decoration:  none;
  transition:       background .15s, color .15s;
}
.social:hover { background: var(--primary); color: #fff; }

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .nav            { padding: 16px 20px; flex-wrap: wrap; gap: 12px; }
  .nav-links      { display: none; }
  .content        { padding: 40px 20px; }
  .section-title  { font-size: 32px; }
  .footer         { padding: 36px 20px 24px; }
  .footer-grid    { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom  { flex-direction: column; gap: 8px; }
}