/* ============================================
   HOMEPAGE HERO

   Modelled on befreeltd.com's hero. Values from their stylesheet:
     section padding 130px top / 50px bottom · copy column 50%
     h1 Sora 48px, line-height 1.2em, #3230E0 with a #FF668D phrase
     paragraph Noto Sans 16px / 30px, 80% width, highlight 500 #3230E0
     button #3230E0 → #262184, 7px 35px padding, 50px radius
     credentials: four across, 40px icons, Noto Sans 14px / 16px #4F3D72
     background fades to #FEFCFA from 53% to 90%

   The background arcs and the globe column are drawn here in HTML/SVG
   with TheCPASolutions content - no Befree artwork is used.
   ============================================ */

.bf-hero {
  position: relative;
  margin-top: calc(-1 * var(--sh-h, 94px));
  padding: 130px 20px 30px;
  overflow: hidden;
  background: #fcf5f0;
  color: #101010;
  isolation: isolate;
}

/* Top padding restated at doubled-class specificity so no generic
   section rule can pull the headline up under the fixed header. */
section.bf-hero.bf-hero { padding-top: 100px; }

@media (max-width: 1024px) {
  section.bf-hero.bf-hero { padding-top: calc(var(--sh-h, 72px) + 40px); }
}

.bf-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.bf-hero__bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bf-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 53%, #fefcfa 90%);
}

.bf-hero__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

/* ---------- Copy column ---------- */
.bf-hero__copy {
  flex: 0 0 50%;
  max-width: 50%;
}

.bf-hero__title {
  margin: 0 0 22px;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0;
  color: #3230e0;
  text-wrap: pretty;
}

