:root {
  --dark: #070816;
  --cream: #f6f1e8;
  --white: #fff;
  --text: #151622;
  --muted: #5d6170;
  --accent: #19d3c5;
  --accent-2: #ff4f8b;
  --accent-3: #7c5cff;
  --shadow: 0 28px 80px rgba(7,8,22,.18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  background: var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
}

.page-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7,8,22,.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.page-nav-inner {
  max-width: 1180px;
  margin: auto;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.page-logo {
  color: #fff;
  text-decoration: none;
  font-size: 2.5rem;
  font-weight: 950;
  letter-spacing: -.085em;
  line-height: 1;
}

.page-logo span { color: var(--accent); }

.page-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-left: auto;
}

.page-links a {
  color: rgba(255,255,255,.76);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 800;
}

.page-links a:hover,
.page-links a[aria-current="page"] { color: var(--accent); }

.page-quote,
.page-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  padding: 13px 19px;
  color: var(--dark);
  background: linear-gradient(135deg, var(--accent), #fff);
  text-decoration: none;
  font-weight: 900;
}

.page-hero {
  padding: 90px 22px 74px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,79,139,.28), transparent 34%),
    radial-gradient(circle at 84% 4%, rgba(124,92,255,.34), transparent 32%),
    radial-gradient(circle at 78% 84%, rgba(25,211,197,.18), transparent 34%),
    var(--dark);
}

.page-hero-inner,
.page-section {
  max-width: 1040px;
  margin: auto;
}

.page-label {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 950;
}

.page-hero h1 {
  max-width: 900px;
  margin: 14px 0 22px;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .95;
  letter-spacing: -.075em;
}

.page-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: 1.16rem;
}

.page-section { padding: 76px 22px; }

.page-section h2 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.06em;
}

.page-section p,
.page-card p,
.page-card li { color: var(--muted); }

.page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 30px;
}

.page-grid.three { grid-template-columns: repeat(3, 1fr); }

.page-card {
  border: 1px solid rgba(7,8,22,.08);
  border-radius: 26px;
  padding: 27px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 16px 42px rgba(7,8,22,.06);
}

.page-card h2,
.page-card h3 {
  margin-top: 0;
  letter-spacing: -.04em;
  line-height: 1.12;
}

.page-card ul { padding-left: 20px; }

.listing-card {
  position: relative;
  overflow: hidden;
}

.listing-card .save {
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 58px;
  height: 40px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--dark);
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 24px rgba(7,8,22,.22);
  font: inherit;
  cursor: pointer;
}

.listing-card .save span { font-size: 1.25rem; }
.listing-card .save b { font-size: .78rem; }
.listing-card .save.saved { color: #fff; background: var(--accent-2); }

.popularity-note {
  margin: -30px 0 46px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(25,211,197,.12);
  font-size: .9rem;
  font-weight: 850;
}

.likes-notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 2000;
  transform: translate(-50%, 110px);
  padding: 11px 16px;
  border-radius: 999px;
  color: #fff;
  background: var(--dark);
  box-shadow: 0 16px 42px rgba(7,8,22,.25);
  font-size: .84rem;
  font-weight: 850;
  transition: .25s;
}

.likes-notice.show { transform: translate(-50%, 0); }

