:root { --ink:#171321; --paper:#fffaf3; --purple:#6c35ff; --yellow:#ffd84d; --pink:#ff6db5; --line:rgba(23,19,33,.14); --shadow:0 18px 50px rgba(55,22,20,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:linear-gradient(155deg,#fff3d8 0%,var(--paper) 38%,#ffe7d8 100%); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; -webkit-tap-highlight-color:transparent; }
img { display:block; max-width:100%; }
[hidden] { display:none!important; }
.site { overflow:hidden; }
main { width:min(1040px,calc(100% - 40px)); margin-inline:auto; }

.gate { min-height:100vh; display:grid; place-items:center; padding:24px; }
.gate-card { max-width:430px; text-align:center; }
.gate-mark { display:inline-grid; place-items:center; width:64px; height:64px; border-radius:20px; background:var(--purple); color:white; box-shadow:7px 7px 0 var(--yellow); font-size:22px; font-weight:900; transform:rotate(-6deg); }
.gate h1 { margin:28px 0 10px; font-size:clamp(28px,6vw,42px); letter-spacing:-.04em; }
.gate p { color:#706a78; line-height:1.6; }

.hero { position:relative; padding:24px 40px 28px; overflow:hidden; border-radius:0 0 30px 30px; background:linear-gradient(125deg,#ff4d25 0%,#ff7a1a 42%,#ffb11f 72%,#ffdf52 100%); box-shadow:var(--shadow); }
.hero-copy,.hero-showcase { position:relative; z-index:2; }
.hero-copy { margin:16px 0; }
.primary-cta { position:relative; min-height:54px; padding:10px 11px 10px 22px; display:inline-flex; align-items:center; justify-content:center; gap:20px; overflow:hidden; border:2px solid rgba(255,255,255,.7); border-radius:999px; background:linear-gradient(120deg,#27123f,#15101d); color:white; box-shadow:0 10px 24px rgba(73,22,0,.25),inset 0 1px 0 rgba(255,255,255,.2); font-weight:900; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; animation:cta-pulse 2.4s ease-in-out infinite; }
.primary-cta::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 48%,transparent 72%); transform:translateX(-120%); animation:cta-shine 2.4s ease-in-out infinite; }
.primary-cta:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(73,22,0,.3),inset 0 1px 0 rgba(255,255,255,.2); }
.hero .primary-cta { width:fit-content; min-height:76px; justify-content:space-between; padding:10px 12px 10px 22px; }
.cta-sale { position:relative; z-index:1; min-width:0; line-height:1; }
.cta-sale b { display:block; overflow:hidden; font-size:clamp(39px,4.2vw,55px); letter-spacing:-.065em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.cta-arrow { position:relative; z-index:1; flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; padding-bottom:2px; border-radius:50%; background:linear-gradient(145deg,#fff36a,#ffb31f); color:var(--ink); font-size:20px; line-height:1; }
.discount-line { margin:15px 0 0; padding:0 12px 0 22px; font-size:30px; line-height:1; font-weight:950; letter-spacing:.045em; }
.discount-line em { margin-left:7px; font-size:8px; font-style:normal; letter-spacing:.1em; text-transform:uppercase; opacity:.65; }

.hero-showcase { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:8px; border:1px solid rgba(255,255,255,.55); border-radius:18px; background:rgba(255,255,255,.22); backdrop-filter:blur(8px); }
.showcase-item { min-width:0; padding:7px; display:grid; grid-template-columns:78px minmax(0,1fr) auto; align-items:center; gap:8px; border:2px solid rgba(23,19,33,.14); border-radius:14px; background:rgba(255,255,255,.94); color:var(--ink); box-shadow:3px 4px 0 rgba(111,35,0,.16); text-decoration:none; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.showcase-item:hover { transform:translateY(-3px); border-color:var(--ink); box-shadow:4px 6px 0 rgba(111,35,0,.2); }
.showcase-item img { width:78px; height:72px; border-radius:10px; background:linear-gradient(145deg,#fff9dd,#ffd5a0); object-fit:contain; mix-blend-mode:multiply; }
.showcase-item span { display:block; min-width:0; padding:2px; }
.showcase-item small { display:block; color:#d53c10; font-size:7px; font-weight:950; letter-spacing:.1em; }
.showcase-item b { display:block; margin-top:2px; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.showcase-item>i { display:flex; align-items:center; justify-content:center; padding:7px 9px; border-radius:999px; background:var(--ink); color:white; font-size:8px; font-style:normal; font-weight:900; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.shape { position:absolute; display:block; border-radius:50%; pointer-events:none; }
.shape-one { width:240px; height:240px; top:-155px; right:28%; background:rgba(255,255,255,.22); }
.shape-two { width:170px; height:170px; bottom:-100px; left:43%; border:34px solid rgba(255,255,255,.28); }

.collection { scroll-margin-top:20px; }
.feature-collection,.split-collections,.sports-collection { margin-top:26px; }
.collection-head { margin-bottom:10px; padding-inline:4px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.collection-head h2 { margin:3px 0 0; font-size:24px; line-height:1; letter-spacing:-.04em; }
.collection-head>p { display:none; }
.section-kicker { color:#6d6673; font-size:10px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.section-kicker.purple { color:var(--purple); }
.text-link { font-size:12px; font-weight:900; text-underline-offset:4px; white-space:nowrap; }
.product-grid,.split-collections { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mini-collection { padding:0; background:transparent; }
.product-card { min-height:118px; display:grid; grid-template-columns:112px minmax(0,1fr); overflow:hidden; border:0; border-bottom:1px solid var(--line); background:rgba(255,255,255,.48); transition:background .18s ease; }
.product-card:hover { background:rgba(255,255,255,.82); }
.product-image { position:relative; min-height:118px; height:100%; padding:8px; display:grid; place-items:center; overflow:hidden; }
.product-image::before { content:""; position:absolute; width:88px; height:88px; border-radius:50%; background:rgba(255,255,255,.55); }
.product-image img { position:relative; z-index:1; width:100%; height:102px; object-fit:contain; mix-blend-mode:multiply; }
.card-yellow .product-image { background:#ffe884; }
.card-pink .product-image { background:#ffb5d8; }
.compact .product-image { background:#bff0df; }
.mini-collection.blue .product-image { background:#b9e5ff; }
.card-lilac .product-image { background:#d8c9ff; }
.card-orange .product-image { background:#ffb36e; }
.badge { position:absolute; z-index:2; top:6px; left:6px; padding:5px 6px; border:1px solid rgba(0,0,0,.14); border-radius:6px; background:white; box-shadow:2px 2px 0 rgba(0,0,0,.12); font-size:7px; font-weight:950; letter-spacing:.08em; }
.badge.dark { background:var(--ink); color:white; }
.product-body { min-width:0; padding:12px 13px; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto 1fr; align-items:center; column-gap:12px; }
.shop-name { grid-column:1; color:#716b76; font-size:8px; font-weight:900; letter-spacing:.14em; }
.product-body h3 { grid-column:1; margin:3px 0 0; font-size:15px; line-height:1.15; letter-spacing:-.025em; }
.product-body p { display:none; }
.card-cta { grid-column:2; grid-row:1/span 2; align-self:center; display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:999px; background:var(--ink); color:white; font-size:10px; font-weight:900; text-decoration:none; white-space:nowrap; }
.card-cta:hover { background:var(--purple); }
.card-cta span { display:grid; place-items:center; width:22px; height:22px; }
.card-cta svg { display:block; width:16px; height:16px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.final-cta { position:relative; margin:36px 0 0; padding:30px 34px; display:flex; align-items:center; justify-content:space-between; gap:30px; overflow:hidden; border-radius:24px; background:var(--ink); color:white; }
.final-cta h2 { margin:7px 0 0; font-size:clamp(29px,3.5vw,42px); line-height:1; letter-spacing:-.05em; }
.final-cta .section-kicker { color:var(--yellow); }
.primary-cta.light { background:linear-gradient(145deg,#fffef8,#ffeab0); color:var(--ink); border-color:white; box-shadow:5px 5px 0 var(--pink),0 10px 24px rgba(0,0,0,.2); white-space:nowrap; }
.primary-cta.light .cta-arrow { background:linear-gradient(145deg,#ff805b,#ffb320); }
.spark { position:absolute; right:43%; top:-27px; color:var(--yellow); font-size:100px; opacity:.18; pointer-events:none; }

@keyframes cta-shine { 0%,45%{transform:translateX(-120%)} 75%,100%{transform:translateX(120%)} }
@keyframes cta-pulse { 0%,100%{box-shadow:0 10px 24px rgba(73,22,0,.25),0 0 0 0 rgba(255,255,255,.38)} 50%{box-shadow:0 12px 27px rgba(73,22,0,.32),0 0 0 7px rgba(255,255,255,0)} }

@media (max-width:820px) {
  main { width:100%; }
  .hero { padding:max(14px,env(safe-area-inset-top)) 14px 18px; border-radius:0 0 25px 25px; }
  .hero-copy { margin:13px 0; }
  .hero .primary-cta { width:100%; min-height:68px; padding:8px 9px 8px 15px; }
  .cta-sale b { font-size:clamp(25px,7.5vw,36px); letter-spacing:-.075em; }
  .hero .cta-arrow { width:30px; height:30px; font-size:17px; }
  .discount-line { margin-top:13px; padding:0 9px 0 15px; font-size:clamp(21px,6.5vw,29px); }
  .hero-showcase { padding:6px; gap:6px; }
  .showcase-item { padding:5px; grid-template-columns:52px minmax(0,1fr); grid-template-rows:auto auto; gap:5px; }
  .showcase-item img { grid-row:1 / span 2; width:52px; height:54px; }
  .showcase-item span { padding:4px 5px; }
  .showcase-item>i { grid-column:2; padding:5px 6px; font-size:7px; }
  .shape-one { right:-130px; }
  .feature-collection,.split-collections,.sports-collection { width:calc(100% - 24px); margin:22px auto 0; }
  .collection-head { margin-bottom:8px; padding-inline:2px; align-items:flex-start; }
  .collection-head h2 { margin-top:2px; font-size:21px; line-height:1.05; }
  .section-kicker { font-size:9px; }
  .product-grid,.split-collections { grid-template-columns:1fr; }
  .product-card { min-height:104px; grid-template-columns:92px minmax(0,1fr); }
  .product-image { min-height:104px; padding:6px; }
  .product-image img { height:90px; }
  .product-body { padding:10px; column-gap:8px; }
  .product-body h3 { font-size:13px; }
  .card-cta { padding:8px; font-size:0; }
  .final-cta { width:calc(100% - 24px); margin:28px auto 0; padding:28px 22px; display:block; }
  .final-cta .primary-cta { width:100%; margin-top:24px; }
}

@media (max-width:390px) {
  .hero { padding-inline:10px; }
  .cta-sale b { font-size:clamp(23px,7.4vw,29px); }
  .discount-line { padding-left:15px; }
  .showcase-item { grid-template-columns:45px minmax(0,1fr); }
  .showcase-item img { width:45px; height:48px; }
  .showcase-item b { font-size:10px; }
  .text-link { font-size:10px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
  .primary-cta,.primary-cta::before { animation:none!important; }
}
