/* Copia V2 homepage-specific components.
   Base design system lives in site-v2.css. No framework dependencies. */

.home-hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 22px;
  color: var(--muted, #657484);
  font-size: .92rem;
}

.home-hero-note span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.home-hero-note span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-500, #2586cf);
  flex: 0 0 auto;
}

/* Animated proof statistics */
.proof-bar {
  position: relative;
  padding: 38px 0 42px;
  overflow: hidden;
  border-top: 1px solid #d8e7f2;
  border-bottom: 1px solid #cbddea;
  background:
    radial-gradient(circle at 12% 20%, rgba(37, 134, 207, .16), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(101, 84, 164, .12), transparent 28%),
    linear-gradient(135deg, #eef7fd 0%, #f7fbfe 52%, #f2f4fb 100%);
}

.proof-bar::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37, 134, 207, .45), transparent);
}

.proof-bar__grid--cards {
  position: relative;
  z-index: 1;
  gap: 18px;
}

.proof-stat--card {
  position: relative;
  min-width: 0;
  min-height: 220px;
  padding: 26px 24px 24px;
  overflow: hidden;
  border: 1px solid rgba(24, 90, 145, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow:
    0 18px 36px rgba(16, 42, 67, .09),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(5px);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2, .75, .3, 1),
    box-shadow .2s ease,
    border-color .2s ease;
}

.proof-stat--card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, #185a91, #2586cf);
}

.proof-stat--card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -54px;
  bottom: -58px;
  border-radius: 50%;
  background: rgba(37, 134, 207, .055);
  pointer-events: none;
}

