/*
 * Kane's Observations — silver storefront homepage presentation
 * Presentation-only: the existing carousel DOM, ordering and controller remain unchanged.
 */

.homepage-main {
  display: block !important;
  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  color: #171819;
  background: #f4f0e9;
}

.collector-carousel {
  height: clamp(300px, 20.62vw, 379px) !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  border-bottom: 1px solid rgba(191, 198, 204, .28) !important;
  background:
    radial-gradient(circle at 77% 50%, rgba(81, 101, 121, .16), transparent 30%),
    linear-gradient(100deg, #050607 0%, #0c0f12 54%, #050607 100%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 22px 50px rgba(8, 10, 12, .18);
}

.collector-carousel::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 2, 3, .98) 0%, rgba(3, 5, 7, .9) 34%, rgba(3, 5, 7, .32) 59%, rgba(1, 2, 3, .1) 100%),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(255, 255, 255, .012) 120px);
}

.collector-carousel .collector-hero,
.collector-carousel .collector-hero--cards,
.collector-carousel .collector-hero--statues {
  background: transparent !important;
}

.collector-carousel .collector-hero::after {
  content: none !important;
}

.collector-carousel .collector-hero--statues::after { content: none !important; }

.collector-hero__inner {
  width: min(100%, 1510px) !important;
  padding: 25px clamp(66px, 6vw, 112px) !important;
}

.collector-hero__content {
  width: min(47%, 610px) !important;
  min-width: 500px !important;
}

.collector-hero__launch {
  margin-bottom: 12px !important;
  color: #7898b6 !important;
  font: 700 clamp(10px, .78vw, 12px)/1.25 Arial, Helvetica, sans-serif !important;
  letter-spacing: .2em !important;
}

.collector-hero__title,
.collector-hero--statues .collector-hero__title {
  color: #f5f2ec !important;
  font-family: "Arial Narrow", "Roboto Condensed", Arial, Helvetica, sans-serif !important;
  font-size: clamp(30px, 3.05vw, 48px) !important;
  font-weight: 800 !important;
  line-height: .98 !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .9) !important;
}

.collector-hero__title .collector-hero__title-gold {
  color: #b8c0c8 !important;
  background: linear-gradient(180deg, #fafafa 5%, #bcc2c7 47%, #747b81 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.collector-hero__copy,
.collector-hero--statues .collector-hero__copy {
  max-width: 555px !important;
  margin-top: 16px !important;
  color: #d5d4d1 !important;
  font-size: clamp(13px, 1.02vw, 17px) !important;
  line-height: 1.48 !important;
  letter-spacing: .005em !important;
}

.collector-hero__actions,
.collector-hero--statues .collector-hero__actions {
  gap: 12px 16px !important;
  margin-top: 23px !important;
}

.collector-hero__button {
  min-height: 45px !important;
  padding: 12px 25px !important;
  border: 1px solid #73899d !important;
  border-radius: 3px !important;
  color: #f7f4ee !important;
  background: rgba(5, 7, 9, .72) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  letter-spacing: 1.35px !important;
}

.collector-hero__button--primary {
  border-color: #5e7e9b !important;
  color: #fff !important;
  background: linear-gradient(135deg, #4b6c8a, #263f55) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 10px 28px rgba(0, 0, 0, .24) !important;
}

.collector-hero__button:hover,
.collector-hero__button:focus-visible {
  border-color: #cbd2d8 !important;
  color: #fff !important;
  background: #202b35 !important;
  outline: 2px solid rgba(210, 221, 230, .8) !important;
  outline-offset: 3px;
}

.collector-hero__statue-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .72)) saturate(.92) contrast(1.04) !important;
}

.collector-carousel__control {
  color: #d8dde1 !important;
  background: linear-gradient(90deg, rgba(2, 3, 4, .78), rgba(2, 3, 4, .1)) !important;
}
.collector-carousel__control--next {
  background: linear-gradient(270deg, rgba(2, 3, 4, .78), rgba(2, 3, 4, .1)) !important;
}
.collector-carousel__control::before {
  background: linear-gradient(180deg, transparent, rgba(205, 214, 222, .72), transparent) !important;
}
.collector-carousel__control:hover,
.collector-carousel__control:focus-visible {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(52, 71, 87, .82), rgba(6, 8, 10, .1)) !important;
}
.collector-carousel__control--next:hover,
.collector-carousel__control--next:focus-visible {
  background: linear-gradient(270deg, rgba(52, 71, 87, .82), rgba(6, 8, 10, .1)) !important;
}

