@import url("policy.css");

.wholesale-wrap { width: min(1120px, 92%); }
.hero-shell {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 7vw, 76px);
  border: 1px solid #204b70;
  border-radius: 12px;
  background:
    linear-gradient(120deg, #101a27 0%, #08121d 55%, #063866 130%);
  box-shadow: 0 30px 90px #0009;
}
.hero-shell::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -170px;
  top: -190px;
  border: 74px solid #087ee826;
  border-radius: 50%;
}
.hero-shell > * { position: relative; z-index: 1; }
.hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero-shell h1 { max-width: 900px; }
.hero-shell .lead { max-width: 720px; font-size: 1.12rem; }
.hero-product {
  position: relative;
  display: block;
  isolation: isolate;
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid #3c80b45c;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 66%, #168ee43b 0, transparent 56%),
    linear-gradient(145deg, #14314a8c, #050b12a6);
  box-shadow: inset 0 1px #ffffff14, 0 24px 60px #0008;
}
.hero-product::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 20% 12% 9%;
  border-radius: 50%;
  background: #0788ef2e;
  filter: blur(28px);
}
.hero-product img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 18px #0009);
}
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 34px;
}
.metric {
  min-height: 118px;
  padding: 20px;
  border: 1px solid #28405a;
  border-radius: 8px;
  background: #050b12b8;
}
.metric strong { display: block; color: #fff; font-size: 1.45rem; }
.metric span { color: #9eafc1; }
.section-title { margin-top: 62px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.feature-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(145deg, #101722, #080c12);
}
.feature-card h2 { margin-top: 0; }
.checklist { list-style: none; padding: 0; margin: 18px 0 0; }
.checklist li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid #1b2938; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: #58aaf4; font-weight: 800; }
.process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 56px;
}
.step { padding: 24px; border-left: 2px solid var(--blue); background: #091019; }
.step-number { color: #58aaf4; font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.step h3 { margin: 8px 0 6px; font-size: 1.12rem; }
.step p { margin: 0; }
.quote-panel {
  padding: clamp(28px, 5vw, 52px);
  text-align: center;
  border: 1px solid #257fc0;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 0, #0b3c67, #08111c 62%);
}
.quote-panel h2 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 3.2rem); }
.quote-panel p { max-width: 700px; margin: 0 auto 24px; }
.quote-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  color: #fff;
  background: var(--blue);
  border: 1px solid #66b7ff;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 0 34px #087ee84d;
}
.fine-print { margin-top: 16px !important; color: #91a0b0 !important; font-size: .9rem; }
@media (max-width: 760px) {
  .metrics, .feature-grid, .process { grid-template-columns: 1fr; }
  .hero-shell { padding: 28px 22px; }
  .hero-top { grid-template-columns: 1fr; gap: 24px; }
  .hero-product { width: min(100%, 480px); margin-inline: auto; padding: 12px; }
}