@font-face {
  font-family: Manrope;
  src: url("/manrope.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background: #111;
  --text: #f2f2f2;
  --muted: #b2b2b2;
  --accent: #c8df21;
  --line: #ffffff24;
  --gutter: clamp(20px, 5.56vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); font: 400 16px/1.4 Manrope, system-ui, sans-serif; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(1280px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip-link { position: absolute; top: 8px; left: var(--gutter); z-index: 1; padding: 10px 16px; background: var(--background); transform: translateY(calc(-100% - 12px)); }
.skip-link:focus { transform: none; }

.site-header, .site-footer { box-shadow: inset 0 -1px #ffffff1a; }
.header-inner, .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.header-inner { min-height: 100px; }
.company-logo { display: inline-flex; align-items: center; gap: 13px; font-size: 29px; font-weight: 700; letter-spacing: -1.1px; }
.company-logo small { display: block; margin-top: 3px; color: #b5b5b5; font-size: 8px; font-weight: 600; letter-spacing: 2.7px; text-transform: uppercase; }
nav { display: flex; flex-wrap: wrap; gap: 0 34px; }
nav a { padding-block: 12px; color: #c4c4c4; font-size: 14px; }
nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

.hero { display: flex; align-items: flex-end; min-height: 660px; padding-block: 56px 66px; background: linear-gradient(#08090bd1, #08090bd1), url("/market.webp") center / cover no-repeat #1b1b1b; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 420fr); gap: clamp(32px, 6.95vw, 100px); align-items: end; }
h1 { font-size: clamp(44px, 5.7vw, 82px); line-height: 1.04; font-weight: 500; letter-spacing: -.049em; }
.hero-intro { display: grid; gap: 28px; }
.hero-intro p { color: #d4d4d4; font-size: 19px; line-height: 1.6; }
.pill { display: inline-flex; width: fit-content; min-height: 47px; padding: 0 22px; justify-content: center; align-items: center; gap: 24px; border-radius: 30px; background: var(--accent); color: #171a11; font-size: 14px; font-weight: 750; }
.hero .pill { min-height: 49px; padding-inline: 24px; }
a.pill:hover { background: #e0f34f; }

.brands { padding-block: 80px 88px; }
.feature { display: grid; grid-template-columns: minmax(0, 630fr) minmax(0, 570fr); gap: clamp(32px, 5.56vw, 80px); align-items: center; }
.feature-reverse { grid-template-columns: minmax(0, 570fr) minmax(0, 630fr); grid-template-areas: "preview story"; margin-top: 64px; padding-top: 64px; box-shadow: inset 0 1px var(--line); }
.feature-reverse .brand-story { grid-area: story; }
.feature-reverse .showcase { grid-area: preview; }
.brand-story { display: grid; gap: 22px; justify-items: start; }
.brand-logo { display: flex; gap: 10px; align-items: center; font-size: 25px; font-weight: 750; letter-spacing: -.7px; }
.brand-story h2 { font-size: clamp(36px, 3.34vw, 48px); font-weight: 400; line-height: 1.12; letter-spacing: -1.8px; }
.brand-story > p { color: var(--muted); font-size: 18px; line-height: 1.65; }
.capabilities { display: grid; gap: 12px; list-style: none; padding: 0; color: #d6d6d6; font-size: 14px; }
.capabilities li { display: flex; gap: 12px; align-items: center; }
.capabilities .icon { color: var(--accent); }

.showcase { min-height: 530px; padding: 30px; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; border-radius: 4px; background: #1d1d1d; }
.preview { max-width: 100%; border: 1px solid #383838; background: #151515; }
.row, .payment-details div, .payment-details dt { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.payment { width: 460px; padding: 29px; border-radius: 30px; display: grid; gap: 23px; }
.preview-title { color: #eaeaea; font-size: 17px; font-weight: 700; }
.payment .icon { color: #cff00b; width: 20px; height: 20px; }
.payment-info { display: grid; gap: 10px; color: #adadad; font-size: 15px; }
.payment-info strong { font-size: clamp(32px, 3vw, 42px); font-weight: 650; letter-spacing: -1.3px; color: #f3f3f3; }
.payment-info time { font-size: 14px; }
.payment-details { display: grid; gap: 18px; padding-block: 22px; border-block: 1px solid #3c3c3c; color: #979797; font-size: 14px; }
.payment-details dd { color: #e5e5e5; font-size: 15px; white-space: nowrap; }
.preview-actions { color: #9a9a9a; font-size: 14px; }
.preview-actions .pill { gap: 9px; background: #cff00b; padding-inline: 24px; min-height: 48px; font-size: 16px; }
.preview-actions .icon { color: currentColor; width: 19px; height: 19px; }
.sales { width: 310px; min-height: 470px; padding: 23px; border-radius: 28px; display: grid; align-content: space-between; gap: 12px; font-size: 12px; }
.sales .brand-logo { gap: 7px; font-size: 23px; }
.shop, .sales-total span { color: #aaa; }
.sales-total { display: grid; gap: 7px; padding-bottom: 18px; border-bottom: 1px solid #383838; }
.sales-total span { font-size: 10px; text-transform: uppercase; }
.sales-total strong { color: var(--accent); font-size: 32px; letter-spacing: -.7px; }
.new-sale { font-size: 16px; font-weight: 700; }
.sales .row { color: #d4d4d4; }
.sales .pill { width: 100%; min-height: 44px; padding-inline: 8px; font-size: 12px; }

.approach { background: #1b1b1b; padding-block: 76px 84px; }
.approach h2 { font-size: clamp(32px, 4vw, 42px); font-weight: 400; letter-spacing: -1.4px; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.48vw, 50px); list-style: none; padding: 0; margin-top: 40px; }
.principles li { display: grid; align-content: start; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.principles span { color: #999; font-size: 12px; }
.principles h3 { font-size: 22px; font-weight: 400; }
.principles p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.site-footer { box-shadow: inset 0 1px #ffffff16; }
.footer-inner { min-height: 134px; padding-block: 32px; }
.footer-inner > p { color: #aaa; font-size: 14px; }
.footer-inner > small { color: #929292; font-size: 12px; }

@media (max-width: 900px) {
  .hero { min-height: 550px; }
  .hero-inner { grid-template-columns: 1fr; gap: 26px; }
  .hero-intro { max-width: 420px; }
  .feature, .feature-reverse { grid-template-columns: minmax(0, 1fr); grid-template-areas: "story" "preview"; }
  .showcase { min-height: 0; padding: 30px; }
}

@media (max-width: 600px) {
  .header-inner { min-height: 0; flex-wrap: wrap; gap: 2px 16px; padding-block: 14px 6px; }
  nav { gap: 0 20px; }
  .hero { min-height: 470px; padding-block: 48px; background-position: 58% center; }
  h1 { font-size: clamp(35px, 10vw, 58px); }
  .hero-intro p { font-size: 17px; }
  .brands, .approach { padding-block: 52px; }
  .feature-reverse { margin-top: 44px; padding-top: 44px; }
  .showcase { padding: 14px; }
  .payment { padding: 16px; gap: 16px; border-radius: 22px; }
  .payment-details { gap: 14px; padding-block: 16px; }
  .payment-details dt, .payment-details dd { font-size: 12px; }
  .preview-actions .pill { padding-inline: 14px; font-size: 14px; }
  .principles { grid-template-columns: 1fr; margin-top: 28px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}