.trust-strip {
  color: #17191b !important;
  background: #eee8df !important;
  border-color: rgba(27, 31, 34, .12) !important;
  box-shadow: 0 10px 32px rgba(21, 23, 25, .12) !important;
}
.trust-strip::before {
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent) !important;
}
.trust-strip__inner { max-width: 1420px !important; }
.trust-benefit { border-color: rgba(21, 24, 26, .12) !important; }
.trust-benefit__title { color: #16181a !important; }
.trust-benefit__description { color: #55595d !important; }
.trust-icon { color: #16181a !important; border-color: #16181a !important; }

.brand-mission {
  position: relative;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: clamp(58px, 7vw, 96px) 34px clamp(66px, 8vw, 110px) !important;
  text-align: center !important;
}
.brand-mission::before {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  margin: 0 auto 25px;
  background: linear-gradient(90deg, #7898b6, #2e4f6b);
}
.brand-mission h2 {
  max-width: 780px;
  margin: 0 auto 21px !important;
  color: #17191b !important;
  font-family: "Arial Narrow", "Roboto Condensed", Arial, Helvetica, sans-serif !important;
  font-size: clamp(30px, 4vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  text-transform: uppercase;
}
.brand-mission p {
  max-width: 800px !important;
  color: #46494c !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}
.brand-mission a {
  min-height: 45px;
  margin-top: 6px;
  padding: 14px 26px !important;
  border: 1px solid #456b8b;
  border-radius: 3px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #4f7392, #29475f) !important;
  box-shadow: 0 10px 24px rgba(33, 51, 67, .18);
  letter-spacing: 1px !important;
}
.brand-mission a:hover,
.brand-mission a:focus-visible {
  background: #1d3448 !important;
  outline: 2px solid #526f86;
  outline-offset: 3px;
}

body > footer {
  border-top: 1px solid rgba(255, 255, 255, .09) !important;
  background: #111315 !important;
}

@media (max-width: 1100px) {
  .collector-hero__inner { padding-inline: 54px !important; }
  .collector-hero__content { width: 54% !important; min-width: 430px !important; }
}

@media (max-width: 768px) {
  .collector-carousel {
    height: clamp(560px, 174.36vw, 680px) !important;
    background:
      radial-gradient(circle at 50% 72%, rgba(78, 101, 122, .18), transparent 38%),
      linear-gradient(180deg, #050607 0%, #0b0e11 100%) !important;
  }
  .collector-carousel::before {
    background: linear-gradient(180deg, rgba(2, 3, 4, .96) 0%, rgba(2, 3, 4, .7) 42%, rgba(2, 3, 4, .08) 72%) !important;
  }
  .collector-carousel .collector-hero::after {
    top: 45%;
    right: 7%;
    width: 86%;
    height: 48%;
  }
  .collector-hero__inner {
    align-items: flex-start !important;
    padding: 25px 22px 0 !important;
  }
  .collector-hero__content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 520px !important;
  }
  .collector-hero__title,
  .collector-hero--statues .collector-hero__title {
    max-width: 350px;
    font-size: clamp(25px, 8vw, 34px) !important;
  }
  .collector-hero__copy,
  .collector-hero--statues .collector-hero__copy {
    max-width: min(92%, 470px) !important;
    margin-top: 11px !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
  }
  .collector-hero__actions,
  .collector-hero--statues .collector-hero__actions {
    max-width: 390px;
    margin-top: 14px !important;
  }
  .collector-hero__button {
    flex: 1 1 165px !important;
    min-height: 40px !important;
    padding: 9px 11px !important;
    font-size: 9px !important;
  }
  .collector-hero__statue-art img {
    object-fit: contain !important;
    object-position: center bottom !important;
  }
  .collector-carousel__control { top: 65% !important; }
  .trust-strip__inner { padding-block: 5px !important; }
  .trust-benefit { min-height: 62px !important; }
  .brand-mission { padding: 58px 22px 72px !important; }
  .brand-mission h2 { font-size: clamp(29px, 10vw, 42px) !important; }
  .brand-mission p { font-size: 15px !important; }
}

@media (max-width: 480px) {
  .collector-hero__inner { padding-inline: 19px !important; }
  .collector-hero__actions { max-width: 296px; }
  .collector-hero__button { flex-basis: 100% !important; }
  .collector-carousel__control { top: 64% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .collector-carousel *, .brand-mission * { scroll-behavior: auto !important; }
}