/* ==========================================================================
   HOME PAGE SPECIFIC STYLES (home-page.css)
   ========================================================================== */

:root {
  --hp-navy: #063f63;
  --hp-deep: #032f4c;
  --hp-blue: #08b8e5;
  --hp-yellow: #ffd400;
  --hp-coral: #ff6e55;
  --hp-ink: #102d3d;
  --hp-muted: #58717e;
}

/* SMOOTH SCROLLING & HEADER OFFSET */
html {
  scroll-behavior: smooth;
}

#businesses,
#associations,
#how,
#join {
  scroll-margin-top: 100px; /* Prevents fixed header from covering section headings */
}

/* VECTOR SVG ICON ALIGNMENT IN WINNER CARDS */
.winner-grid i svg {
  display: block;
}

/* SCOPED BOX-SIZING FOR HOMEPAGE SECTIONS */
.hero, .winners, .audience, .how, .join,
.hero *, .winners *, .audience *, .how *, .join * {
  box-sizing: border-box;
}

/* HERO SECTION */
.hero {
  min-height: 680px;
  background: linear-gradient(125deg, #063f63 0%, #064769 56%, #057696 100%);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;
  align-items: center;
  padding: 120px max(6vw, calc((100vw - 1180px) / 2)) 74px;
  gap: 34px;
}
.hero:before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  border: 80px solid rgba(0, 190, 230, 0.1);
  border-radius: 50%;
  top: -240px;
  left: -160px;
}
.hero-copy {
  position: relative;
  z-index: 2;
  color: #fff;
}
.hero .eyebrow,
.join .eyebrow {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--hp-yellow);
  margin: 0 0 18px;
}
.hero h1 {
  font-size: clamp(48px, 5.4vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin: 0;
  color: #fff;
}
.hero h1 span {
  color: var(--hp-yellow);
}
.hero-lead {
  font-size: 20px;
  line-height: 1.55;
  max-width: 615px;
  color: #d6edf4;
  margin: 28px 0 32px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 17px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  transition: 0.2s;
  text-decoration: none;
}
.hero-actions .button:hover {
  transform: translateY(-2px);
}
.hero-actions .yellow {
  background: var(--hp-yellow);
  color: var(--hp-deep);
}
.hero-actions .outline {
  border: 2px solid rgba(255, 255, 255, 0.65);
  color: #fff;
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
  color: #bfe5ef;
  font-size: 13px;
}

/* HERO VISUAL MOCKUP */
.hero-visual {
  height: 550px;
  position: relative;
}
.orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  inset: 35px;
}
.orbit.two {
  inset: 100px;
  border-color: rgba(255, 212, 0, 0.3);
}
.phone {
  position: absolute;
  width: 290px;
  height: 470px;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(2deg);
  border: 9px solid #eff5f6;
  border-radius: 32px;
  box-shadow: 0 32px 70px rgba(0, 20, 36, 0.35);
  overflow: hidden;
}
.phone-top {
  height: 60px;
  background: #053c5c;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.phone-top i {
  height: 15px;
  width: 15px;
  background: var(--hp-yellow);
  border-radius: 50%;
  margin-right: 8px;
}
.offer-image {
  height: 245px;
  background: linear-gradient(145deg, #0ba7c4, #07415f);
  display: flex;
  align-items: flex-end;
  padding: 22px;
  color: #fff;
  font-weight: 900;
  font-size: 27px;
  line-height: 0.95;
  position: relative;
}
.offer-image:after {
  content: "%";
  position: absolute;
  font-size: 120px;
  color: rgba(255, 212, 0, 0.85);
  right: 15px;
  top: 32px;
}
.offer-copy {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.offer-copy b {
  font-size: 20px;
  color: var(--hp-ink);
}
.offer-copy small {
  color: #6a7f89;
}
.float {
  position: absolute;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 18px 38px rgba(0, 30, 50, 0.25);
  padding: 15px 18px;
  display: grid;
  grid-template-columns: 30px 1fr;
  min-width: 190px;
  color: var(--hp-ink);
}
.float span {
  grid-row: 1/3;
  font-size: 22px;
}
.float b {
  font-size: 14px;
}
.float small {
  color: #67808d;
  margin-top: 4px;
}
.float.local {
  top: 85px;
  left: 0;
}
.float.national {
  right: -5px;
  top: 165px;
}
.float.members {
  bottom: 65px;
  left: 0;
  background: var(--hp-yellow);
  display: flex;
  flex-direction: column;
}

/* WINNERS SECTION */
.winners {
  background: #062f4c;
  color: #fff;
  padding: 95px 6vw;
}
.section-heading {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 52px;
}
.winners .eyebrow,
.audience .eyebrow,
.how .eyebrow {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--hp-blue);
  margin: 0 0 18px;
}
.section-heading h2,
.audience-copy h2,
.join h2 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0;
}
.section-heading h2 span,
.audience-copy h2 span {
  color: var(--hp-blue);
}
.section-heading > p:last-child {
  font-size: 18px;
  color: #bcd7e2;
  line-height: 1.6;
}
.winner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1160px;
  margin: auto;
}
.winner-grid article {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
}
.winner-grid i,
.steps i {
  width: 54px;
  height: 54px;
  border-radius: 13px;
  background: var(--hp-yellow);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 25px;
}
.winner-grid article:nth-child(2) i {
  background: var(--hp-blue);
}
.winner-grid article:nth-child(3) i {
  background: var(--hp-coral);
}
.winner-grid h3 {
  font-size: 22px;
  margin: 24px 0 10px;
  color: #fff;
}
.winner-grid p {
  color: #bed5df;
  line-height: 1.6;
  margin: 0;
}
.platform-button {
  display: block;
  width: fit-content;
  margin: 24px auto 0;
  padding: 13px 22px;
  border-radius: 8px;
  background: var(--hp-yellow);
  color: var(--hp-deep);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(0, 20, 36, 0.24);
  cursor: default;
}

