/* ==========================================================================
   Homepage
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { padding: 160px 40px 120px; display: flex; justify-content: center; }
.hero__inner { width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.hero__text { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; overflow: hidden; }
.hero__kicker { font: 400 18px/27px var(--f-body); color: var(--ink-3); }
.hero__title { align-self: stretch; white-space: pre-wrap; font: 600 64px/64px var(--f-head); letter-spacing: -0.04em; color: var(--ink); }
.hero__lead { max-width: 700px; font: 400 23px/34.5px var(--f-body); color: var(--ink-3); }

/* ---------- Offerings (teal "bento" cards) ---------- */
.bento { position: relative; background: var(--teal); padding: 160px 40px 100px; display: flex; justify-content: center; scroll-margin-top: 0; }
.bento__badge {
  position: absolute; top: -60px; left: 50%; margin-left: -56px; width: 112px; height: 112px; padding: 16px;
  border-radius: 200px; background: var(--white); box-shadow: var(--shadow-card);
}
.bento__badge img { width: 100%; height: 100%; object-fit: contain; }
.bento__list { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 40px; }

.card { background: var(--card); border-radius: 32px; box-shadow: var(--shadow-card); padding: 40px; display: flex; gap: 40px; overflow: hidden; }
.card__media { position: relative; flex: 0 0 calc(50% - 20px); min-width: 0; border-radius: 12px; overflow: hidden; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__body { flex: 0 0 calc(50% - 20px); min-width: 0; padding: 12px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; }
.card__eyebrow { font: 700 18px/21.6px var(--f-head); letter-spacing: 0.04em; color: var(--gray); }
.card__title { font: 700 34px/44.2px var(--f-head); letter-spacing: -0.04em; color: var(--ink-2); }
.card__text { font: 400 20px/30.6px var(--f-body); color: var(--slate); }
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { background: var(--mint); border-radius: 8px; padding: 12px 16px; font: 400 18px/27px var(--f-body); color: var(--ink-2); }

/* ---------- Why Codefi ---------- */
.why { padding: 100px 40px; display: flex; justify-content: center; overflow: hidden; }
.why__inner { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 60px; }
.why__title { max-width: 700px; font: 600 44px/52.8px var(--f-head); letter-spacing: -0.04em; color: var(--green); }
.feature { display: flex; align-items: center; justify-content: center; gap: 32px; min-height: 250px; }
.feature__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.feature__title { font: 500 34px/44.2px var(--f-head); letter-spacing: -0.04em; color: var(--ink); }
.feature__text { font: 400 16px/24px var(--f-body); color: var(--gray); }
.feature__media { flex: 1 1 0; min-width: 0; height: 250px; border-radius: 20px; overflow: hidden; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.chip { background: var(--chip); border-radius: 12px; padding: 10px 18px; font: 400 18px/27px var(--f-body); color: var(--ink-3); }

.stats { background: var(--teal); border-radius: 24px; padding: 24px; display: flex; justify-content: center; align-items: flex-start; gap: 20px; }
.stat { flex: 1 1 0; min-width: 0; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.stat__num { font: italic 600 44px/52.8px var(--f-head); letter-spacing: -0.02em; color: var(--lime); }
.stat__label { font: 400 18px/27px var(--f-body); color: var(--white); }

/* ---------- FAQ ---------- */
.faq { position: relative; padding: 100px 40px; display: flex; justify-content: center; overflow: hidden; }
.faq__bg { position: absolute; top: -115px; left: -45px; width: calc(100% + 90px); height: auto; aspect-ratio: 1632 / 1800; opacity: .09; pointer-events: none; object-fit: cover; max-width: none; }
.faq__inner { position: relative; width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 40px; }
.faq__head { display: flex; justify-content: space-between; align-items: flex-start; }
.faq__title { width: 500px; font: 600 44px/52.8px var(--f-head); letter-spacing: -0.04em; color: var(--ink); }
.faq__title span { display: block; }
.faq__side { width: 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.faq__side p { font: 400 18px/27px var(--f-body); color: var(--gray); }




/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199.98px) {
  .hero { padding: 140px 30px 80px; }
  .hero__title { font-size: 49px; line-height: 49px; }
  .hero__kicker { font-size: 17px; line-height: 25.5px; }
  .hero__lead { max-width: 450px; font-size: 17px; line-height: 25.5px; }

  .bento { padding: 80px 30px; }
  .bento__badge { top: -43px; margin-left: -41px; width: 82px; height: 82px; padding: 12px; }
  .bento__list { gap: 30px; }
  .card { flex-direction: column; gap: 24px; }
  .card__media { order: -1; flex: none; height: 345px; }
  .card__body { flex: none; padding: 0; }
  .card__title { font: 700 30px/39px var(--f-inter); letter-spacing: -0.04em; font-feature-settings: var(--inter-features); }
  .tag { font-size: 17px; line-height: 25.5px; }

  .why { padding: 80px 30px; }
  .why__inner { gap: 30px; }
  .why__title { font-size: 38px; line-height: 45.6px; }
  .feature__body { flex: 10 1 0; }
  .feature__media { flex: 7 1 0; } /* Framer splits these rows 10:7 on tablet */
  .feature__title { font-size: 30px; line-height: 39px; }
  .feature__text { font-size: 15px; line-height: 22.5px; }
  .chip { font-size: 17px; line-height: 25.5px; }
  .stats { padding: 16px; gap: 10px; }
  .stat { padding: 10px; }
  .stat__num { font-size: 28px; line-height: 33.6px; }
  .stat__label { font-size: 17px; line-height: 25.5px; }

  .faq { padding: 80px 30px; }
  .faq__inner { gap: 30px; }
  .faq__title { width: 430px; font-size: 38px; line-height: 45.6px; }
  .faq__contact { background: transparent; color: var(--green-dark); box-shadow: inset 0 0 0 1px var(--green-dark); }
  .faq__contact:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--green-dark), 0 8px 20px 0 rgba(212, 237, 114, 0.54); }
  .faq__side p { font-size: 17px; line-height: 25.5px; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 809.98px) {
  .hero { padding: 120px 20px 90px; }
  .hero__inner { gap: 20px; }
  .hero__title { font-size: 38px; line-height: 38px; }
  .hero__kicker, .hero__lead { font-size: 16px; line-height: 24px; }
  .hero__lead { max-width: 400px; }

  .bento { padding: 60px 20px; }
  .bento__badge { top: -33px; margin-left: -33px; width: 66px; height: 66px; padding: 10px; }
  .bento__list { gap: 20px; }
  .card { padding: 20px; gap: 30px; }
  .card__media { height: 256px; }
  .card__body { gap: 16px; }
  .card__title { font-size: 24px; line-height: 31.2px; }
  .tag { font-size: 16px; line-height: 24px; }

  .why { padding: 60px 20px; }
  .why__inner { gap: 60px; }
  .why__title { font-size: 30px; line-height: 36px; letter-spacing: -0.09em; text-align: center; }
  .feature { flex-direction: column; gap: 4px; padding: 0 20px; }
  .feature__media { order: -1; flex: none; width: 100%; }
  .feature__body { flex: none; width: 100%; padding: 20px 0 40px; }
  .feature__title { font-size: 24px; line-height: 31.2px; }
  .feature__text { font-size: 14px; line-height: 21px; }
  .chip { font-size: 16px; line-height: 24px; }
  .chips--sm { gap: 10px; flex-wrap: nowrap; }
  .chips--sm .chip { font-size: 14px; line-height: 21px; }
  .stats { flex-direction: column; align-items: flex-start; padding: 24px; gap: 4px; }
  .stat { width: 100%; padding: 16px; }
  .stat__num { font-size: 44px; line-height: 52.8px; }
  .stat__label { font-size: 16px; line-height: 24px; }

  .faq { padding: 60px 20px; }
  .faq__inner { gap: 20px; }
  .faq__head { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .faq__title { width: auto; font-size: 30px; line-height: 36px; letter-spacing: -0.09em; }
  .faq__side { width: 320px; align-items: center; }
  .faq__side p { font-size: 16px; line-height: 24px; }
}

/* anchor offset for "Choose your path!" (matches the Framer scroll position) */
#offerings { scroll-margin-top: 120px; }