.business-comments { margin-top: 22px; border-top: 1px solid rgba(7,8,22,.1); padding-top: 16px; }
.business-comments summary { cursor: pointer; font-weight: 900; }
.comment-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 5px; border-radius: 999px; background: rgba(7,8,22,.08); font-size: .72rem; }
.business-comments-list { display: grid; gap: 9px; margin: 15px 0; }
.business-comment { padding: 12px; border-radius: 14px; background: rgba(7,8,22,.05); }
.business-comment p, .comments-empty { margin: 4px 0 0; font-size: .85rem; }
.comment-form { display: grid; gap: 10px; margin-top: 14px; }
.comment-form label, .admin-login label { display: grid; gap: 5px; color: var(--muted); font-size: .78rem; font-weight: 850; }
.comment-form input, .comment-form textarea, .admin-login input { width: 100%; border: 1px solid rgba(7,8,22,.14); border-radius: 12px; padding: 10px; background: #fff; font: inherit; }
.comment-form textarea { min-height: 90px; resize: vertical; }
.comment-form button, .admin-actions button { border: 0; border-radius: 999px; padding: 10px 14px; color: #fff; background: var(--dark); font: inherit; font-size: .8rem; font-weight: 900; cursor: pointer; }
.comment-form small { color: var(--muted); }
.admin-login { max-width: 520px; display: grid; gap: 14px; }
.admin-secondary-button { width: fit-content; border: 0; padding: 3px 0; color: #4d4960; background: transparent; font: inherit; font-size: .82rem; font-weight: 850; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.admin-password-help { padding: 18px; border: 1px solid rgba(7,8,22,.1); border-radius: 16px; background: #fff; }
.admin-password-help p { margin: 6px 0 16px; color: var(--muted); }
.admin-password-help .page-btn { display: inline-block; }
.admin-comments #admin-message { font-weight: 850; }
#admin-comment-list, #admin-listing-list, #admin-photo-list, #admin-contact-list { display: grid; gap: 16px; margin-top: 25px; }
.admin-actions { display: flex; gap: 9px; }
.admin-actions .approve { background: #138d84; }
.admin-actions .reject { background: #b92754; }
.listing-request-form { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.listing-request-form label { display: grid; gap: 7px; color: var(--muted); font-size: .82rem; font-weight: 850; }
.listing-request-form label:nth-child(3), .listing-request-form label:nth-child(4), .listing-request-form label:nth-child(5), .listing-request-form .listing-consent, .listing-request-form button, .listing-request-form p { grid-column: 1 / -1; }
.listing-request-form input, .listing-request-form select, .listing-request-form textarea { width: 100%; border: 1px solid rgba(7,8,22,.14); border-radius: 14px; padding: 13px; background: #fff; font: inherit; }
.listing-request-form textarea { min-height: 130px; resize: vertical; }
.listing-request-form .listing-photo-upload { grid-column: 1 / -1; }
.listing-photo-preview { display: block; width: min(100%, 520px); max-height: 320px; margin-top: 5px; border-radius: 16px; object-fit: contain; background: #eee; }
.listing-request-form .listing-consent { display: flex; grid-template-columns: none; align-items: flex-start; gap: 9px; }
.listing-request-form .listing-consent input { width: auto; margin-top: 4px; }
.listing-request-form small { color: var(--muted); font-weight: 600; }
.listing-agreements { grid-column: 1 / -1; display: grid; gap: 12px; margin: 0; padding: 18px; border: 1px solid rgba(7,8,22,.14); border-radius: 14px; background: rgba(255,255,255,.58); }
.listing-agreements legend { padding: 0 7px; color: var(--text); font-size: .82rem; font-weight: 900; }
.listing-request-form #listing-request-message { color: var(--text); font-weight: 850; }
.listing-policy-note { padding: 14px; border-radius: 14px; color: var(--muted); background: rgba(7,8,22,.05); font-size: .8rem; }
.listing-email-fallback a { font-weight: 900; text-underline-offset: 3px; }
.form-section-title { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid rgba(7,8,22,.12); }
.form-section-title strong { color: var(--text); font-size: 1.05rem; }
.form-section-title span { color: var(--muted); font-size: .78rem; }
.optional-title { margin-top: 8px; }
.listing-offer { padding: 11px 13px; border-radius: 12px; color: #075f58; background: rgba(25,211,197,.12); font-weight: 850; }
.contact-form { margin-bottom: 46px; }
.contact-form label:nth-child(3), .contact-form label:nth-child(4) { grid-column: auto; }
.contact-form label:nth-child(5), .contact-form .contact-honeypot, .contact-form .listing-consent, .contact-form button, .contact-form p { grid-column: 1 / -1; }
.contact-form .contact-honeypot { position: absolute; left: -10000px; }
.contact-details { margin-top: 12px; }

.listing-map,
.listing-photo {
  display: block;
  width: calc(100% + 54px);
  height: 220px;
  margin: -27px -27px 24px;
  border: 0;
  border-bottom: 1px solid rgba(7,8,22,.08);
  background: #e8e5dc;
  object-fit: cover;
}

.category-shortcuts {
  position: sticky;
  top: 100px;
  z-index: 10;
  margin: -28px 0 54px;
  padding: 12px;
  display: flex;
  gap: 9px;
  border: 1px solid rgba(7,8,22,.08);
  border-radius: 22px;
  background: rgba(246,241,232,.94);
  box-shadow: 0 14px 35px rgba(7,8,22,.1);
  backdrop-filter: blur(16px);
}

.category-shortcuts a {
  flex: 1;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--text);
  background: rgba(255,255,255,.72);
  text-align: center;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.2;
}

.category-shortcuts a:hover {
  color: var(--dark);
  background: var(--accent);
}

.listing-category,
#professional-services {
  scroll-margin-top: 190px;
}

.listing-category {
  margin-top: 68px !important;
}

.listing-note {
  margin: 38px 0 0;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(7,8,22,.06);
  font-size: .9rem;
}

.listing-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--dark);
  background: linear-gradient(135deg, var(--accent), #fff);
  font-weight: 950;
  font-size: 1.3rem;
}

.listing-icon-pink {
  background: linear-gradient(135deg, var(--accent-2), #fff);
}

.listing-icon-purple {
  background: linear-gradient(135deg, var(--accent-3), #fff);
}

.listing-tag {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(7,8,22,.06);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.listing-link {
  color: var(--text);
  font-weight: 900;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

.page-card-link {
  color: inherit;
  text-decoration: none;
  transition: .2s ease;
}

.page-card-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.blog-feature-image {
  margin: -120px 0 64px;
  position: relative;
  z-index: 2;
}

.blog-feature-image img,
.blog-pitch img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.blog-feature-image img {
  height: clamp(300px, 46vw, 520px);
  border: 7px solid var(--cream);
}

.blog-pitch {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
  margin-top: 44px;
  align-items: stretch;
}

.blog-pitch img {
  min-height: 100%;
  height: 390px;
}

.blog-pitch .page-callout {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-hub-hero {
  background: radial-gradient(circle at 15% 20%, rgba(255,58,164,.34), transparent 32%), radial-gradient(circle at 88% 12%, rgba(25,211,197,.28), transparent 31%), var(--dark);
}

.blog-section-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.blog-section-links a { padding: 10px 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); text-decoration: none; font-size: .82rem; font-weight: 900; }
.blog-category { padding: 75px 0 5px; scroll-margin-top: 105px; }
.blog-category:first-child { padding-top: 0; }
.blog-category + .blog-category { margin-top: 75px; border-top: 1px solid rgba(7,8,22,.12); }
.blog-category-heading { margin-bottom: 28px; display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.blog-category-heading span, .blog-card-label { color: var(--accent-3); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 950; }
.blog-category-heading h2 { margin: 7px 0; font-size: clamp(2rem,5vw,3.7rem); line-height: 1; letter-spacing: -.06em; }
.blog-category-heading p { max-width: 690px; margin: 0; }
.blog-category-heading > a { flex: 0 0 auto; color: var(--text); font-weight: 900; text-underline-offset: 4px; }
.community-story-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 20px; }
.community-feature-story { min-height: 520px; position: relative; overflow: hidden; display: flex; align-items: end; border-radius: 30px; color: #fff; text-decoration: none; background: var(--dark); box-shadow: 0 24px 65px rgba(7,8,22,.16); }
.community-feature-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.community-feature-story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 25%, rgba(7,8,22,.92)); }
.community-feature-story div { position: relative; z-index: 1; padding: clamp(25px,5vw,44px); }
.community-feature-story span { color: var(--accent); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 950; }
.community-feature-story h3 { margin: 8px 0; max-width: 600px; font-size: clamp(2rem,4vw,3.5rem); line-height: 1; letter-spacing: -.055em; }
.community-feature-story p { max-width: 570px; color: rgba(255,255,255,.76); }
.community-side-stories { display: grid; gap: 20px; }
.community-side-stories .page-card { min-height: 250px; }
.community-business-story { overflow: hidden; padding-top: 0; }
.community-business-story img { width: calc(100% + 54px); height: 145px; margin: 0 -27px 22px; object-fit: cover; }
.blog-category .page-card-link { min-height: 260px; display: flex; flex-direction: column; }
.blog-category .page-card-link p { flex: 1; }
.contributor-section { margin-top: 100px; overflow: hidden; display: grid; grid-template-columns: 1fr .8fr; border-radius: 30px; color: #fff; background: var(--dark); }
.contributor-section > div { padding: clamp(28px,6vw,60px); }
.contributor-section h2 { margin: 9px 0; font-size: clamp(2rem,5vw,3.6rem); line-height: 1; letter-spacing: -.06em; }
.contributor-section p { color: rgba(255,255,255,.72); }
.contributor-section img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }

.page-callout {
  margin-top: 36px;
  padding: clamp(26px, 5vw, 48px);
  border-radius: 30px;
  color: #fff;
  background: var(--dark);
}

.page-callout h2 { margin-top: 0; }
.page-callout p { color: rgba(255,255,255,.72); }

.link-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.brand-link {
  border: 0;
  border-radius: 999px;
  padding: 11px 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dark);
  background: #fff;
  text-decoration: none;
  font: inherit;
  font-size: .86rem;
  font-weight: 900;
  cursor: pointer;
}

.brand-link span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--dark);
  font-weight: 950;
}

.google-link span { background: linear-gradient(135deg, #4285f4 25%, #34a853 50%, #fbbc05 75%, #ea4335); }
.whatsapp-link span { background: #20b75a; }
.facebook-link span { background: #1877f2; }
.call-link span { background: var(--accent-3); }
.copy-link span, .share-native span { background: var(--accent-2); }

.share-panel {
  margin-top: 36px;
  padding: clamp(24px, 5vw, 42px);
  display: grid;
  gap: 22px;
  border: 1px solid rgba(7,8,22,.08);
  border-radius: 30px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 42px rgba(7,8,22,.06);
}

.share-panel h2 { margin: 10px 0 8px; }
.share-panel p { margin: 0; }
.share-message { min-height: 24px; color: var(--text) !important; font-weight: 850; }

.page-footer {
  padding: 32px 22px;
  color: rgba(255,255,255,.7);
  background: #050611;
  text-align: center;
}

@media (max-width: 820px) {
  .page-nav-inner { flex-wrap: wrap; }
  .page-links {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.1);
    justify-content: space-between;
    gap: 10px;
  }
  .page-links a {
    text-align: center;
    font-size: .78rem;
    line-height: 1.2;
  }
  .page-quote { margin-left: auto; }
  .category-shortcuts {
    position: static;
    margin-top: -25px;
    flex-wrap: wrap;
  }
  .category-shortcuts a { flex: 1 1 calc(50% - 9px); }
  .blog-feature-image { margin-top: -95px; }
  .blog-pitch { grid-template-columns: 1fr; }
  .blog-pitch img { height: 300px; }
  .community-story-grid, .contributor-section { grid-template-columns: 1fr; }
  .community-feature-story { min-height: 460px; }
  .contributor-section img { min-height: 270px; }
  .page-grid, .page-grid.three { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .page-nav-inner { gap: 12px; padding: 17px; }
  .page-links { gap: 7px; }
  .page-links a { font-size: .7rem; }
  .page-logo { font-size: 2.1rem; }
  .page-quote { padding: 10px 13px; font-size: .86rem; margin-left: auto; }
  .page-hero { padding: 65px 18px 58px; }
  .page-section { padding: 58px 18px; }
  .blog-feature-image { margin-top: -85px; margin-bottom: 46px; }
  .blog-feature-image img { height: 245px; border-width: 5px; }
  .blog-pitch img { height: 245px; }
  .blog-category { padding-top: 55px; }
  .blog-category + .blog-category { margin-top: 55px; }
  .blog-category-heading { display: block; }
  .blog-category-heading > a { display: inline-block; margin-top: 13px; }
  .community-feature-story { min-height: 410px; }
  .listing-request-form { grid-template-columns: 1fr; }
  .listing-request-form label { grid-column: 1 !important; }
}