.bf-hero__title span { color: #ff668d; }

.bf-hero__lead {
  width: 80%;
  margin: 0 0 30px;
  font-family: "Noto Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  color: #101010;
}

.bf-hero__lead strong {
  font-weight: 500;
  color: #3230e0;
}

.bf-hero__btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 35px;
  border-radius: 50px;
  background: #3230e0;
  color: #ffffff;
  font-family: "Noto Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.bf-hero__btn:hover,
.bf-hero__btn:focus-visible { background: #262184; color: #ffffff; }

.bf-hero__trust-label {
  width: 80%;
  margin: 26px 0 0;
  padding-top: 10px;
  font-family: "Noto Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 30px;
  color: #101010;
}

.bf-hero__creds {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.bf-hero__creds li {
  flex: 0 0 25%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 10px;
  font-family: "Noto Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 16px;
  color: #4f3d72;
}

.bf-hero__creds svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* ---------- Illustration column (.bf-hero__visual / .bfv) ----------
   Not currently shown on the homepage hero (the founder portrait is used
   instead). Kept for reuse elsewhere - markup: tools/home_hero.py
   illustration_html(). */
.bf-hero__visual {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  justify-content: flex-end;
}

.bfv {
  position: relative;
  width: 100%;
  max-width: 680px;
  aspect-ratio: 1.3 / 1;
  container-type: inline-size;
  font-family: "Noto Sans", system-ui, sans-serif;
}

.bfv__plate {
  position: absolute;
  border-radius: 6cqi;
}

.bfv__plate--main {
  left: 0;
  top: 0;
  width: 53%;
  height: 60%;
  background: linear-gradient(165deg, #ffab57 0%, #ff668d 42%, #5b46e6 78%, #76caff 100%);
}

.bfv__plate--side {
  left: 76%;
  top: 38%;
  width: 24%;
  height: 43%;
  background: linear-gradient(200deg, #3230e0 0%, #5b72f0 55%, #76caff 100%);
}

.bfv__plate--foot {
  left: 27%;
  top: 83%;
  width: 55%;
  height: 17%;
  border-radius: 0 0 6cqi 6cqi;
  background: linear-gradient(90deg, #76caff 0%, #ff8fab 45%, #6d52e8 100%);
}

.bfv__globally {
  position: absolute;
  left: 6.4%;
  top: 3.4%;
  display: flex;
  align-items: center;
  gap: 0.9cqi;
  font-size: 1.75cqi;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}

.bfv__globally svg { width: 2.3cqi; height: 2.3cqi; stroke: #ffffff; stroke-width: 1.8; fill: none; }

.bfv__card {
  position: absolute;
  background: #ffffff;
  border-radius: 1.9cqi;
  box-shadow: 0 1.4cqi 3.6cqi -1.2cqi rgba(35, 13, 79, 0.22);
}

/* Card A - process */
.bfv__card--process {
  left: 6.3%;
  top: 9.5%;
  width: 31.5%;
  height: 58%;
  padding: 3.2cqi 2.6cqi;
  display: flex;
  flex-direction: column;
  gap: 2.4cqi;
}

.bfv__card-title {
  margin: 0;
  font-size: 2.35cqi;
  font-weight: 500;
  line-height: 1.2;
  color: #3230e0;
}

.bfv__steps {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bfv__steps li {
  display: flex;
  align-items: center;
  gap: 1.8cqi;
  font-size: 1.72cqi;
  line-height: 1.35;
  color: #7b8494;
}

.bfv__dot {
  flex-shrink: 0;
  width: 5.4cqi;
  height: 5.4cqi;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.bfv__dot svg { width: 2.9cqi; height: 2.9cqi; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.bfv__dot--orange { background: #fff0e1; color: #f28a2e; }
.bfv__dot--pink   { background: #ffe6ec; color: #f2557c; }
.bfv__dot--sky    { background: #e3f3fd; color: #2f9be0; }
.bfv__dot--indigo { background: #e9e8fd; color: #3230e0; }

/* Card B - capacity illustration */
.bfv__card--chart {
  left: 40.8%;
  top: 9.5%;
  width: 55%;
  height: 58%;
  padding: 3.2cqi 3cqi 2.4cqi;
  display: flex;
  flex-direction: column;
  gap: 1.8cqi;
}

.bfv__card--chart .bfv__card-title { color: #101010; font-size: 2.05cqi; }

.bfv__plot {
  position: relative;
  flex: 1;
  border-radius: 1.4cqi;
  background: linear-gradient(180deg, #fbfbfd 0%, #f4f5f9 100%);
  padding: 2.4cqi 2.6cqi 4.4cqi 5cqi;
}

.bfv__axis {
  position: absolute;
  left: 1.4cqi;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-size: 1.2cqi;
  color: #9aa1ad;
  white-space: nowrap;
  width: 0;
  display: flex;
  justify-content: center;
}

.bfv__bars {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  border-left: 1px solid #c9ccd6;
  border-bottom: 1px solid #c9ccd6;
  padding-inline: 1.4cqi;
}

.bfv__bars i {
  position: relative;
  display: block;
  width: 3.8cqi;
  border-radius: 0.6cqi 0.6cqi 0 0;
}

/* Soft upward arrow above each bar */
.bfv__bars i::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 3.8cqi;
  height: 10cqi;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 102, 141, 0.18), rgba(255, 102, 141, 0));
  clip-path: polygon(50% 0, 100% 26%, 72% 26%, 72% 100%, 28% 100%, 28% 26%, 0 26%);
}

.bfv__bars i:nth-child(1) { height: 26%; background: linear-gradient(180deg, #ffab57, #ffc488); }
.bfv__bars i:nth-child(2) { height: 34%; background: linear-gradient(180deg, #ff8a5b, #ffb38b); }
.bfv__bars i:nth-child(3) { height: 56%; background: linear-gradient(180deg, #ff668d, #ff9a86); }
.bfv__bars i:nth-child(4) { height: 72%; background: linear-gradient(180deg, #9a4fd8, #ff6f96); }
.bfv__bars i:nth-child(5) { height: 81%; background: linear-gradient(180deg, #3230e0, #6d52e8); }

.bfv__caption {
  position: absolute;
  left: 5cqi;
  right: 2cqi;
  bottom: 1.3cqi;
  font-size: 1.12cqi;
  color: #9aa1ad;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.bfv__legend {
  display: flex;
  justify-content: space-between;
  gap: 1.6cqi;
  font-size: 1.5cqi;
  font-weight: 500;
  color: #101010;
  white-space: nowrap;
}

.bfv__legend span { display: inline-flex; align-items: center; gap: 0.9cqi; }

.bfv__legend b {
  width: 2.6cqi;
  height: 2.6cqi;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.bfv__legend b svg { width: 1.7cqi; height: 1.7cqi; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* Connector lines between the cards */
.bfv__wire {
  position: absolute;
  border-color: #f28aa4;
  border-style: solid;
  border-width: 0;
}

.bfv__wire--a { left: 12.6%; top: 67.5%; width: 7%; height: 13.5%; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.bfv__wire--b { left: 68%; top: 67.5%; height: 6.6%; border-left-width: 1.5px; border-color: #8fb4f5; }

/* Card C - secure delivery flow */
.bfv__card--flow {
  left: 19.5%;
  top: 74%;
  width: 76%;
  height: 18.5%;
  padding: 0 3cqi;
  display: flex;
  align-items: center;
  gap: 1.4cqi;
}

.bfv__node {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5cqi;
}

.bfv__node-icon {
  width: 7.2cqi;
  height: 7.2cqi;
  display: grid;
  place-items: center;
  border-radius: 1.4cqi;
}

.bfv__node-icon svg { width: 4.2cqi; height: 4.2cqi; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.bfv__node small { font-size: 1.05cqi; color: #9aa1ad; white-space: nowrap; }

.bfv__node--cloud .bfv__node-icon { background: linear-gradient(160deg, #ffe0e8, #ffc2d1); color: #e8557c; }
.bfv__node--doc   .bfv__node-icon { background: linear-gradient(160deg, #fff1e3, #ffe0c6); color: #d9803b; }
.bfv__node--doc2  .bfv__node-icon { background: linear-gradient(160deg, #ffe9ee, #ffd6df); color: #e8557c; }
.bfv__node--review .bfv__node-icon {
  width: 11cqi;
  border: 0.35cqi solid #3230e0;
  background: #3230e0;
  color: #ffffff;
  box-shadow: inset 0 0 0 0.35cqi #ffffff;
  font-size: 1.55cqi;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.bfv__dots { flex: 1; min-width: 1.6cqi; border-top: 0.3cqi dotted #b8bfd0; }
.bfv__swap { flex-shrink: 0; font-size: 1.9cqi; color: #f28aa4; line-height: 1; }

.bfv__flow-text {
  flex: 0 1 25cqi;
  margin: 0 0 0 1cqi;
  font-size: 1.75cqi;
  font-weight: 500;
  line-height: 1.3;
  color: #3230e0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .bf-hero__title { font-size: 42px; }
  .bf-hero__lead,
  .bf-hero__trust-label { width: 92%; }
}

@media (max-width: 1024px) {
  .bf-hero { padding-top: calc(var(--sh-h, 72px) + 40px); }
  .bf-hero__inner { flex-direction: column; align-items: stretch; gap: 8px; }
  .bf-hero__copy,
  .bf-hero__visual { flex-basis: auto; max-width: 100%; }
  .bf-hero__visual { justify-content: center; }
  .bf-hero__title { font-size: 36px; line-height: 1.25em; }
  .bf-hero__lead,
  .bf-hero__trust-label { width: 100%; }
  .bf-hero__creds { row-gap: 18px; }
}

@media (max-width: 640px) {
  .bf-hero { padding-inline: 16px; }
  /* The arcs are scaled up to fill a tall, narrow screen; soften them so
     they don't compete with the headline. */
  .bf-hero__bg svg { opacity: 0.55; }
  .bf-hero__title { font-size: 28px; }
  .bf-hero__creds li { flex-basis: 50%; }
}

/* ---------- Globe column ----------
   The founder photo at the centre of a dotted globe with a pin per country,
   a "CPA + CA Founder" pill on the photo's top edge and the former firms in
   one segmented pill on its bottom edge. */
.bf-hero__media {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  justify-content: flex-end;
}

.bf-globe {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1;
}

.bf-globe__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bf-globe__pins {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bf-globe__pin {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 6px;
  border: 1px solid #e6e3f0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 24px -12px rgba(22, 18, 58, 0.35);
  font-family: "Noto Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: #230d4f;
  white-space: nowrap;
}

.bf-globe__pin svg {
  flex-shrink: 0;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.bf-globe__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 8px;
  height: 8px;
  margin: 6px 0 0 -4px;
  border-radius: 50%;
  background: #3230e0;
  box-shadow: 0 0 0 4px rgba(50, 48, 224, 0.18);
}

.bf-globe__portrait {
  position: absolute;
  z-index: 1;
  left: 51%;
  top: 47%;
  width: 45%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.bf-globe__photo {
  display: block;
  aspect-ratio: 4 / 4.8;
  overflow: hidden;
  border: 6px solid #ffffff;
  border-radius: 24px;
  background: #ece8f4;
  box-shadow: 0 30px 60px -24px rgba(35, 13, 79, 0.45);
}

.bf-globe__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Credentials on the photo's edges: the founder pill across the top edge and
   one segmented pill of former firms across the bottom edge. */
.bf-globe__founder {
  position: absolute;
  z-index: 2;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #ffab57;
  border-radius: 999px;
  background: #230d4f;
  box-shadow: 0 14px 28px -14px rgba(35, 13, 79, 0.6);
  font-family: "Noto Sans", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffab57;
  white-space: nowrap;
}

.bf-globe__founder svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.bf-globe__alumni {
  position: absolute;
  z-index: 2;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #e2e0e8;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 16px 32px -14px rgba(22, 18, 58, 0.35);
}

.bf-globe__alumni li {
  padding: 9px 16px;
  font-family: "Noto Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #230d4f;
  white-space: nowrap;
}

.bf-globe__alumni li + li { border-left: 1px solid #e2e0e8; }

@media (max-width: 1024px) {
  /* Stacked layout (tablet and phone): the globe and photo come first, then the text */
  .bf-hero__media { order: -1; flex-basis: auto; max-width: 100%; justify-content: center; }
  .bf-globe { max-width: 600px; margin-bottom: 24px; }
}

@media (max-width: 640px) {
  .bf-hero { padding-bottom: 60px; }
  .bf-globe__pin { gap: 5px; padding: 3px 8px 3px 4px; font-size: 11px; }
  .bf-globe__pin svg { width: 18px; height: 12px; }
  .bf-globe__portrait { width: 52%; }
  .bf-globe__founder { top: 8px; gap: 4px; padding: 4px 9px; font-size: 0.625rem; }
  .bf-globe__founder svg { width: 10px; height: 10px; }
  .bf-globe__alumni { bottom: -15px; }
  .bf-globe__alumni li { padding: 5px 8px; font-size: 0.625rem; }
  /* Keep the edge pins clear of the photo on a phone-width globe. */
  .bf-globe__pin--ca { left: 20% !important; top: 8% !important; }
  .bf-globe__pin--us { left: 12% !important; top: 40% !important; }
  .bf-globe__pin--in { left: 91% !important; top: 57% !important; }
  .bf-globe__pin--au { left: 84% !important; top: 86% !important; }
}