/*
 * CodeClimb top FV — ZOROYA FV 10 / ERASER
 * Approved mock transplant, scoped to .cc-page-home .cc-fv10.
 */
.cc-page-home .cc-fv10 {
  --cc-fv10-blue: #208cba;
  --cc-fv10-blue-deep: #0b5f86;
  --cc-fv10-ink: #10202a;
  --cc-fv10-muted: #304c59;
  --cc-fv10-radius: 210px;
  --cc-fv10-x: 37%;
  --cc-fv10-y: 48%;
  min-height: max(674px, calc(100svh - 106px));
  display: block;
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--cc-fv10-ink);
  background: #edf6f9;
}

.cc-page-home .cc-fv10,
.cc-page-home .cc-fv10 * {
  box-sizing: border-box;
}

.cc-page-home .cc-fv10__layer,
.cc-page-home .cc-fv10__photo,
.cc-page-home .cc-fv10__wash {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.cc-page-home .cc-fv10__layer {
  overflow: hidden;
}

.cc-page-home .cc-fv10__photo {
  display: block;
  max-width: none;
  object-fit: cover;
  object-position: 62% center;
}

.cc-page-home .cc-fv10__shell {
  width: min(1320px, calc(100% - 72px));
  min-height: max(674px, calc(100svh - 106px));
  display: flex;
  align-items: center;
  position: relative;
  margin-inline: auto;
  padding: 54px 0 72px;
}

.cc-page-home .cc-fv10__copy {
  width: min(720px, 59%);
  position: relative;
}

.cc-page-home .cc-fv10__chip {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 25px;
  color: var(--cc-fv10-blue-deep);
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.cc-page-home .cc-fv10__chip::before {
  width: 34px;
  height: 1px;
  content: "";
  flex: 0 0 auto;
  background: currentColor;
}

.cc-page-home .cc-fv10__title {
  max-width: 760px;
  block-size: 2.56em;
  margin: 0;
  color: var(--cc-fv10-ink);
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: clamp(46px, 5.4vw, 78px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.055em;
  text-wrap: balance;
  word-break: auto-phrase;
}

.cc-page-home .cc-fv10__title > span {
  display: block;
  white-space: nowrap;
}

.cc-page-home .cc-fv10__title em {
  position: relative;
  z-index: 0;
  color: var(--cc-fv10-blue-deep);
  font-style: normal;
  white-space: nowrap;
}

.cc-page-home .cc-fv10__title em::after {
  height: 8px;
  content: "";
  position: absolute;
  z-index: -1;
  right: -3px;
  bottom: 7px;
  left: -3px;
  background: rgba(32, 140, 186, .18);
}

.cc-page-home .cc-fv10__lead {
  max-width: 650px;
  min-height: 5.7em;
  margin: 28px 0 0;
  color: var(--cc-fv10-muted);
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.9;
  text-wrap: pretty;
  word-break: auto-phrase;
}

.cc-page-home .cc-fv10__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 31px;
}

.cc-page-home .cc-fv10__button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 22px;
  border: 1px solid var(--cc-fv10-blue);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(18, 78, 101, .12);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.cc-page-home .cc-fv10__button--primary {
  min-width: 214px;
  color: #fff;
  background: var(--cc-fv10-blue-deep);
}

.cc-page-home .cc-fv10__button--secondary {
  color: var(--cc-fv10-blue-deep);
  background: rgba(255, 255, 255, .78);
  border-color: #aacbd8;
}

.cc-page-home .cc-fv10__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(18, 78, 101, .18);
}

.cc-page-home .cc-fv10__button--primary:hover,
.cc-page-home .cc-fv10__button--primary:focus-visible {
  color: #fff;
  background-color: var(--cc-fv10-blue-deep);
}

.cc-page-home .cc-fv10__button--secondary:hover,
.cc-page-home .cc-fv10__button--secondary:focus-visible {
  color: var(--cc-fv10-blue-deep);
  background-color: #fff;
}

.cc-page-home .cc-fv10__button:focus-visible {
  outline: 3px solid #0b6f9b;
  outline-offset: 4px;
}

.cc-page-home .cc-fv10__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 23px 0 0;
  padding: 0;
  color: #3e5c69;
  font-size: 11px;
  font-weight: 700;
  list-style: none;
}

.cc-page-home .cc-fv10__trust li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
}

.cc-page-home .cc-fv10__trust li::before {
  width: 5px;
  height: 5px;
  content: "";
  flex: 0 0 auto;
  background: var(--cc-fv10-blue);
  border-radius: 50%;
}

/* The base layer must not form a stacking context: its CTAs sit above the lens. */
.cc-page-home .cc-fv10__base {
  z-index: auto;
}

.cc-page-home .cc-fv10__base .cc-fv10__photo {
  filter: saturate(.86) brightness(1.08) contrast(.9);
}

.cc-page-home .cc-fv10__base .cc-fv10__wash {
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 36%, rgba(255,255,255,.48) 58%, rgba(255,255,255,.02) 82%);
}