/* AUDIENCE SECTION */
.audience {
  max-width: 1180px;
  margin: auto;
  padding: 105px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 78px;
  align-items: center;
  color: var(--hp-ink);
}
.audience.association {
  max-width: none;
  background: #f0f8fa;
  padding-left: max(24px, calc((100vw - 1180px) / 2));
  padding-right: max(24px, calc((100vw - 1180px) / 2));
}
.audience-copy .lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--hp-muted);
  margin: 24px 0 30px;
}
.benefit-list {
  display: grid;
  gap: 20px;
  margin-bottom: 30px;
}
.benefit-list article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
}
.benefit-list article > span {
  height: 32px;
  width: 32px;
  background: #e4f7fc;
  color: #078caf;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
}
.benefit-list h3 {
  font-size: 17px;
  margin: 0 0 5px;
  color: var(--hp-ink);
}
.benefit-list p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--hp-muted);
  margin: 0;
}
.audience-copy .join-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 17px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  background: var(--hp-navy);
  color: #fff;
  text-decoration: none;
  transition: 0.2s;
}
.audience-copy .join-button:hover {
  transform: translateY(-2px);
}
.micro {
  font-size: 12px;
  color: #78909b;
  margin: 12px 0 0;
}

/* AUDIENCE GRAPHICS */
.audience-art {
  min-height: 560px;
  border-radius: 28px;
  padding: 48px;
  position: relative;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 24px 60px rgba(6, 63, 99, 0.16);
}
.business-art {
  background: linear-gradient(150deg, #008bb5, #064163 72%);
}
.association-art {
  background: linear-gradient(145deg, #073b5e, #057da0);
}
.audience-art:before {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  border: 70px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  right: -170px;
  top: -150px;
}
.audience-art > p {
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--hp-yellow);
  position: relative;
}
.audience-art > h3 {
  font-size: 35px;
  line-height: 1.15;
  margin: 25px 0;
  position: relative;
  color: #fff;
}
.metric {
  position: absolute;
  bottom: 45px;
  left: 48px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.metric strong {
  font-size: 70px;
  color: var(--hp-yellow);
}
.metric span {
  max-width: 160px;
  font-size: 14px;
}
.mini-offer {
  position: absolute;
  right: 35px;
  bottom: 145px;
  background: #fff;
  color: var(--hp-ink);
  width: 245px;
  padding: 22px;
  border-radius: 14px;
  transform: rotate(3deg);
  box-shadow: 0 18px 45px #002c4688;
  display: flex;
  flex-direction: column;
}
.mini-offer span {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #049bc4;
  font-weight: 900;
}
.mini-offer b {
  font-size: 19px;
  margin: 10px 0;
}
.market-window {
  position: absolute;
  bottom: 42px;
  left: 48px;
  right: 48px;
  background: #fff;
  color: var(--hp-ink);
  border-radius: 17px;
  padding: 22px;
  box-shadow: 0 18px 45px #002c4688;
}
.market-window > div:first-child {
  display: flex;
  justify-content: space-between;
}
.market-window > div span {
  font-size: 12px;
  color: #6b8490;
}
.categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 22px 0;
}
.categories i {
  min-height: 92px;
  border-radius: 13px;
  padding: 12px 7px 10px;
  text-align: center;
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 7px 16px rgba(6, 63, 99, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.75);
}
.categories i:nth-child(1) { background: linear-gradient(145deg, #fff0d8, #ffd990); }
.categories i:nth-child(2) { background: linear-gradient(145deg, #e4f8ed, #aee8c8); }
.categories i:nth-child(3) { background: linear-gradient(145deg, #e1f5ff, #a8ddf7); }
.categories i:nth-child(4) { background: linear-gradient(145deg, #fce6f3, #f7b7da); }
.categories i span { font-size: 30px; line-height: 1; }
.categories i b { font-size: 10px; line-height: 1.15; color: #173b4d; }
.market-window small { font-weight: 700; color: #078caf; }

/* HOW IT WORKS SECTION */
.how {
  padding: 100px 24px;
  color: var(--hp-ink);
}
.how .section-heading > p:last-child {
  color: var(--hp-muted);
}
.steps {
  max-width: 1120px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.steps article {
  position: relative;
  border: 1px solid #dce9ed;
  border-radius: 18px;
  padding: 30px;
}
.steps article > span {
  position: absolute;
  right: 22px;
  top: 18px;
  font-size: 42px;
  font-weight: 900;
  color: #eef4f6;
}
.steps h3 {
  font-size: 20px;
  margin: 24px 0 10px;
  color: var(--hp-ink);
}
.steps p {
  color: var(--hp-muted);
  line-height: 1.6;
}

/* JOIN SECTION */
.join {
  background: var(--hp-navy);
  color: #fff;
  margin: 0 4vw 60px;
  border-radius: 25px;
  padding: 70px max(5vw, 55px);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 50px;
}
.join h2 {
  font-size: 47px;
  color: #fff;
}
.join > div > p:last-child {
  color: #b9d4df;
}
.join-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.join-cards a {
  min-height: 185px;
  border-radius: 14px;
  padding: 25px;
  background: #fff;
  color: var(--hp-ink);
  display: flex;
  flex-direction: column;
  transition: 0.2s;
  text-decoration: none;
}
.join-cards a:nth-child(2) {
  background: var(--hp-yellow);
}
.join-cards a:hover {
  transform: translateY(-4px);
}
.join-cards span {
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 900;
  color: #058fb7;
}
.join-cards b {
  font-size: 22px;
  line-height: 1.25;
  margin: 20px 0 auto;
}
.join-cards small {
  font-weight: 800;
}

/* RESPONSIVE DESIGN */
@media (max-width: 900px) {
  .hero {
	grid-template-columns: 1fr;
	padding-top: 110px;
  }
  .hero-copy {
	text-align: center;
  }
  .hero-lead {
	margin-left: auto;
	margin-right: auto;
  }
  .hero-actions,
  .trust-row {
	justify-content: center;
  }
  .hero-visual {
	height: 480px;
  }
  .winner-grid,
  .steps {
	grid-template-columns: 1fr;
  }
  .audience {
	grid-template-columns: 1fr;
	gap: 45px;
  }
  .association .audience-art {
	order: 2;
  }
  .join {
	grid-template-columns: 1fr;
  }
  .join-cards {
	grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .hero {
	padding: 100px 20px 60px;
  }
  .hero-actions {
	flex-direction: column;
  }
  .hero-actions .button {
	width: 100%;
  }
  .trust-row {
	gap: 9px 16px;
  }
  .hero-visual {
	height: 430px;
  }
  .phone {
	width: 245px;
	height: 395px;
  }
  .offer-image {
	height: 190px;
  }
  .float {
	min-width: 158px;
	padding: 11px;
  }
  .float.local { left: -10px; }
  .float.national { right: -10px; }
  .winners,
  .audience,
  .how {
	padding: 75px 20px;
  }
  .audience-art {
	min-height: 510px;
	padding: 32px;
  }
  .audience-art > h3 {
	font-size: 29px;
  }
  .metric {
	left: 30px;
	bottom: 30px;
  }
  .mini-offer {
	right: 18px;
	bottom: 145px;
	width: 205px;
  }
  .market-window {
	left: 22px;
	right: 22px;
	bottom: 24px;
  }
  .market-window > div:first-child {
	display: grid;
	gap: 5px;
  }
  .join {
	margin: 0 15px 45px;
	padding: 50px 24px;
  }
  .join h2 {
	font-size: 39px;
  }
}