:root { color-scheme: light; }
.marketplace-home { --ink: #18054f; --purple: #6132df; --purple-2: #8b60f3; --glass: rgba(255,255,255,.57); min-height: 100svh; margin: 0; overflow-x: hidden; color: var(--ink); background: #e7ddff; font-family: "DM Sans", sans-serif; }
.marketplace-home *, .marketplace-home *::before, .marketplace-home *::after { box-sizing: border-box; }
.marketplace-art { position: fixed; z-index: -3; inset: 0; background: #e7ddff url("../images/home/violet-marketplace-hero.png") center top / max(100vw, 520px) auto no-repeat; }
.marketplace-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,248,255,.12), rgba(242,235,255,.14) 38%, rgba(239,228,255,.78) 74%, #e8deff 100%); }
.marketplace-page { width: min(100%, 530px); min-height: 100svh; margin: 0 auto; padding: clamp(26px, 6vw, 45px) clamp(20px, 6vw, 43px) 24px; overflow: hidden; position: relative; isolation: isolate; }
.marketplace-page::before { content: ""; position: absolute; z-index: -1; top: 0; left: -20%; width: 140%; height: 100%; opacity: .45; background: linear-gradient(108deg, transparent 2%, rgba(255,255,255,.78) 2.15% 2.35%, transparent 2.5% 96%, rgba(255,255,255,.72) 96.15% 96.35%, transparent 96.5%), radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.78), transparent 27%); pointer-events: none; }
.marketplace-brand { display: grid; justify-items: center; color: #5828d9; animation: brand-drift 5.4s ease-in-out infinite; }
.marketplace-mark { width: clamp(65px, 17vw, 90px); line-height: 0; filter: drop-shadow(0 5px 9px rgba(93,46,220,.25)); }.marketplace-mark svg { width: 100%; height: auto; }
.marketplace-name { margin-top: -3px; color: #5220ae; font-family: "Playfair Display", Georgia, serif; font-size: clamp(28px, 7.5vw, 39px); font-weight: 600; letter-spacing: -.06em; line-height: 1; text-shadow: 0 2px 13px rgba(255,255,255,.9); }.marketplace-name span { color: #13094e; }
.marketplace-hero { position: relative; padding-top: 3px; text-align: center; }.hero-illustration { width: min(100%, 440px); height: clamp(204px, 34vw, 292px); margin: 5px auto -5px; position: relative; background: url("../images/home/violet-marketplace-hero.png") center 28% / 100% auto no-repeat; mix-blend-mode: multiply; opacity: .94; mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 72%, transparent 100%); }.hero-glow { position: absolute; inset: 17% 9% 13%; border: 1px solid rgba(255,255,255,.77); border-radius: 50%; box-shadow: 0 0 19px rgba(136,86,255,.47), inset 0 0 14px rgba(255,255,255,.42); transform: rotate(-7deg); animation: hero-orbit 10s linear infinite; }
.marketplace-hero h1, .marketplace-section h2, .journey-cta h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 600; letter-spacing: -.056em; }.marketplace-hero h1 { max-width: 440px; margin: 0 auto; color: #13064d; font-size: clamp(28px, 7.5vw, 41px); line-height: .98; }.marketplace-hero h1 em, .marketplace-section h2 em, .journey-cta h2 em { color: #7043dc; font-style: normal; }.marketplace-hero p { max-width: 355px; margin: 10px auto 16px; color: #6655a0; font-size: clamp(14px, 3.8vw, 18px); font-weight: 500; line-height: 1.26; }
.hero-promises { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.hero-promises span { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px; border: 1.5px solid rgba(255,255,255,.9); border-radius: 19px; color: #352075; background: var(--glass); box-shadow: 0 7px 16px rgba(91,55,179,.13), inset 0 1px 5px rgba(255,255,255,.75); font-size: clamp(12px, 3.2vw, 15px); font-weight: 700; }.hero-promises i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #6f41e5; background: rgba(255,255,255,.52); box-shadow: 0 3px 9px rgba(86,44,193,.14); font-size: 19px; }
.hero-actions { display: grid; gap: 10px; margin-top: 12px; }.hero-actions a { min-height: 55px; display: grid; place-items: center; border-radius: 999px; font-size: clamp(18px, 5vw, 23px); font-weight: 700; text-decoration: none; transition: transform .2s ease, filter .2s ease; }.hero-actions a:hover { transform: translateY(-2px); filter: brightness(1.07); }.action-primary { border: 2px solid rgba(255,255,255,.88); color: #fff; background: linear-gradient(105deg, #4e25cd, #8b58ed 54%, #5829d4); box-shadow: 0 9px 17px rgba(78,38,187,.25), 0 0 15px rgba(178,143,255,.6), inset 0 2px 2px rgba(255,255,255,.6); }.action-secondary { border: 1.5px solid rgba(255,255,255,.92); color: #5b2cda; background: rgba(255,255,255,.58); box-shadow: 0 7px 15px rgba(91,55,179,.11), inset 0 1px 5px rgba(255,255,255,.8); }
.marketplace-section { position: relative; margin-top: clamp(29px, 7vw, 42px); }.marketplace-section h2 { display: flex; align-items: center; gap: 13px; justify-content: center; color: #16064d; font-size: clamp(22px, 5.6vw, 29px); line-height: 1.06; text-align: center; }.marketplace-section h2::before, .marketplace-section h2::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #7953e6); }.marketplace-section h2::after { background: linear-gradient(90deg, #7953e6, transparent); }
.numbers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 16px; }.numbers-grid article { min-height: 88px; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1.5px solid rgba(255,255,255,.9); border-radius: 20px; background: var(--glass); box-shadow: 0 7px 15px rgba(88,54,174,.11), inset 0 1px 6px rgba(255,255,255,.85); }.numbers-grid article > i { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border-radius: 50%; color: #7042e3; background: rgba(255,255,255,.58); box-shadow: 0 2px 9px rgba(89,49,203,.17); font-size: 20px; }.numbers-grid div { min-width: 0; padding-left: 9px; border-left: 1px solid rgba(93,56,189,.26); }.numbers-grid strong, .numbers-grid span { display: block; }.numbers-grid strong { color: #5524d3; font-size: clamp(17px, 4.4vw, 22px); line-height: 1.05; white-space: nowrap; }.numbers-grid span { margin-top: 4px; color: #5e4f96; font-size: clamp(10px, 2.7vw, 13px); line-height: 1.1; }
.reward-list { display: grid; gap: 12px; margin-top: 16px; }.reward-card { min-height: 192px; position: relative; display: flex; align-items: center; overflow: hidden; padding: 17px; border: 1.5px solid rgba(255,255,255,.9); border-radius: 25px; background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(219,202,255,.56)); box-shadow: 0 9px 19px rgba(79,44,174,.14), inset 0 1px 9px rgba(255,255,255,.9); }.reward-card::before { content: ""; position: absolute; inset: 0; opacity: .33; background: repeating-linear-gradient(135deg, transparent 0 24px, rgba(255,255,255,.45) 25px 26px); pointer-events: none; }.reward-copy { position: relative; z-index: 3; width: 53%; }.reward-copy h3 { margin: 0; color: #13064d; font-family: "Playfair Display", Georgia, serif; font-size: clamp(25px, 6.6vw, 33px); line-height: .95; letter-spacing: -.06em; }.reward-copy p { margin: 7px 0; color: #5d4b9b; font-size: clamp(12px, 3.25vw, 15px); line-height: 1.13; }.reward-copy p strong { display: block; color: #4922c6; font-family: "Playfair Display", Georgia, serif; font-size: clamp(25px, 6.7vw, 34px); line-height: 1; }.reward-copy > span { min-width: 122px; display: inline-grid; min-height: 30px; place-items: center; margin-bottom: 9px; padding: 4px 12px; border: 1px solid rgba(255,255,255,.75); border-radius: 999px; color: #4320b9; background: rgba(255,255,255,.51); box-shadow: inset 0 1px 4px rgba(255,255,255,.8); font-size: 12px; font-weight: 700; }.reward-copy a { width: min(100%, 197px); min-height: 40px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.9); border-radius: 999px; color: #fff; background: linear-gradient(105deg, #4e25cd, #8956ed 55%, #5729d4); box-shadow: 0 6px 12px rgba(72,33,182,.22), inset 0 1px 2px rgba(255,255,255,.64); font-size: 16px; font-weight: 700; text-decoration: none; transition: transform .2s ease, filter .2s ease; }.reward-copy a:hover { transform: translateY(-1px); filter: brightness(1.08); }
.scratch-ticket { position: absolute; z-index: 2; right: 4%; top: 23px; width: 49%; height: 128px; padding: 13px 12px; overflow: hidden; border: 2px dashed rgba(255,255,255,.83); border-radius: 8px; color: #fff; background: linear-gradient(145deg, #9170eb, #e3dbff 38%, #8866e5); box-shadow: 0 9px 15px rgba(70,32,164,.24), inset 0 0 12px rgba(255,255,255,.65); transform: rotate(-8deg); }.scratch-ticket i { color: #5425ce; font-size: 18px; }.scratch-ticket b { margin-left: 5px; color: #3d1b9c; font-family: "Playfair Display", Georgia, serif; font-size: 12px; }.scratch-ticket strong { position: absolute; left: 23%; right: 10%; bottom: 17px; display: grid; place-items: center; min-height: 48px; color: #2d2460; background: repeating-linear-gradient(135deg, #d6d2e2 0 4px, #f1f1f4 4px 8px); font-size: 16px; line-height: .94; text-align: center; transform: rotate(4deg); }.ticket-glint { position: absolute; width: 60%; height: 180%; top: -40%; left: 15%; background: linear-gradient(105deg, transparent 43%, rgba(255,255,255,.77) 49%, transparent 56%); animation: ticket-shimmer 4.6s ease-in-out infinite; }.reward-gift, .reward-coins, .reward-star { position: absolute; z-index: 2; color: #8b4ce9; text-shadow: 0 2px 6px rgba(255,255,255,.9); }.reward-gift { right: 9%; bottom: 11px; font-size: 32px; transform: rotate(10deg); }.reward-coins { right: 43%; top: 13px; color: #e6aa26; font-size: 24px; transform: rotate(-20deg); }.reward-star { right: 43%; top: 16px; color: #f0b62e; font-size: 23px; animation: reward-twinkle 2.4s ease-in-out infinite alternate; }
.spinner-reward { min-height: 204px; }.spinner-reward .reward-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }.spinner-reward .reward-copy h3 { font-size: clamp(24px, 6.2vw, 31px); }.spinner-reward .reward-copy p { margin-bottom: 10px; }.reward-wheel { position: absolute; z-index: 2; right: 4%; top: 13px; width: 159px; height: 159px; border: 6px solid rgba(255,255,255,.9); border-radius: 50%; background: conic-gradient(#a780ff 0 60deg, #e9e1ff 60deg 120deg, #8560ec 120deg 180deg, #eee9ff 180deg 240deg, #9a72ef 240deg 300deg, #e7dfff 300deg 360deg); box-shadow: 0 0 0 3px rgba(103,52,212,.28), 0 9px 16px rgba(69,31,160,.24), inset 0 0 18px rgba(255,255,255,.5); animation: wheel-drift 7s ease-in-out infinite; }.reward-wheel::before { content: ""; position: absolute; inset: 24%; border-radius: 50%; background: #f9f7ff; box-shadow: 0 0 0 2px rgba(103,52,212,.23); }.reward-wheel i { position: absolute; z-index: 1; inset: 36%; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 25%, #a677ff, #5422cf); box-shadow: 0 0 14px rgba(85,36,201,.67), inset 0 1px 3px rgba(255,255,255,.66); font-size: 13px; font-style: normal; font-weight: 800; }.reward-wheel b { position: absolute; z-index: 1; color: #40218d; font-size: 9px; line-height: 1; text-align: center; }.reward-wheel b:nth-of-type(1) { top: 13px; left: 60px; }.reward-wheel b:nth-of-type(2) { top: 42px; right: 11px; }.reward-wheel b:nth-of-type(3) { bottom: 39px; right: 7px; }.reward-wheel b:nth-of-type(4) { bottom: 12px; left: 58px; }.reward-wheel b:nth-of-type(5) { bottom: 39px; left: 11px; }.reward-wheel b:nth-of-type(6) { top: 42px; left: 18px; font-size: 14px; }.spinner-reward .reward-star { right: 14px; top: 18px; }
.reason-list { display: grid; gap: 10px; margin-top: 16px; }.reason-list article { min-height: 73px; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 1.5px solid rgba(255,255,255,.92); border-radius: 19px; background: rgba(255,255,255,.55); box-shadow: 0 6px 15px rgba(88,54,174,.1), inset 0 1px 5px rgba(255,255,255,.8); }.reason-list article > i { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border-radius: 50%; color: #7344e9; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(224,207,255,.72)); font-size: 21px; }.reason-list div { min-width: 0; flex: 1; }.reason-list strong, .reason-list span { display: block; }.reason-list strong { color: #21115e; font-size: clamp(14px, 3.9vw, 18px); line-height: 1.1; }.reason-list span { margin-top: 3px; color: #62549b; font-size: clamp(11px, 3.1vw, 14px); }.reason-list b { color: #7545e7; font-size: 34px; font-weight: 400; line-height: 1; }
.steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; margin-top: 17px; }.steps article { min-width: 0; min-height: 93px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; align-items: center; column-gap: 6px; padding: 10px 7px; border: 1.5px solid rgba(255,255,255,.92); border-radius: 19px; color: #5c2bdb; background: rgba(255,255,255,.58); box-shadow: 0 6px 14px rgba(88,54,174,.11), inset 0 1px 5px rgba(255,255,255,.83); }.steps article strong { font-size: clamp(18px, 5vw, 26px); line-height: 1; }.steps article i { padding-left: 6px; border-left: 1px solid rgba(92,52,189,.32); font-size: 23px; }.steps article span { grid-column: 1 / -1; color: #453078; font-size: clamp(9px, 2.5vw, 12px); line-height: 1.1; text-align: center; }.steps > b { color: #fff; font-size: 23px; text-shadow: 0 1px 8px #7344e9; }
.journey-cta { position: relative; margin-top: clamp(31px, 8vw, 45px); padding: 25px 20px 19px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.92); border-radius: 27px; text-align: center; background: linear-gradient(135deg, rgba(255,255,255,.56), rgba(212,190,255,.47)); box-shadow: 0 9px 21px rgba(84,47,177,.16), inset 0 1px 10px rgba(255,255,255,.85); }.journey-cta::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url("../images/home/violet-marketplace-hero.png") right bottom / 150% auto no-repeat; opacity: .36; mix-blend-mode: multiply; }.journey-cta h2 { color: #16064d; font-size: clamp(22px, 5.8vw, 30px); line-height: 1.1; }.journey-cta a { width: min(100%, 230px); min-height: 51px; margin: 19px auto 0; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.88); border-radius: 999px; color: #fff; background: linear-gradient(105deg, #4e25cd, #8b58ed 54%, #5829d4); box-shadow: 0 7px 14px rgba(78,38,187,.26), inset 0 2px 2px rgba(255,255,255,.6); font-size: 22px; font-weight: 700; text-decoration: none; }.cta-trend { position: absolute; right: 17px; bottom: 18px; color: #8d60ed; font-size: 45px; opacity: .7; transform: rotate(-8deg); }
.marketplace-page footer { margin: 24px 0 2px; color: #635394; font-size: 12px; text-align: center; }
@keyframes brand-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes hero-orbit { to { transform: rotate(353deg); } } @keyframes ticket-shimmer { 0%, 35% { transform: translateX(-125%) rotate(8deg); } 64%, 100% { transform: translateX(170%) rotate(8deg); } } @keyframes wheel-drift { 0%,100% { transform: rotate(-4deg) scale(.98); } 50% { transform: rotate(7deg) scale(1.03); } } @keyframes reward-twinkle { from { transform: scale(.78) rotate(-12deg); opacity: .55; } to { transform: scale(1.22) rotate(12deg); opacity: 1; } }
@media (min-width: 680px) { .marketplace-home { padding: 24px; }.marketplace-page { border: 1px solid rgba(255,255,255,.72); border-radius: 30px; box-shadow: 0 25px 65px rgba(63,32,138,.25); }.marketplace-art { background-size: 650px auto; } }
@media (max-width: 380px) { .marketplace-page { padding-right: 16px; padding-left: 16px; }.hero-promises span { font-size: 11px; }.numbers-grid article { gap: 7px; padding: 8px; }.numbers-grid article > i { width: 38px; height: 38px; flex-basis: 38px; }.numbers-grid div { padding-left: 6px; }.steps { gap: 3px; }.steps article { padding-right: 4px; padding-left: 4px; }.steps > b { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .marketplace-brand, .hero-glow, .ticket-glint, .reward-wheel, .reward-star { animation: none; } }