.cc-page-home .cc-fv10__base .cc-fv10__actions {
  position: relative;
  z-index: 9;
  pointer-events: auto;
}

.cc-page-home .cc-fv10__top {
  z-index: 4;
  clip-path: circle(0 at var(--cc-fv10-x) var(--cc-fv10-y));
  pointer-events: none;
}

.cc-page-home .cc-fv10.is-ready .cc-fv10__top {
  clip-path: circle(var(--cc-fv10-radius) at var(--cc-fv10-x) var(--cc-fv10-y));
}

.cc-page-home .cc-fv10__top .cc-fv10__photo {
  filter: grayscale(.92) saturate(.22) brightness(1.19) contrast(.82);
}

.cc-page-home .cc-fv10__top .cc-fv10__wash {
  background:
    linear-gradient(90deg, rgba(223,243,249,.96), rgba(240,249,252,.78) 62%, rgba(255,255,255,.3)),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(32,140,186,.08) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(32,140,186,.08) 39px 40px);
}

.cc-page-home .cc-fv10__top .cc-fv10__title {
  color: #17485d;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 800;
}

.cc-page-home .cc-fv10__top .cc-fv10__chip {
  color: #14759c;
}

.cc-page-home .cc-fv10__top .cc-fv10__lead {
  color: #335d6e;
}

.cc-page-home .cc-fv10__layout-spacer {
  visibility: hidden;
}

.cc-page-home .cc-fv10__ring {
  width: calc(var(--cc-fv10-radius) * 2);
  height: calc(var(--cc-fv10-radius) * 2);
  display: none;
  position: absolute;
  z-index: 7;
  top: var(--cc-fv10-y);
  left: var(--cc-fv10-x);
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(32,140,186,.35), 0 20px 60px rgba(10,75,99,.14);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cc-page-home .cc-fv10.is-ready .cc-fv10__ring {
  display: block;
}

.cc-page-home .cc-fv10__hint {
  position: absolute;
  z-index: 20;
  right: 22px;
  bottom: 20px;
  margin: 0;
  padding: 10px 13px;
  color: #214c5e;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(32,140,186,.24);
  border-radius: 3px;
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .08em;
  backdrop-filter: blur(10px);
}

@media (max-width: 960px) {
  .cc-page-home .cc-fv10__shell {
    width: calc(100% - 48px);
  }

  .cc-page-home .cc-fv10__copy {
    width: min(720px, 70%);
  }

  .cc-page-home .cc-fv10__title {
    font-size: clamp(42px, 6.6vw, 64px);
  }
}

@media (max-width: 640px) {
  .cc-page-home .cc-fv10 {
    --cc-fv10-radius: 135px;
    --cc-fv10-x: 48%;
    --cc-fv10-y: 25%;
    min-height: max(806px, calc(100svh - 94px));
  }

  .cc-page-home .cc-fv10__shell {
    width: calc(100% - 34px);
    min-height: max(806px, calc(100svh - 94px));
    align-items: flex-start;
    padding: 50px 0 100px;
  }

  .cc-page-home .cc-fv10__copy {
    width: 100%;
  }

  .cc-page-home .cc-fv10__chip {
    margin-bottom: 20px;
    font-size: 9px;
  }

  .cc-page-home .cc-fv10__title {
    block-size: 2.84em;
    font-size: clamp(32px, 9.2vw, 40px);
    line-height: 1.42;
    letter-spacing: -.045em;
  }

  .cc-page-home .cc-fv10__lead {
    max-width: 94%;
    min-height: 7.28em;
    margin-top: 21px;
    font-size: 14px;
    line-height: 1.82;
  }

  .cc-page-home .cc-fv10__actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 25px;
  }

  .cc-page-home .cc-fv10__button {
    width: 100%;
  }

  .cc-page-home .cc-fv10__trust {
    display: grid;
    gap: 7px;
  }

  .cc-page-home .cc-fv10__photo {
    object-position: 66% center;
  }

  .cc-page-home .cc-fv10__base .cc-fv10__wash {
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 56%, rgba(255,255,255,.24) 88%);
  }

  .cc-page-home .cc-fv10__hint {
    right: 17px;
    bottom: 17px;
    left: 17px;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .cc-page-home .cc-fv10__title {
    font-size: clamp(28px, 8.21vw, 32px);
  }
}

@media (hover: none) {
  .cc-page-home .cc-fv10__button {
    min-height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-page-home .cc-fv10 {
    --cc-fv10-radius: 180px;
  }

  .cc-page-home .cc-fv10.is-ready .cc-fv10__top {
    clip-path: circle(180px at 38% 48%);
  }

  .cc-page-home .cc-fv10.is-ready .cc-fv10__ring {
    width: 360px;
    height: 360px;
    top: 48%;
    left: 38%;
  }

  .cc-page-home .cc-fv10__button {
    transition: none;
  }
}