@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0b0b0a; color: #f4ead9; font-family: Inter, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.street-page { min-height: 100vh; overflow-x: hidden; background: #0b0b0a; }
.hero {
  position: relative;
  min-height: 820px;
  height: 78vw;
  max-height: 900px;
  padding: 0 clamp(28px, 4vw, 72px);
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 8%, rgba(215,255,54,.11), transparent 24%),
    radial-gradient(circle at 34% 42%, rgba(255,255,255,.035), transparent 28%),
    linear-gradient(180deg, #080807 0%, #11100e 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: .45;
}
.nav {
  position: relative;
  z-index: 5;
  height: 74px;
  display: grid;
  grid-template-columns: 210px 1fr 270px;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.logo {
  color: #d7ff36;
  font-size: 39px;
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: 1;
}
.nav nav {
  display: flex;
  justify-content: center;
  gap: clamp(22px, 3.2vw, 58px);
  color: rgba(244,234,217,.82);
  font: 800 11px/1 "Space Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  color: rgba(244,234,217,.82);
  font: 800 11px/1 "Space Mono", monospace;
  text-transform: uppercase;
}
.start, .primary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  border-radius: 7px;
  background: #d7ff36;
  color: #0b0b0a;
  box-shadow: 0 0 28px rgba(215,255,54,.18);
}
.hero-copy {
  position: relative;
  z-index: 4;
  width: min(760px, 50vw);
  padding-top: 56px;
}
.social-proof {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  background: rgba(255,255,255,.08);
  color: #f4ead9;
  font-size: 14px;
  font-weight: 800;
}
.social-proof b {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #d7ff36;
  color: #111;
}
.avatars { display: flex; }
.avatars i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-left: -7px;
  border: 2px solid #2a2924;
  background:
    radial-gradient(circle at 50% 38%, #1b1714 0 8%, transparent 9%),
    radial-gradient(circle at 36% 34%, #111 0 2px, transparent 3px),
    radial-gradient(circle at 64% 34%, #111 0 2px, transparent 3px),
    linear-gradient(135deg, #f4ead9, #a98d72 62%, #151515);
}
.avatars i:nth-child(2) {
  background:
    radial-gradient(circle at 50% 39%, #0f0f0d 0 8%, transparent 9%),
    radial-gradient(circle at 36% 34%, #f4ead9 0 2px, transparent 3px),
    radial-gradient(circle at 64% 34%, #f4ead9 0 2px, transparent 3px),
    linear-gradient(135deg, #2b211b, #d7ff36 72%);
}
.avatars i:nth-child(3) {
  background:
    radial-gradient(circle at 50% 39%, #2a160d 0 8%, transparent 9%),
    radial-gradient(circle at 36% 34%, #111 0 2px, transparent 3px),
    radial-gradient(circle at 64% 34%, #111 0 2px, transparent 3px),
    linear-gradient(135deg, #ff4f1f, #f4ead9 74%);
}
.avatars i:first-child { margin-left: 0; }
h1 {
  margin: 22px 0 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(82px, 9.6vw, 178px);
  line-height: .76;
  letter-spacing: -.025em;
  color: #f4ead9;
  max-width: 730px;
}
h1 span { display: block; color: #d7ff36; }
.hero-copy p {
  margin: 26px 0 0;
  max-width: 510px;
  color: rgba(244,234,217,.94);
  font-size: clamp(18px, 1.5vw, 25px);
  line-height: 1.38;
}
.hero-copy em { color: #d7ff36; font-style: italic; font-weight: 900; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 28px; }
.primary {
  font: 900 13px/1 "Space Mono", monospace;
  text-transform: uppercase;
  gap: 18px;
}
.watch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #d7ff36;
  font: 900 12px/1 "Space Mono", monospace;
  text-transform: uppercase;
}
.watch span {
  width: 25px;
  height: 25px;
  border: 1px solid #d7ff36;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.value-strip {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0 clamp(28px, 4vw, 72px);
  background: #0f0f0d;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.value-strip article {
  min-height: 156px;
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 18px;
  align-items: center;
  padding: 26px clamp(18px, 3vw, 42px);
  border-right: 1px solid rgba(255,255,255,.1);
  color: rgba(244,234,217,.78);
}
.value-strip article:last-child { border-right: 0; }
.value-strip b {
  grid-row: span 2;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(244,234,217,.7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f4ead9;
  font: 900 22px/1 "Space Mono", monospace;
}
.value-strip strong {
  color: #f4ead9;
  text-transform: uppercase;
  font: 900 13px/1 "Space Mono", monospace;
}
.value-strip span { margin-top: 7px; font-size: 15px; line-height: 1.35; max-width: 330px; }
.mini-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: min(650px, 48vw);
  margin-top: 34px;
}
.mini-benefits article {
  display: grid;
  grid-template-columns: 50px 1fr;
  column-gap: 14px;
  color: rgba(244,234,217,.78);
}
.mini-benefits b {
  grid-row: span 2;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(244,234,217,.7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f4ead9;
  font: 900 21px/1 "Space Mono", monospace;
}
.mini-benefits strong {
  color: #f4ead9;
  text-transform: uppercase;
  font: 900 12px/1 "Space Mono", monospace;
}
.mini-benefits span { margin-top: 6px; font-size: 13px; line-height: 1.25; }
.hero-media {
  position: absolute;
  z-index: 3;
  top: 74px;
  right: 0;
  width: 67%;
  height: calc(100% - 72px);
  pointer-events: none;
}
.concept-crop.collage {
  position: absolute;
  top: -12px;
  right: -70px;
  width: min(1260px, 126%);
  height: auto;
  max-width: none;
  opacity: .82;
  object-fit: contain;
  filter: contrast(.96) saturate(1.02) brightness(.86) drop-shadow(0 34px 70px rgba(0,0,0,.58));
  mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 8%, #000 24%, #000 88%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 14%, #000 32%, #000 100%);
  mask-composite: intersect;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #0b0b0a 0%, rgba(11,11,10,.96) 14%, rgba(11,11,10,.35) 36%, transparent 58%),
    linear-gradient(90deg, #0b0b0a 0%, rgba(11,11,10,.9) 17%, rgba(11,11,10,.18) 39%, transparent 68%),
    radial-gradient(circle at 58% 48%, transparent 0 25%, rgba(11,11,10,.22) 58%, rgba(11,11,10,.72) 100%);
  pointer-events: none;
}
.phone {
  position: absolute;
  z-index: 5;
  top: 140px;
  left: 51%;
  width: min(340px, 27vw);
  min-width: 290px;
  padding: 11px;
  border-radius: 46px;
  background: #050505;
  box-shadow: 0 40px 100px rgba(0,0,0,.78), 0 0 0 1px rgba(255,255,255,.12);
  pointer-events: auto;
}
.phone-inner {
  min-height: 610px;
  border-radius: 36px;
  padding: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #191a17, #080808);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 27px;
  border-radius: 0 0 18px 18px;
  background: #050505;
  transform: translateX(-50%);
}
.phone-top, .app-head, .recent-head, .tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.phone-top { margin-top: 5px; color: #fff; font: 800 12px/1 Inter; }
.app-head { margin-top: 24px; }
.phone-logo { color: #d7ff36; font-size: 30px; font-weight: 900; letter-spacing: -.08em; }
.bell { color: #eee; }
.overview {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  overflow: hidden;
}
.overview div { padding: 17px 13px; border-right: 1px solid rgba(255,255,255,.08); }
.overview div:last-child { border-right: 0; }
.overview small, .source-row small {
  display: block;
  color: rgba(255,255,255,.52);
  font-size: 10px;
  line-height: 1;
  margin-bottom: 8px;
}
.overview strong {
  display: block;
  color: #d7ff36;
  font: 900 25px/1 "Space Mono";
}
.overview em {
  display: block;
  margin-top: 7px;
  color: #d7ff36;
  font: 800 11px/1 "Space Mono";
  font-style: normal;
}
.source-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
  padding: 0 2px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.source-row div {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 8px;
  align-items: center;
}
.round-img {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, #d7ff36, #202020);
}
.round-img.second { background: radial-gradient(circle, #ff4f1f, #202020); }
.source-row b { color: #fff; font-size: 12px; }
.recent-head { margin-top: 15px; color: rgba(255,255,255,.82); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.recent-head a { color: rgba(255,255,255,.6); text-transform: none; }
.inventory-list { display: grid; gap: 10px; margin-top: 12px; }
.inventory-list article {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}
.item-img {
  height: 62px;
  border-radius: 9px;
  background: #f4ead9;
  overflow: hidden;
  position: relative;
}
.item-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 40% 35%, rgba(17,17,17,.18), transparent 30%),
    linear-gradient(135deg, #f4ead9, #c8b8a1);
}
.item-img::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 13px;
  border-radius: 8px;
}
.item-img.sneaker::before {
  background:
    linear-gradient(150deg, transparent 0 42%, #111 43% 55%, transparent 56%),
    radial-gradient(ellipse at 54% 63%, #d7ff36 0 16%, transparent 17%),
    #e9dfcc;
  clip-path: polygon(8% 62%, 25% 46%, 65% 48%, 92% 63%, 82% 75%, 18% 76%);
}
.item-img.jacket::before {
  background:
    linear-gradient(90deg, transparent 46%, rgba(17,17,17,.28) 47% 53%, transparent 54%),
    #9b6b43;
  clip-path: polygon(22% 17%, 44% 8%, 56% 8%, 78% 17%, 92% 72%, 68% 78%, 61% 36%, 57% 86%, 43% 86%, 39% 36%, 32% 78%, 8% 72%);
}
.item-img.card::before {
  background:
    radial-gradient(circle at 50% 38%, #ff4f1f 0 18%, transparent 19%),
    linear-gradient(#d7ff36 0 18%, #f4ead9 19% 72%, #ff4f1f 73%);
  border: 2px solid #111;
  border-radius: 4px;
}
.inventory-list b { display: block; margin-bottom: 3px; color: #fff; font-size: 13px; }
.inventory-list small { color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.25; }
.inventory-list strong { color: #fff; text-align: right; font: 800 19px/1.1 Inter; }
.inventory-list em { display: block; margin-top: 5px; color: #d7ff36; font: 900 10px/1.15 "Space Mono"; font-style: normal; text-transform: uppercase; }
.tabbar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  height: 50px;
  padding: 0 8px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.48);
  font: 800 10px/1 "Space Mono";
  text-transform: uppercase;
}
.tabbar span:first-child { color: #d7ff36; }
.tabbar b {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #d7ff36;
  color: #111;
  display: grid;
  place-items: center;
  font-size: 25px;
}
.cream-band {
  position: relative;
  z-index: 6;
  background: #f4ead9;
  color: #111;
  min-height: 250px;
  padding: 70px clamp(28px, 4vw, 72px) 58px;
  border-top: 1px solid rgba(0,0,0,.18);
}
.cream-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr 1.05fr;
  gap: 30px;
  max-width: 1540px;
  margin: 0 auto;
}
.cream-grid article { min-height: 210px; position: relative; overflow: hidden; }
.cream-grid h2 {
  margin: 0 0 14px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 34px;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.cream-grid p { margin: 0; color: rgba(0,0,0,.72); line-height: 1.45; font-size: 16px; }
.mini-phone {
  position: absolute;
  bottom: -70px;
  left: 50%;
  width: 210px;
  height: 250px;
  transform: translateX(-50%);
  border: 9px solid #111;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  background: #111;
}
.mini-phone img {
  width: 580px;
  max-width: none;
  transform: translate(-215px, -208px) scale(.72);
}
.mini-phone.crop-a::before {
  content: "";
  position: absolute;
  inset: 22px 16px auto;
  height: 46px;
  border-radius: 12px;
  background: #1a1a18;
  box-shadow: 0 60px 0 #1a1a18, 0 120px 0 #1a1a18;
}
.mini-phone.crop-a::after {
  content: "$195\A ACTIVE";
  white-space: pre;
  position: absolute;
  right: 26px;
  top: 36px;
  color: #d7ff36;
  font: 900 12px/1.2 "Space Mono";
  text-align: right;
}
.dark-list {
  display: grid;
  gap: 8px;
  padding: 18px;
  color: #fff;
}
.dark-list div {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px;
  border-radius: 9px;
  background: rgba(255,255,255,.06);
}
.dark-list span { height: 46px; border-radius: 6px; background: #f4ead9; }
.dark-list b { font-size: 11px; }
.dark-list em { color: #d7ff36; font: 900 11px/1.2 "Space Mono"; font-style: normal; text-align: right; }
.win-card {
  margin-top: 22px;
  background: #111;
  color: #fff;
  border-radius: 24px 24px 0 0;
  min-height: 152px;
  padding: 18px;
  transform: rotate(-2deg);
}
.win-card small { color: #d7ff36; font-weight: 800; }
.win-card strong { display: block; color: #d7ff36; font: 900 35px/1 "Space Mono"; margin: 8px 0; }
.win-card span { color: rgba(255,255,255,.82); }
.testimonial .big { margin: 18px 0; }
.testimonial .big i, .testimonial .big b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #111;
  font-size: 10px;
  font-weight: 900;
}
.testimonial small { color: rgba(0,0,0,.52); }
.site-footer {
  background: #080807;
  color: rgba(244,234,217,.68);
  padding: 76px clamp(28px, 4vw, 72px) 34px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer-top {
  max-width: 1540px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, .7fr);
  gap: 46px;
}
.footer-logo {
  display: block;
  color: #d7ff36;
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: 1;
}
.site-footer p {
  max-width: 420px;
  line-height: 1.55;
  font-size: 16px;
}
.site-footer h3 {
  margin: 0 0 18px;
  color: #f4ead9;
  font: 900 13px/1 "Space Mono";
  text-transform: uppercase;
  letter-spacing: .08em;
}
.site-footer a:not(.footer-logo) {
  display: block;
  margin: 0 0 12px;
  line-height: 1.2;
}
.footer-bottom {
  max-width: 1540px;
  margin: 54px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font: 900 12px/1.3 "Space Mono";
  text-transform: uppercase;
  color: rgba(244,234,217,.46);
}

.dark-section {
  background: #0b0b0a;
  color: #f4ead9;
  padding: 118px clamp(28px, 4vw, 72px);
  border-top: 1px solid rgba(255,255,255,.08);
}
.section-inner {
  max-width: 1540px;
  margin: 0 auto;
}
.section-kicker {
  color: #d7ff36;
  font: 900 13px/1 "Space Mono";
  text-transform: uppercase;
  letter-spacing: .12em;
}
.section-title {
  margin: 18px 0 0;
  max-width: 1040px;
  color: #f4ead9;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(70px, 8.5vw, 150px);
  line-height: .82;
  letter-spacing: -.02em;
}
.section-lead {
  max-width: 760px;
  color: rgba(244,234,217,.72);
  font-size: 20px;
  line-height: 1.55;
}
.split-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 52px;
  align-items: stretch;
}
.seller-card {
  min-height: 520px;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(rgba(215,255,54,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215,255,54,.035) 1px, transparent 1px),
    #121210;
  background-size: 46px 46px;
  position: relative;
  overflow: hidden;
}
.seller-card h3 {
  margin: 0;
  font-family: "Bebas Neue";
  font-size: 64px;
  line-height: .9;
}
.seller-card p {
  max-width: 460px;
  color: rgba(244,234,217,.7);
  line-height: 1.5;
}
.trend-list {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 34px;
  display: grid;
  gap: 10px;
}
.trend-list div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.32);
  font: 900 13px/1 "Space Mono";
}
.trend-list b { color: #d7ff36; }
.trend-list em { color: #ff4f1f; font-style: normal; }
.workflow {
  display: grid;
  gap: 14px;
}
.workflow article {
  min-height: 162px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.045);
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 22px;
  align-items: center;
}
.workflow span {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid #d7ff36;
  color: #d7ff36;
  font: 900 22px/1 "Space Mono";
}
.workflow h3 {
  margin: 0 0 8px;
  font-size: 28px;
  letter-spacing: -.04em;
}
.workflow p { margin: 0; color: rgba(244,234,217,.68); line-height: 1.45; }
.pricing-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.price-card {
  min-height: 340px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.13);
  background: #121210;
}
.price-card.featured {
  background: #d7ff36;
  color: #111;
  transform: rotate(-1deg);
}
.price-card h3 {
  margin: 0;
  font-family: "Bebas Neue";
  font-size: 50px;
}
.price-card strong {
  display: block;
  margin: 20px 0;
  font: 900 42px/1 "Space Mono";
}
.price-card p { color: inherit; opacity: .72; line-height: 1.45; }
.price-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 18px;
  background: #111;
  color: #d7ff36;
  font: 900 12px/1 "Space Mono";
  text-transform: uppercase;
}
.price-card:not(.featured) a {
  background: #d7ff36;
  color: #111;
}
.final-hero {
  background: #f4ead9;
  color: #111;
  padding: 110px clamp(28px, 4vw, 72px);
}
.final-hero .section-title { color: #111; }
.final-hero .section-lead { color: rgba(0,0,0,.68); }
.final-grid {
  max-width: 1540px;
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
}
.share-preview {
  min-height: 380px;
  background: #111;
  color: #fff;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.share-preview h3 {
  margin: 0;
  font-family: "Bebas Neue";
  font-size: 72px;
  line-height: .85;
}
.share-preview strong {
  display: block;
  margin-top: 28px;
  color: #d7ff36;
  font: 900 74px/1 "Space Mono";
}
.share-preview .price-tag {
  position: absolute;
  right: 34px;
  bottom: 38px;
  transform: rotate(-8deg);
}
.faq-list {
  display: grid;
  gap: 12px;
}
.faq-list details {
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  padding: 18px 20px;
}
.faq-list summary {
  cursor: pointer;
  font-weight: 900;
  letter-spacing: -.02em;
}
.faq-list p {
  color: rgba(0,0,0,.66);
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .hero {
    height: auto;
    min-height: 1260px;
  }
  .hero-copy {
    width: 100%;
    max-width: 760px;
  }
  .hero-media {
    top: 650px;
    width: 100%;
    height: 580px;
  }
  .concept-crop.collage {
    width: 930px;
    right: -120px;
    top: 8px;
    opacity: .76;
  }
  .phone {
    left: auto;
    right: clamp(28px, 10vw, 130px);
    width: 320px;
    min-width: 300px;
    top: 74px;
  }
  .cream-grid { grid-template-columns: repeat(2, 1fr); }
  .value-strip { grid-template-columns: 1fr; padding: 0 20px; }
  .value-strip article {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    min-height: 126px;
    padding-left: 0;
    padding-right: 0;
  }
  .value-strip article:last-child { border-bottom: 0; }
  .split-showcase, .final-grid { grid-template-columns: 1fr; }
  .pricing-strip { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .hero { min-height: 1320px; padding-left: 20px; padding-right: 20px; }
  .nav { height: auto; padding: 18px 0; grid-template-columns: 1fr; align-items: start; }
  .nav nav, .nav-actions { justify-content: flex-start; flex-wrap: wrap; }
  h1 { font-size: 82px; }
  .hero-media { top: 690px; height: 600px; }
  .phone { left: 50%; right: auto; transform: translateX(-50%) scale(.86); transform-origin: top center; }
  .concept-crop.collage { width: 760px; right: -220px; opacity: .66; top: 52px; }
  .mini-benefits { grid-template-columns: 1fr; }
  .cream-grid { grid-template-columns: 1fr; }
  .cream-grid article {
    min-height: auto;
    overflow: visible;
    padding-bottom: 10px;
  }
  .mini-phone {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: min(220px, 82vw);
    height: 190px;
    margin: 22px auto 0;
    border-radius: 28px;
  }
  .dark-list {
    width: min(260px, 86vw);
    height: auto;
    min-height: 190px;
  }
  .win-card {
    min-height: 170px;
  }
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .hero {
    min-height: 1280px;
  }
  h1 { font-size: 64px; }
  .hero-copy p { font-size: 17px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .primary, .watch { width: 100%; justify-content: center; }
  .social-proof { height: auto; min-height: 42px; flex-wrap: wrap; padding: 10px 12px; }
  .phone { transform: translateX(-50%) scale(.66); top: 84px; }
  .hero-media { top: 710px; height: 520px; }
  .concept-crop.collage {
    width: 650px;
    right: -248px;
    top: 0;
    opacity: .74;
  }
  .value-strip article { grid-template-columns: 48px 1fr; }
}

/* Rebuilt "See how it works" section */
.how-it-works {
  position: relative;
  z-index: 6;
  background: #f4ead9;
  color: #111;
  padding: 62px clamp(28px, 4vw, 72px) 70px;
  border-top: 1px solid rgba(0,0,0,.18);
}
.section-intro {
  max-width: 1540px;
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: .72fr 1.28fr .9fr;
  gap: 28px;
  align-items: end;
}
.section-intro span {
  font: 900 13px/1 "Space Mono";
  text-transform: uppercase;
  letter-spacing: .12em;
}
.section-intro h2 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(58px, 7vw, 112px);
  line-height: .82;
  letter-spacing: -.02em;
}
.section-intro p {
  margin: 0;
  color: rgba(0,0,0,.68);
  line-height: 1.5;
  font-size: 17px;
}
.how-grid {
  max-width: 1540px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.how-card {
  min-height: 390px;
  padding: 22px;
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.12);
  position: relative;
  overflow: hidden;
}
.how-card h2 {
  margin: 0 0 12px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 42px;
  line-height: .88;
  letter-spacing: -.01em;
}
.how-card p {
  margin: 0;
  color: rgba(0,0,0,.68);
  line-height: 1.42;
}
.feed-visual,
.history-visual {
  margin-top: 22px;
  padding: 16px;
  border-radius: 24px;
  background: #111;
  color: #fff;
  display: grid;
  gap: 10px;
}
.feed-row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 9px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}
.feed-row b { display: block; color: #fff; font-size: 13px; }
.feed-row small { color: rgba(255,255,255,.52); font-size: 11px; }
.feed-row em { color: #d7ff36; font: 900 12px/1.15 "Space Mono"; font-style: normal; text-align: right; }
.feed-row i { font-style: normal; text-transform: uppercase; }
.thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #f4ead9;
  position: relative;
  overflow: hidden;
}
.thumb::before { content: ""; position: absolute; inset: 12px; border-radius: 6px; }
.thumb.shoe::before {
  background: #111;
  clip-path: polygon(4% 60%, 26% 42%, 66% 46%, 94% 62%, 82% 75%, 16% 76%);
}
.thumb.hoodie::before {
  background: #9b6b43;
  clip-path: polygon(22% 17%, 44% 8%, 56% 8%, 78% 17%, 92% 72%, 68% 78%, 61% 36%, 57% 86%, 43% 86%, 39% 36%, 32% 78%, 8% 72%);
}
.thumb.card::before {
  border: 2px solid #111;
  background: linear-gradient(#d7ff36 0 18%, #f4ead9 19% 72%, #ff4f1f 73%);
}
.history-visual {
  min-height: 220px;
  position: relative;
}
.timeline-line {
  position: absolute;
  left: 30px;
  top: 34px;
  bottom: 34px;
  width: 1px;
  background: rgba(215,255,54,.45);
}
.event {
  position: relative;
  padding: 14px 14px 14px 42px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
}
.event::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 19px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #d7ff36;
}
.event b { display: block; margin-bottom: 5px; color: #fff; }
.event span { color: rgba(255,255,255,.62); font-size: 12px; }
.event.win { border-color: rgba(215,255,54,.4); }
.share-card { background: #111; color: #fff; }
.share-card p { color: rgba(255,255,255,.68); }
.share-card .win-card {
  margin-top: 24px;
  min-height: 208px;
  border: 1px solid rgba(255,255,255,.12);
}
.win-card i {
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: #d7ff36;
  font: 900 12px/1 "Space Mono";
  font-style: normal;
  transform: rotate(-8deg);
}
.trust-card { background: #fff; }
.seller-faces {
  display: flex;
  align-items: center;
  margin: 20px 0 18px;
}
.seller-faces i,
.seller-faces b {
  width: 42px;
  height: 42px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #111;
  color: #d7ff36;
  display: grid;
  place-items: center;
  font: 900 12px/1 "Space Mono";
  font-style: normal;
}
.seller-faces i:nth-child(2) { background: #2a221d; color: #f4ead9; }
.seller-faces i:nth-child(3) { background: #d7ff36; color: #111; }
.seller-faces i:nth-child(4) { background: #ff4f1f; color: #111; }
.seller-faces i:first-child { margin-left: 0; }
.seller-faces b { background: #111; color: #fff; }
.trust-metrics {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.trust-metrics span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,.1);
  color: rgba(0,0,0,.64);
  font-size: 13px;
}
.trust-metrics b { color: #111; font-family: "Space Mono"; }
.social-proof-panel {
  min-height: 380px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  padding: 32px;
}
.social-proof-panel h3 {
  margin: 0;
  font-family: "Bebas Neue";
  font-size: 62px;
  line-height: .9;
}
.social-proof-panel p {
  color: rgba(0,0,0,.68);
  line-height: 1.5;
}
.proof-stat {
  margin-top: 34px;
  padding: 24px;
  background: #111;
  color: #fff;
}
.proof-stat span {
  display: block;
  color: #d7ff36;
  font: 900 56px/1 "Space Mono";
}
.proof-stat small {
  color: rgba(255,255,255,.62);
  text-transform: uppercase;
  font: 900 12px/1 "Space Mono";
}
.faq-section {
  background: #0b0b0a;
  padding: 110px clamp(28px, 4vw, 72px);
  color: #f4ead9;
}
.faq-section .faq-list {
  margin-top: 42px;
  max-width: 980px;
}
.faq-section .faq-list details {
  background: #141412;
  color: #f4ead9;
  border: 1px solid rgba(255,255,255,.12);
}
.faq-section .faq-list p {
  color: rgba(244,234,217,.68);
}

@media (max-width: 1180px) {
  .section-intro { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .how-grid { grid-template-columns: 1fr; }
  .how-card { min-height: auto; }
}

/* Street Value live overhaul: real app screenshots, tighter type, cohesive dark layout */
.hero {
  min-height: 760px;
  height: 72vw;
  max-height: 860px;
  background:
    radial-gradient(circle at 76% 8%, rgba(215,255,54,.12), transparent 23%),
    radial-gradient(circle at 22% 52%, rgba(255,79,31,.08), transparent 22%),
    linear-gradient(180deg, #080807 0%, #11100e 100%);
}
.nav { grid-template-columns: 170px 1fr 250px; }
.logo { font-size: 34px; }
.nav nav { gap: clamp(16px, 2.4vw, 42px); }
.hero-copy { width: min(650px, 47vw); padding-top: 58px; }
h1 { font-size: clamp(66px, 7.4vw, 126px); line-height: .82; max-width: 660px; }
.hero-copy p { max-width: 500px; font-size: clamp(16px, 1.2vw, 20px); line-height: 1.45; }
.social-proof { font-size: 12px; height: 38px; }
.start, .primary { min-height: 42px; padding: 0 21px; }
.hero-actions { gap: 22px; margin-top: 26px; }
.primary, .watch { font-size: 11px; }
.hero-media { width: 65%; }
.concept-crop.collage { opacity: .52; filter: contrast(.98) saturate(.96) brightness(.62) drop-shadow(0 34px 70px rgba(0,0,0,.58)); }
.phone {
  top: 92px;
  left: 50%;
  width: min(322px, 24vw);
  min-width: 270px;
  padding: 9px;
  border-radius: 40px;
  background: linear-gradient(180deg, #242424, #050505 22%, #050505);
  box-shadow: 0 42px 110px rgba(0,0,0,.82), 0 0 0 1px rgba(255,255,255,.16), 0 0 46px rgba(215,255,54,.12);
}
.phone-inner {
  min-height: 0;
  aspect-ratio: 390 / 844;
  padding: 0;
  border-radius: 31px;
  overflow: hidden;
  background: #0d0d0d;
}
.phone-inner::before { display: none; }
.phone-screen { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.value-strip article { min-height: 132px; }
.value-strip span { font-size: 14px; }

.section-title { font-size: clamp(48px, 5.7vw, 98px); line-height: .88; max-width: 940px; }
.section-lead { font-size: 18px; max-width: 700px; }
.dark-section { padding: 92px clamp(28px, 4vw, 72px); }
.section-kicker { font-size: 12px; }

.shareable-wins {
  background:
    radial-gradient(circle at 75% 18%, rgba(215,255,54,.09), transparent 24%),
    linear-gradient(180deg, #11100e, #0b0b0a);
  color: #f4ead9;
  padding: 90px clamp(28px, 4vw, 72px) 98px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.shareable-wins .section-title { color: #f4ead9; }
.shareable-wins .section-lead { color: rgba(244,234,217,.72); }
.final-grid { gap: 18px; align-items: stretch; }
.share-preview {
  min-height: 390px;
  border: 1px solid rgba(255,255,255,.12);
  background: #141412;
  border-radius: 8px;
}
.share-preview h3 { font-size: 54px; }
.share-preview strong { font-size: clamp(46px, 5vw, 70px); }
.share-preview p { color: rgba(255,255,255,.72); line-height: 1.45; }
.share-photo {
  width: min(260px, 46%);
  aspect-ratio: 1.12;
  float: right;
  margin: 0 0 20px 24px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 60px rgba(0,0,0,.36);
}
.social-proof-panel {
  min-height: 390px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255,255,255,.12);
}
.social-proof-panel img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.price-tag { color: #d7ff36; font: 900 12px/1 "Space Mono"; }

.how-it-works {
  background: #0b0b0a;
  color: #f4ead9;
  padding: 92px clamp(28px, 4vw, 72px) 96px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.section-intro { grid-template-columns: .55fr 1.2fr .82fr; margin-bottom: 34px; }
.section-intro h2 { color: #f4ead9; font-size: clamp(46px, 5.6vw, 90px); line-height: .9; }
.section-intro p { color: rgba(244,234,217,.7); font-size: 16px; }
.how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.how-card {
  min-height: 520px;
  padding: 18px;
  background: #141412;
  color: #f4ead9;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
}
.how-card h2 { margin: 20px 4px 10px; font-size: clamp(34px, 3.8vw, 54px); line-height: .92; }
.how-card p { margin: 0 4px; color: rgba(244,234,217,.68); font-size: 15px; line-height: 1.45; max-width: 590px; }
.screenshot-frame {
  height: 330px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  background: #070707;
  box-shadow: inset 0 0 0 1px rgba(215,255,54,.08), 0 26px 70px rgba(0,0,0,.32);
}
.screenshot-frame img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-crop img { object-position: 53% 50%; }
.inventory-crop img { object-position: 58% 54%; }
.reports-crop img { object-position: 55% 50%; }
.product-stack {
  min-height: 330px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 18px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(rgba(215,255,54,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215,255,54,.04) 1px, transparent 1px),
    #10100f;
  background-size: 36px 36px;
}
.product-shot {
  display: block;
  min-height: 230px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 22px 50px rgba(0,0,0,.32);
}
.tee-art {
  background:
    radial-gradient(circle at 50% 22%, rgba(0,0,0,.32) 0 10%, transparent 11%),
    linear-gradient(118deg, transparent 0 21%, #161616 22% 37%, transparent 38%),
    linear-gradient(242deg, transparent 0 21%, #161616 22% 37%, transparent 38%),
    linear-gradient(#272727 0 34%, #efefe8 35% 82%, #c9c1b2 83%);
}
.pokemon-art {
  background:
    radial-gradient(circle at 50% 34%, #fff 0 12%, #ef233c 13% 28%, transparent 29%),
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 35%),
    linear-gradient(180deg, #5d2fb8 0 18%, #ff4f1f 19% 48%, #f4ead9 49% 78%, #d7ff36 79%);
}
.sneaker-art {
  background:
    radial-gradient(ellipse at 50% 68%, #d7ff36 0 13%, transparent 14%),
    linear-gradient(150deg, transparent 0 38%, #101010 39% 57%, transparent 58%),
    linear-gradient(180deg, #eee6d6, #a9a093);
  clip-path: polygon(3% 58%, 20% 38%, 64% 39%, 96% 57%, 84% 77%, 12% 78%);
  border-radius: 22px 44px 16px 16px;
}

.seller-card { min-height: 560px; border-radius: 8px; padding: 28px; }
.seller-card h3 { font-size: clamp(42px, 4.8vw, 66px); position: relative; z-index: 2; }
.seller-card p { position: relative; z-index: 2; }
.seller-screen {
  position: absolute;
  right: 24px;
  top: 170px;
  width: 55%;
  height: 230px;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  opacity: .72;
  z-index: 1;
}
.seller-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.trend-list { z-index: 3; }
.workflow article { border-radius: 8px; min-height: 150px; }
.workflow h3 { font-size: 24px; }

.app-gallery { padding-top: 84px; }
.gallery-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr .82fr;
  gap: 18px;
  margin-top: 38px;
}
.gallery-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: #141412;
}
.gallery-grid img { width: 100%; aspect-ratio: 14 / 9; object-fit: cover; object-position: center top; }
.gallery-grid figcaption { padding: 12px 14px 14px; color: #d7ff36; font: 900 12px/1 "Space Mono"; text-transform: uppercase; }

.pricing-strip { gap: 16px; }
.price-card { min-height: 310px; border-radius: 8px; }
.price-card h3 { font-size: 42px; }
.price-card strong { font-size: clamp(31px, 3vw, 40px); min-height: 48px; display: flex; align-items: center; }
.price-card a { border-radius: 6px; }
.faq-section { padding: 92px clamp(28px, 4vw, 72px); }
.faq-list details { border-radius: 8px; }

@media (max-width: 1180px) {
  .hero { min-height: 1130px; }
  .hero-copy { width: 100%; max-width: 650px; }
  .hero-media { top: 560px; }
  .phone { right: clamp(28px, 9vw, 120px); left: auto; }
  .section-intro { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .seller-screen { position: relative; right: auto; top: auto; width: 100%; margin-bottom: 24px; }
}
@media (max-width: 820px) {
  .hero { min-height: 1180px; }
  .nav { grid-template-columns: 1fr; }
  .nav nav { gap: 16px; }
  h1 { font-size: 66px; }
  .hero-copy p { font-size: 16px; }
  .hero-media { top: 585px; }
  .phone { transform: translateX(-50%) scale(.82); left: 50%; right: auto; }
  .how-grid, .final-grid, .split-showcase, .pricing-strip { grid-template-columns: 1fr; }
  .how-card { min-height: auto; }
  .screenshot-frame { height: 260px; }
  .product-stack { grid-template-columns: 1fr; min-height: 0; }
  .product-shot { min-height: 170px; }
  .share-photo { float: none; width: 100%; max-width: 300px; }
  .section-title { font-size: 52px; }
}
@media (max-width: 500px) {
  .hero { min-height: 1060px; }
  h1 { font-size: 54px; }
  .hero-media { top: 590px; height: 430px; }
  .phone { transform: translateX(-50%) scale(.62); top: 44px; }
  .concept-crop.collage { width: 620px; right: -270px; opacity: .5; }
  .screenshot-frame { height: 210px; }
  .share-preview, .social-proof-panel { min-height: 320px; }
  .footer-bottom { font-size: 10px; }
}

/* Final type tightening after render check */
h1 { font-size: clamp(54px, 6.2vw, 106px); line-height: .86; max-width: 600px; }
.hero-copy { padding-top: 54px; }
.hero-copy p { font-size: clamp(15px, 1.05vw, 18px); max-width: 470px; }
.section-title { font-size: clamp(42px, 4.5vw, 76px); line-height: .94; letter-spacing: -.012em; max-width: 820px; }
.shareable-wins .section-title { max-width: 760px; }
.section-intro h2 { font-size: clamp(40px, 4.7vw, 72px); line-height: .96; }
.how-card h2 { font-size: clamp(30px, 3vw, 44px); }
.seller-card h3 { font-size: clamp(36px, 3.8vw, 54px); }
.share-preview h3 { font-size: 46px; line-height: .92; }
.price-card h3 { font-size: 36px; }
@media (max-width: 820px) {
  h1 { font-size: 54px; }
  .section-title { font-size: 42px; }
}
@media (max-width: 500px) {
  h1 { font-size: 46px; }
  .section-title { font-size: 36px; }
}

/* Flippd-inspired layout rhythm: device proof plus a find-to-flip journey */
.device-band {
  position: relative;
  z-index: 6;
  padding: 96px clamp(28px, 4vw, 72px) 0;
  background:
    radial-gradient(circle at 68% 20%, rgba(215,255,54,.12), transparent 25%),
    linear-gradient(180deg, #11100e, #0b0b0a);
  color: #f4ead9;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.device-inner {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.device-inner > * { min-width: 0; }
.device-inner .section-title {
  margin-top: 14px;
  max-width: 660px;
}
.device-showcase {
  position: relative;
  min-height: 430px;
}
.desktop-device,
.mobile-device {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: #050505;
  box-shadow: 0 32px 90px rgba(0,0,0,.42);
}
.desktop-device {
  position: absolute;
  right: 0;
  top: 14px;
  width: min(780px, 100%);
  border-radius: 10px;
}
.desktop-device img {
  width: 100%;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  object-position: center top;
}
.mobile-device {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 210px;
  border-radius: 28px;
  padding: 7px;
}
.mobile-device img {
  width: 100%;
  aspect-ratio: 390 / 844;
  border-radius: 22px;
  object-fit: cover;
  object-position: center top;
}
.platform-row {
  max-width: 1540px;
  margin: 58px auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255,255,255,.1);
}
.platform-row span {
  min-height: 72px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255,255,255,.1);
  color: rgba(244,234,217,.62);
  font: 900 12px/1 "Space Mono";
  text-transform: uppercase;
}
.platform-row span:last-child { border-right: 0; }
.journey-rail {
  max-width: 1540px;
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.035);
}
.journey-rail article {
  min-height: 122px;
  padding: 18px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.journey-rail article:last-child { border-right: 0; }
.journey-rail span {
  display: block;
  color: #d7ff36;
  font: 900 12px/1 "Space Mono";
  margin-bottom: 16px;
}
.journey-rail b {
  display: block;
  color: #f4ead9;
  font: 900 13px/1 "Space Mono";
  text-transform: uppercase;
}
.journey-rail p {
  margin: 9px 0 0;
  color: rgba(244,234,217,.62);
  font-size: 13px;
  line-height: 1.35;
}
@media (max-width: 1180px) {
  .device-inner { grid-template-columns: 1fr; }
  .device-showcase { min-height: 520px; }
  .journey-rail { grid-template-columns: repeat(3, 1fr); }
  .journey-rail article { border-bottom: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 820px) {
  .device-band { padding-top: 72px; }
  .desktop-device { position: relative; width: 100%; }
  .mobile-device { width: 160px; left: 18px; bottom: 8px; }
  .platform-row { grid-template-columns: 1fr; }
  .platform-row span { min-height: 48px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .journey-rail { grid-template-columns: 1fr; }
  .journey-rail article { min-height: auto; border-right: 0; }
}
@media (max-width: 500px) {
  .hero { min-height: auto; height: auto; padding-bottom: 44px; }
  .hero-media {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 420px;
    margin-top: 26px;
  }
  .phone {
    top: 22px;
    left: 50%;
    right: auto;
    width: 250px;
    min-width: 250px;
    transform: translateX(-50%);
  }
  .concept-crop.collage {
    width: 620px;
    right: -270px;
    top: 4px;
  }
  .device-showcase { min-height: 390px; }
  .mobile-device { width: 126px; }
  .device-inner .section-title {
    max-width: 320px;
    font-size: 34px;
    line-height: .98;
  }
  .device-inner .section-lead {
    max-width: 320px;
    font-size: 16px;
  }
}

/* Stronger structure pass: softer section rhythm, mixed inventory visuals, feature-led pricing */
.app-composite { position: relative; }
.app-composite > img { display: block; }
.screen-thumb {
  position: absolute;
  display: block;
  width: 5.8%;
  aspect-ratio: 1;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  z-index: 3;
}
.desktop-device .screen-thumb { display: none; }
.feature-screen .screen-thumb { width: 5.5%; }
.thumb-tee { left: 30.8%; top: 75.6%; background: var(--art-jacket); }
.thumb-homeware { left: 30.8%; top: 83.2%; background: var(--art-homeware); }
.thumb-cardbox { left: 30.8%; top: 90.8%; background: var(--art-cardbox); }

:root {
  --art-jacket:
    radial-gradient(circle at 50% 21%, #151515 0 9%, transparent 10%),
    linear-gradient(118deg, transparent 0 22%, #202020 23% 39%, transparent 40%),
    linear-gradient(242deg, transparent 0 22%, #202020 23% 39%, transparent 40%),
    linear-gradient(180deg, #4b3327 0 30%, #d9c6a5 31% 72%, #8d6f4e 73%);
  --art-camera:
    radial-gradient(circle at 60% 48%, #0b0b0a 0 15%, #d7ff36 16% 22%, #111 23% 32%, transparent 33%),
    radial-gradient(circle at 24% 30%, #f4ead9 0 7%, transparent 8%),
    linear-gradient(180deg, #353535 0 28%, #111 29% 72%, #2f2f2f 73%);
  --art-homeware:
    radial-gradient(ellipse at 50% 54%, #f7f1e3 0 28%, #b84a2b 29% 35%, transparent 36%),
    radial-gradient(ellipse at 50% 69%, #e8dfca 0 34%, transparent 35%),
    linear-gradient(135deg, #2f4f45, #f4ead9 52%, #b84a2b);
  --art-tool:
    linear-gradient(140deg, transparent 0 34%, #111 35% 47%, transparent 48%),
    radial-gradient(circle at 68% 38%, #111 0 11%, transparent 12%),
    linear-gradient(180deg, #d7ff36 0 28%, #555 29% 55%, #202020 56%);
  --art-cardbox:
    radial-gradient(circle at 50% 34%, #fff 0 12%, #ef233c 13% 28%, transparent 29%),
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 35%),
    linear-gradient(180deg, #5d2fb8 0 18%, #ff4f1f 19% 48%, #f4ead9 49% 78%, #d7ff36 79%);
  --art-book:
    linear-gradient(90deg, #111 0 9%, transparent 10%),
    linear-gradient(180deg, #724024 0 18%, #e9dac1 19% 26%, #8b1f24 27% 76%, #d7ff36 77%);
}
.art-jacket { background: var(--art-jacket); }
.art-camera { background: var(--art-camera); }
.art-homeware { background: var(--art-homeware); }
.art-tool { background: var(--art-tool); }
.art-cardbox { background: var(--art-cardbox); }
.art-book { background: var(--art-book); }
.art-jacket { background: url("assets/item-clothing-lot.jpg") center/cover; }
.art-camera { background: url("assets/item-film-camera.jpg") center/cover; }
.art-homeware { background: url("assets/item-pyrex-bowl.jpg") center/cover; }
.art-tool { background: url("assets/item-drill-kit.jpg") center/cover; }
.art-cardbox { background: url("assets/item-booster-box.jpg") center/cover; }
.art-book { background: url("assets/item-book-lot.jpg") center/cover; }

.inventory-section {
  position: relative;
  z-index: 6;
  background: #f4ead9;
  color: #111;
  padding: 92px clamp(28px, 4vw, 72px);
  border-top: 1px solid rgba(0,0,0,.14);
}
.inventory-section .section-kicker { color: #111; }
.inventory-section .section-title { color: #111; max-width: 1060px; }
.inventory-section .section-lead { color: rgba(0,0,0,.66); }
.inventory-layout {
  max-width: 1540px;
  margin: 42px auto 0;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items: stretch;
}
.inventory-layout > * { min-width: 0; }
.inventory-showcase {
  width: 100%;
  max-width: 1540px;
  margin: 42px auto 0;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  align-items: stretch;
}
.inventory-showcase > * { min-width: 0; }
.photo-board {
  margin: 0;
  max-width: 100%;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.14);
  background: #111;
  box-shadow: 0 24px 70px rgba(0,0,0,.14);
}
.photo-board img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
}
.inventory-proof-card {
  width: 100%;
  border-radius: 8px;
  background: #111;
  color: #f4ead9;
  padding: 30px;
  border: 1px solid rgba(0,0,0,.16);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inventory-proof-card span {
  color: #d7ff36;
  font: 900 12px/1 "Space Mono";
  text-transform: uppercase;
  letter-spacing: .08em;
}
.inventory-proof-card h3 {
  margin: 20px 0 12px;
  font-family: "Bebas Neue";
  font-size: clamp(44px, 4vw, 72px);
  line-height: .9;
}
.inventory-proof-card p {
  color: rgba(244,234,217,.72);
  line-height: 1.55;
  overflow-wrap: break-word;
}
.inventory-proof-card ul {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.inventory-proof-card li {
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(244,234,217,.78);
}
.item-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.item-gallery article {
  min-height: 168px;
  padding: 14px;
  border-radius: 8px;
  background: #fffaf0;
  border: 1px solid rgba(0,0,0,.12);
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  align-items: center;
}
.item-art {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.item-gallery b {
  display: block;
  margin: 0 0 6px;
  font: 900 14px/1.1 "Space Mono";
  text-transform: uppercase;
}
.item-gallery small { color: rgba(0,0,0,.58); font-weight: 700; }
.ledger-card {
  min-height: 100%;
  padding: 22px;
  border-radius: 8px;
  background: #111;
  color: #f4ead9;
  border: 1px solid rgba(0,0,0,.18);
}
.ledger-head,
.ledger-stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.ledger-head {
  color: rgba(244,234,217,.62);
  font: 900 12px/1 "Space Mono";
  text-transform: uppercase;
}
.ledger-head b { color: #d7ff36; }
.ledger-product {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 42px;
}
.ledger-product .item-art { aspect-ratio: 1; }
.ledger-product h3 {
  margin: 0;
  font-family: "Bebas Neue";
  font-size: 48px;
  line-height: .94;
}
.ledger-product p { color: rgba(244,234,217,.66); line-height: 1.4; }
.ledger-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 34px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  overflow: hidden;
}
.ledger-stats span { padding: 18px; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.ledger-stats span:nth-child(2n) { border-right: 0; }
.ledger-stats span:nth-child(n+3) { border-bottom: 0; }
.ledger-stats small { display: block; color: rgba(244,234,217,.5); font: 900 11px/1 "Space Mono"; text-transform: uppercase; }
.ledger-stats b { display: block; margin-top: 8px; color: #d7ff36; font: 900 24px/1 "Space Mono"; }

.mixed-stack {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mixed-stack .product-shot {
  min-height: 190px;
  background-size: cover;
  clip-path: none;
  border-radius: 8px;
}
.photo-strip {
  min-height: 330px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(rgba(215,255,54,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215,255,54,.04) 1px, transparent 1px),
    #10100f;
  background-size: 36px 36px;
}
.photo-strip img {
  width: 100%;
  height: 245px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.seller-proof {
  background: #f4ead9;
  color: #111;
}
.seller-proof .section-kicker,
.seller-proof .section-title { color: #111; }
.seller-proof .section-lead { color: rgba(0,0,0,.66); }
.seller-proof .seller-card {
  background:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px),
    #fffaf0;
  border-color: rgba(0,0,0,.12);
}
.seller-proof .seller-screen {
  position: relative;
  right: auto;
  top: auto;
  width: 100%;
  height: 230px;
  margin-bottom: 22px;
  opacity: .92;
}
.seller-proof .seller-card p { color: rgba(0,0,0,.68); }
.seller-proof .trend-list {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin-top: 24px;
}
.seller-proof .trend-list div {
  background: #111;
  color: #f4ead9;
  border-color: rgba(0,0,0,.12);
}
.seller-proof .workflow article {
  background: #fffaf0;
  border-color: rgba(0,0,0,.12);
  color: #111;
}
.seller-proof .workflow p { color: rgba(0,0,0,.64); }
.seller-proof .workflow span { border-color: #111; color: #111; }

.feature-section {
  background: #0b0b0a;
}
.feature-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 20px;
  margin-top: 42px;
  align-items: stretch;
}
.feature-list {
  display: grid;
  gap: 10px;
}
.feature-list article {
  padding: 18px;
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
}
.feature-list span {
  color: #d7ff36;
  font: 900 12px/1 "Space Mono";
}
.feature-list h3 {
  margin: 10px 0 6px;
  font-size: 20px;
  letter-spacing: -.03em;
}
.feature-list p {
  margin: 0;
  color: rgba(244,234,217,.64);
  line-height: 1.45;
}
.feature-screen {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: #070707;
}
.feature-screen img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center top;
}
.price-card {
  display: flex;
  flex-direction: column;
}
.price-card ul {
  display: grid;
  gap: 11px;
  margin: 4px 0 24px;
  padding: 0;
  list-style: none;
  color: rgba(244,234,217,.72);
  line-height: 1.35;
}
.price-card.featured ul { color: rgba(0,0,0,.72); }
.price-card li {
  position: relative;
  padding-left: 22px;
}
.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #d7ff36;
}
.price-card.featured li::before { background: #111; }
.price-card a { margin-top: auto; }

@media (max-width: 1180px) {
  .inventory-layout,
  .inventory-showcase,
  .feature-layout { grid-template-columns: 1fr; }
  .feature-screen img { min-height: auto; aspect-ratio: 14 / 9; }
}
@media (max-width: 820px) {
  .item-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-product { grid-template-columns: 1fr; }
  .mixed-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: auto; }
  .photo-strip img { height: 180px; }
  .screen-thumb { display: none; }
}
@media (max-width: 500px) {
  .inventory-section { padding: 72px 20px; overflow: hidden; }
  .inventory-section .section-title {
    max-width: 330px;
    font-size: 34px;
    line-height: 1;
  }
  .inventory-section .section-lead {
    max-width: 330px;
    font-size: 16px;
    overflow-wrap: break-word;
  }
  .item-gallery { grid-template-columns: 1fr; }
  .item-gallery article,
  .ledger-card {
    min-width: 0;
    max-width: calc(100vw - 40px);
  }
  .photo-board img { min-height: 300px; }
  .photo-board {
    display: block;
    width: 100%;
  }
  .photo-board img {
    min-height: 0;
    object-fit: contain;
  }
  .inventory-proof-card { padding: 22px; }
  .inventory-proof-card,
  .inventory-proof-card * {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .inventory-proof-card p {
    max-width: 285px;
  }
  .inventory-proof-card h3 { font-size: 38px; }
  .item-gallery article { min-height: auto; }
  .item-gallery article {
    grid-template-columns: 78px 1fr;
    min-height: 112px;
  }
  .item-art { aspect-ratio: 1; }
  .ledger-product h3 { font-size: 38px; }
  .ledger-head {
    display: grid;
    gap: 10px;
  }
  .ledger-stats { grid-template-columns: 1fr; }
  .ledger-stats span { border-right: 0; }
  .ledger-stats span:nth-child(n+3) { border-bottom: 1px solid rgba(255,255,255,.12); }
  .ledger-stats span:last-child { border-bottom: 0; }
}