.proof-stat--card:nth-child(2)::before {
  background: linear-gradient(90deg, #2586cf, #4f9ed8);
}

.proof-stat--card:nth-child(3)::before {
  background: linear-gradient(90deg, #4d77a8, #6554a4);
}

.proof-stat--card:nth-child(4)::before {
  background: linear-gradient(90deg, #6554a4, #7a6ab5);
}

.proof-stat--card:first-child {
  padding-left: 24px;
}

.proof-stat--card:last-child {
  border-right: 1px solid rgba(24, 90, 145, .16);
}

.has-proof-animation .proof-stat--card {
  opacity: 0;
  transform: translateY(22px) scale(.985);
}

.has-proof-animation .proof-bar.is-visible .proof-stat--card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.has-proof-animation .proof-bar.is-visible .proof-stat--card:nth-child(1) { transition-delay: 0ms; }
.has-proof-animation .proof-bar.is-visible .proof-stat--card:nth-child(2) { transition-delay: 90ms; }
.has-proof-animation .proof-bar.is-visible .proof-stat--card:nth-child(3) { transition-delay: 180ms; }
.has-proof-animation .proof-bar.is-visible .proof-stat--card:nth-child(4) { transition-delay: 270ms; }

.proof-bar.is-visible .proof-stat--card:hover,
.proof-stat--card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(24, 90, 145, .3);
  box-shadow:
    0 24px 50px rgba(16, 42, 67, .15),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

.proof-stat__icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, #185a91, #2586cf);
  box-shadow: 0 10px 20px rgba(24, 90, 145, .22);
}

.proof-stat--card:nth-child(2) .proof-stat__icon {
  background: linear-gradient(145deg, #2586cf, #4f9ed8);
}

.proof-stat--card:nth-child(3) .proof-stat__icon {
  background: linear-gradient(145deg, #4d77a8, #6554a4);
}

.proof-stat--card:nth-child(4) .proof-stat__icon {
  background: linear-gradient(145deg, #6554a4, #7a6ab5);
}

.proof-stat__icon svg {
  width: 27px;
  height: 27px;
}

.proof-stat__value {
  display: flex;
  align-items: baseline;
  gap: 1px;
  margin-bottom: 8px;
  color: #102a43;
  font-size: clamp(2.45rem, 3.8vw, 3.25rem);
  font-weight: 850;
  line-height: .94;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

.proof-stat__value .countup,
.proof-stat__value .proof-stat__range-start,
.proof-stat__value .proof-stat__suffix {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.proof-stat__suffix {
  color: #2586cf !important;
}

.proof-stat__label {
  margin-bottom: 6px;
  color: #17324d;
  font-size: 1.03rem;
  font-weight: 800;
  line-height: 1.25;
}

.proof-stat__meta {
  display: block;
  max-width: 220px;
  color: #65788a;
  font-size: .84rem;
  line-height: 1.45;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.problem-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 26px;
  border: 1px solid var(--border, #dfe6ec);
  border-radius: 14px;
  background: #fff;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.problem-card:hover {
  transform: translateY(-2px);
  border-color: #b8cfdf;
  box-shadow: 0 12px 30px rgba(21, 54, 78, .08);
}

.problem-card__kicker {
  color: var(--blue-700, #185a91);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.problem-card h3 {
  margin: 8px 0 9px;
}

.problem-card p {
  margin-bottom: 18px;
}

.problem-card .card__link {
  margin-top: auto;
}

.inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
  padding: 24px 26px;
  border: 1px solid #d7e3ec;
  border-radius: 14px;
  background: #f8fbfd;
}

.inline-cta strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink, #17232f);
  font-size: 1.04rem;
}

.inline-cta p {
  margin: 0;
  color: var(--muted, #657484);
  font-size: .94rem;
}

.inline-cta__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.customer-proof {
  padding: 54px 0;
  border-top: 1px solid var(--border, #dfe6ec);
  border-bottom: 1px solid var(--border, #dfe6ec);
  background: #fff;
}

.customer-proof__inner {
  text-align: center;
}

.customer-proof h2 {
  margin-bottom: 8px;
  font-size: clamp(1.55rem, 2vw, 2.1rem);
}

.customer-proof p {
  max-width: 700px;
  margin: 0 auto 25px;
  color: var(--muted, #657484);
}

.customer-proof img {
  max-width: min(100%, 920px);
  margin-inline: auto;
}

.solution-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 34px;
  align-items: center;
  margin-top: 34px;
  padding: 30px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(120deg, #102a43, #185a91);
}

.solution-bridge h3,
.solution-bridge p {
  color: #fff;
}

.solution-bridge h3 {
  margin-bottom: 7px;
}

.solution-bridge p {
  margin: 0;
  opacity: .86;
}

.solution-bridge__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* The two decisions in the flexible deployment callout have distinct visual forms. */
.flexibility-map {
  overflow: hidden;
}

.flexibility-map > p {
  max-width: 48ch;
}

.flexibility-group {
  margin-top: 26px;
}

.flexibility-group--connections {
  padding-top: 24px;
  border-top: 1px solid #d6e4ed;
}

.flexibility-group__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.flexibility-group__step {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #176b9e;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.flexibility-group--connections .flexibility-group__step {
  background: #59729b;
}

.flexibility-group__head h4 {
  margin: 0;
  color: #172f43;
  font-size: 1rem;
  line-height: 1.25;
}

.flexibility-group__head p {
  margin: 2px 0 0;
  color: #52687b;
  font-size: .86rem;
  line-height: 1.4;
}

.deployment-grid,
.comparison-list {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.deployment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #b7d5e8;
  border-radius: 11px;
  background: #edf7fc;
}

.deployment-item {
  min-width: 0;
  padding: 16px 14px;
}

.deployment-item + .deployment-item {
  border-left: 1px solid #b7d5e8;
}

.deployment-item strong,
.comparison-item strong {
  display: block;
  color: #17344a;
  font-size: .9rem;
  line-height: 1.3;
}

.deployment-item span,
.comparison-item span {
  display: block;
  margin-top: 4px;
  color: #4d6273;
  font-size: .82rem;
  line-height: 1.4;
}

.comparison-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}

.comparison-item {
  position: relative;
  min-width: 0;
  padding: 12px 0 12px 16px;
  border-top: 1px solid #dce6ed;
}

.comparison-item::before {
  position: absolute;
  top: 19px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #59729b;
  content: "";
}

@media (max-width: 680px) {
  .deployment-grid {
    grid-template-columns: 1fr;
  }

  .deployment-item {
    padding: 12px 16px;
  }

  .deployment-item + .deployment-item {
    border-top: 1px solid #b7d5e8;
    border-left: 0;
  }

  .comparison-list {
    grid-template-columns: 1fr;
  }

  .comparison-item {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .comparison-item::before {
    top: 17px;
  }
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.resource-card {
  padding: 24px;
  border-radius: 12px;
  background: var(--surface-alt, #f6f8fa);
  border: 1px solid var(--border, #dfe6ec);
}

.resource-card h3 {
  margin: 8px 0 8px;
  font-size: 1.12rem;
}

.resource-card p {
  margin-bottom: 14px;
  color: var(--muted, #657484);
  font-size: .92rem;
}

.faq-list {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--border, #dfe6ec);
}

.faq-list details {
  border-bottom: 1px solid var(--border, #dfe6ec);
  padding: 0;
}

.faq-list summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 20px 46px 20px 0;
  color: var(--ink, #17232f);
  font-weight: 700;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 16px;
  color: var(--blue-700, #185a91);
  font-size: 1.5rem;
  font-weight: 400;
}

.faq-list details[open] summary::after {
  content: "–";
}

.faq-list details p {
  max-width: 760px;
  padding: 0 0 20px;
  margin: 0;
  color: var(--muted, #657484);
}

.final-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}

.final-contact__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.final-contact__phone {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.final-contact__phone:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .proof-bar__grid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .problem-grid,
  .resource-grid {
    grid-template-columns: 1fr 1fr;
  }

  .solution-bridge,
  .final-contact {
    grid-template-columns: 1fr;
  }

  .solution-bridge__actions,
  .final-contact__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .proof-bar__grid--cards,
  .problem-grid,
  .resource-grid,
  .deployment-grid,
  .comparison-list {
    grid-template-columns: 1fr;
  }

  .proof-bar {
    padding-top: 24px;
  }

  .proof-stat--card {
    min-height: 0;
    padding: 24px;
  }

  .proof-stat__value {
    font-size: 2.55rem;
  }

  .inline-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .inline-cta__actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .inline-cta__actions .btn {
    flex: 1 1 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-proof-animation .proof-stat--card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Staging V2 brand and mobile refinements.
   Appended to home-v2.css during the stage deployment. */

/* Use the new vector Copia marks throughout the V2 homepage without
   disturbing legacy pages that still reference the older GIF assets. */
.site-brand img {
  content: url("/graphx/copia_logo.svg");
  width: 178px;
  max-height: 36px;
}

.site-footer__brand img {
  content: url("/graphx/copia_logo_reverse.svg");
  width: 178px;
  max-height: 36px;
  filter: none;
}

@media (max-width: 680px) {
  .proof-bar {
    padding: 14px 0 18px;
  }

  .proof-bar__grid--cards {
    gap: 10px;
  }

  .proof-stat--card,
  .proof-stat--card:first-child {
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border-radius: 13px;
    box-shadow: 0 8px 18px rgba(16, 42, 67, .075);
  }

  .proof-stat--card::before {
    height: 4px;
  }

  .proof-stat--card::after {
    width: 64px;
    height: 64px;
    right: -31px;
    bottom: -33px;
  }

  .proof-stat__icon {
    position: static;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 11px;
    box-shadow: 0 6px 13px rgba(24, 90, 145, .17);
    transform: none;
  }

  .proof-stat__icon svg {
    width: 20px;
    height: 20px;
  }

  .proof-stat__content {
    min-width: 0;
    flex: 1 1 auto;
  }

  .proof-stat__value {
    width: auto;
    min-width: 0;
    margin: 0 0 4px;
    padding: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    font-size: 1.72rem;
    line-height: .95;
    white-space: nowrap;
  }

  .proof-stat__value .countup,
  .proof-stat__value .proof-stat__range-start,
  .proof-stat__value .proof-stat__suffix {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }

  .proof-stat__label {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #17324d;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.17;
  }

  .proof-stat__meta {
    display: none;
  }

  /* Longer values get a small mobile-only reduction so all four cards
     retain the same visual weight without wrapping. */
  .proof-stat--card:nth-child(3) .proof-stat__value {
    font-size: 1.48rem;
  }

  .proof-stat--card:nth-child(4) .proof-stat__value {
    font-size: 1.58rem;
  }

  .proof-bar.is-visible .proof-stat--card:hover,
  .proof-stat--card:hover {
    transform: none;
  }

  .has-proof-animation .proof-stat--card {
    transform: translateY(14px);
  }

  .has-proof-animation .proof-bar.is-visible .proof-stat--card {
    transform: translateY(0);
  }
}

@media (max-width: 420px) {
  .proof-bar {
    padding: 11px 0 15px;
  }

  .proof-bar__grid--cards {
    gap: 8px;
  }

  .proof-stat--card,
  .proof-stat--card:first-child {
    gap: 12px;
    padding: 13px 14px;
  }

  .proof-stat__icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .proof-stat__icon svg {
    width: 18px;
    height: 18px;
  }

  .proof-stat__value {
    font-size: 1.58rem;
  }

  .proof-stat__label {
    font-size: .84rem;
  }

  .proof-stat--card:nth-child(3) .proof-stat__value {
    font-size: 1.34rem;
  }

  .proof-stat--card:nth-child(4) .proof-stat__value {
    font-size: 1.45rem;
  }
}