:root{
  --indigo:#6366F1; --violet:#A855F7; --pink:#EC4899; --blue:#3B82F6;
  --grad:linear-gradient(120deg,#7C3AED 0%,#6366F1 38%,#EC4899 100%);
  --grad-soft:linear-gradient(120deg,#8B5CF6,#EC4899);
  --ink:#14132A; --muted:#6B688A; --line:#ECEAF6; --bg:#F6F5FC; --card:#fff;
  --green:#10B981; --star:#FBBF24;
  --sh-sm:0 2px 10px rgba(40,30,90,.05); --sh:0 14px 38px rgba(76,29,149,.10); --sh-lg:0 26px 60px rgba(124,58,237,.20);
  --r:18px;
  --hair:rgba(99,102,241,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;background:
    radial-gradient(900px 520px at 100% -8%, rgba(168,85,247,.10), transparent 58%),
    radial-gradient(820px 520px at -8% 4%, rgba(99,102,241,.10), transparent 55%),
    var(--bg);
  color:var(--ink);-webkit-font-smoothing:antialiased;padding-bottom:78px;letter-spacing:-.01em}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1840px;margin:0 auto;padding:0 18px}

/* ===== top utility bar ===== */
.topbar{background:#0B1020;color:#cfcbe8;font-size:11.5px;font-weight:600;letter-spacing:.4px}
.topbar .wrap{display:flex;justify-content:flex-end;gap:22px;align-items:center;height:34px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.topbar .wrap::-webkit-scrollbar{display:none}
.topbar a,.topbar span{color:#cfcbe8;opacity:.85;transition:.15s}
.topbar a:hover{opacity:1;color:#fff}

/* ===== main header (sticky, glassy) ===== */
.mhead{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.80);backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.6), 0 10px 30px -18px rgba(76,29,149,.30)}
.mhead .wrap{display:flex;align-items:center;gap:16px;padding:13px 16px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:22px;flex-shrink:0;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo .mark{width:38px;height:38px;background:var(--grad);border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(124,58,237,.35)}
.logo .mark svg{width:22px;height:22px;color:#fff}
.searchbar{flex:1;display:flex;background:#fff;border:1.5px solid var(--line);border-radius:13px;overflow:hidden;max-width:720px;box-shadow:var(--sh-sm);transition:.2s}
.searchbar:focus-within{border-color:var(--violet);box-shadow:0 0 0 4px rgba(168,85,247,.12)}
.searchbar input{flex:1;border:0;outline:0;padding:12px 16px;font-size:14px;font-family:inherit;color:var(--ink)}
.searchbar input::placeholder{color:#a9a6c2}
.searchbar button{background:var(--grad);border:0;color:#fff;padding:0 22px;cursor:pointer;display:flex;align-items:center;transition:.15s}
.searchbar button:hover{filter:brightness(1.06)}
.searchbar button svg{width:20px;height:20px}
.hicons{display:flex;align-items:center;gap:4px;color:var(--ink)}
.hicons a{position:relative;display:flex;padding:9px;border-radius:11px;transition:.15s;color:#3b3858}
.hicons a:hover{background:#f1effb}
.hicons svg{width:23px;height:23px}
.hicons .badge-count{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--pink);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(236,72,153,.5)}

/* ===== hero ===== */
.hero{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
@media(min-width:920px){.hero{grid-template-columns:1.65fr 1fr}}
.hero-main{background:var(--grad);border-radius:26px;padding:clamp(28px,4vw,48px);position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--sh-lg);color:#fff}
.hero-main::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);top:-120px;right:-90px}
.hero-main::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);bottom:-110px;left:-60px}
.hero-main .glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.45),transparent 70%);top:40%;left:30%;filter:blur(40px);animation:heroFloat 12s ease-in-out infinite}
@keyframes heroFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-24px)}}
.hero-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);color:#fff;font-weight:700;font-size:12px;padding:7px 15px;border-radius:99px;letter-spacing:1.5px;width:max-content;text-transform:uppercase}
.hero-main h1{font-size:clamp(30px,4.4vw,50px);font-weight:800;margin:16px 0 8px;line-height:1.02;letter-spacing:-.03em;position:relative}
.hero-main p{color:rgba(255,255,255,.86);font-weight:500;margin-bottom:26px;font-size:15px;position:relative;max-width:420px}
.hero-main .btn{background:#fff;color:#6D28D9;font-weight:800;padding:14px 32px;border-radius:14px;width:max-content;box-shadow:0 12px 30px rgba(0,0,0,.18);transition:.2s;position:relative;overflow:hidden}
.hero-main .btn:hover{color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.5);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.26)}
.hero-side{display:grid;grid-template-rows:repeat(3,1fr);gap:14px}
.hs-card{border-radius:18px;padding:20px;display:flex;flex-direction:column;justify-content:center;gap:4px;box-shadow:var(--sh);position:relative;overflow:hidden;color:#fff;transition:.2s}
.hs-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.hs-card .hi{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.hs-card .hi svg{width:22px;height:22px;color:#fff}
.hs-card h4{font-size:16px;font-weight:800;letter-spacing:-.02em}
.hs-card span{font-size:12.5px;opacity:.9;font-weight:500}
.hs-1{background:linear-gradient(135deg,#6366F1,#8B5CF6)}
.hs-2{background:linear-gradient(135deg,#EC4899,#F472B6)}
.hs-3{background:linear-gradient(135deg,#7C3AED,#EC4899)}

/* ===== trust strip ===== */
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
@media(min-width:760px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust .t{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-sm);transition:.18s}
.trust .t:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.trust .ti{width:46px;height:46px;border-radius:14px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 8px 18px -6px rgba(124,58,237,.45)}
.trust .ti svg{width:23px;height:23px}
.trust .tt{font-size:14px;font-weight:700;color:var(--ink)}
.trust .ts{font-size:11.5px;color:var(--muted);font-weight:500}

/* ===== section card ===== */
.sec{background:var(--card);border:1px solid var(--line);border-radius:22px;margin-top:18px;overflow:hidden;box-shadow:var(--sh-sm);position:relative}
.sec::before{content:"";position:absolute;top:0;left:22px;right:22px;height:3px;background:var(--grad);border-radius:0 0 6px 6px;opacity:.92}
.sec-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 14px}
.sec-head h2{font-size:22px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:11px;position:relative;padding-left:15px}
.sec-head h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:22px;border-radius:99px;background:var(--grad);box-shadow:0 2px 8px rgba(124,58,237,.4)}
.sec-head h2 .dot{display:none}
.sec-head a{color:#fff;font-weight:700;font-size:12.5px;background:var(--grad);padding:8px 16px;border-radius:99px;display:flex;align-items:center;gap:4px;transition:.18s;box-shadow:0 8px 20px -8px rgba(124,58,237,.6)}
.sec-head a:hover{filter:brightness(1.07);gap:7px;transform:translateY(-1px)}

/* ===== category grid ===== */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:6px 14px 20px}
@media(min-width:620px){.cats{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.cats{grid-template-columns:repeat(8,1fr);gap:12px}}
.cat{display:flex;flex-direction:column;align-items:center;gap:11px;padding:18px 8px;border-radius:18px;transition:.2s;border:1px solid transparent;background:#fff}
.cat:hover{background:#fff;border-color:var(--line);transform:translateY(-4px);box-shadow:var(--sh)}
.cat .ci{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#F3E8FF,#FCE7F3);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(168,85,247,.14), 0 8px 18px -8px rgba(124,58,237,.30);transition:.25s}
.cat:hover .ci{background:var(--grad);box-shadow:0 12px 24px -8px rgba(124,58,237,.55);transform:scale(1.06)}
.cat .ci svg{width:30px;height:30px;color:var(--violet);stroke-width:1.8;transition:.25s}
.cat:hover .ci svg{color:#fff}
.cat span{font-size:12.5px;font-weight:700;text-align:center;color:#3b3858;line-height:1.2;transition:.2s}
.cat:hover span{color:var(--violet)}

/* ===== flash sale row ===== */
/* ===== flash sale — continuous marquee ===== */
.flash-viewport{position:relative;overflow:hidden;padding:4px 0 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.flash-track{display:flex;gap:14px;width:max-content;padding:0 22px;animation:flashMarquee 38s linear infinite;will-change:transform}
.flash-viewport:hover .flash-track{animation-play-state:paused}
@keyframes flashMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.flash-track .fcard{flex:0 0 188px;width:188px;transition:transform .18s}
.flash-track .fcard:hover{transform:translateY(-4px)}
.flash-track .fcard .img{width:188px;height:188px;background:#f7f7f9;border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm);position:relative}
.flash-track .fcard .img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.flash-track .fcard:hover .img img{transform:scale(1.06)}
.flash-track .fcard .badge{position:absolute;top:9px;left:9px;background:var(--grad);color:#fff;font-size:11px;font-weight:800;padding:4px 9px;border-radius:99px;box-shadow:0 4px 12px rgba(124,58,237,.35)}
.flash-track .fcard .price{color:var(--violet);font-weight:800;font-size:16px;margin-top:10px;letter-spacing:-.02em}
.flash-track .fcard .old{color:#b5b5bd;font-size:12px;text-decoration:line-through;margin-left:5px;font-weight:500}
.flash-track .fbar{height:7px;background:#EFE7FB;border-radius:99px;margin-top:9px;overflow:hidden}
.flash-track .fbar i{display:block;height:100%;background:var(--grad);border-radius:99px}
.flash-track .fcard .sold{font-size:11px;color:var(--violet);font-weight:700;margin-top:5px}
@media(prefers-reduced-motion:reduce){.flash-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}}

/* ===== endless feed ===== */
.feed-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;padding:6px 14px 18px}
@media(min-width:600px){.feed-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:800px){.feed-grid{grid-template-columns:repeat(4,1fr);gap:14px;padding:8px 0 20px}}
@media(min-width:1100px){.feed-grid{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1400px){.feed-grid{grid-template-columns:repeat(7,1fr)}}
@media(min-width:1700px){.feed-grid{grid-template-columns:repeat(8,1fr)}}
.feed-sentinel{height:1px}
.feed-status{display:flex;justify-content:center;padding:10px 0 20px;opacity:.0;transition:opacity .3s}
.feed-status.show{opacity:1}
.feed-status .ring{width:22px;height:22px;border-radius:50%;border:2px solid rgba(168,85,247,.18);border-top-color:var(--violet);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.feed-status{display:none}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.2s;position:relative;box-shadow:0 1px 3px rgba(40,30,90,.05),0 10px 26px -16px rgba(76,29,149,.18)}
.pcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);opacity:0;transition:.22s;z-index:3}
.pcard:hover{box-shadow:var(--sh);transform:translateY(-4px);border-color:transparent}
.pcard:hover::before{opacity:1}
.pcard .img{position:relative;width:100%;aspect-ratio:1;background:#f7f7f9;overflow:hidden;border-bottom:1px solid var(--line)}
.pcard .img img{width:100%;height:100%;object-fit:cover;transition:.35s}
.pcard:hover .img img{transform:scale(1.06)}
.disc{position:absolute;top:9px;left:9px;background:var(--grad);color:#fff;font-size:11px;font-weight:800;padding:4px 9px;border-radius:99px;box-shadow:0 4px 12px rgba(124,58,237,.35)}
.pcard .body{padding:12px}
.pcard .name{font-size:13px;color:#2b2a3a;line-height:1.4;height:37px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:600}
.pcard .pr{color:var(--violet);font-weight:800;font-size:17px;margin-top:7px;letter-spacing:-.03em}
.pcard .pr .old{color:#c0c0c8;font-size:12px;font-weight:500;text-decoration:line-through;margin-left:5px}
.pcard .meta{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:11px;color:#9a9aa2}
.stars{display:flex;align-items:center;gap:1.5px;color:var(--star)}
.stars svg{width:13px;height:13px}

/* ===== featured brands — premium monogram chips ===== */
.brand-row{display:flex;gap:14px;overflow-x:auto;padding:6px 22px 24px;scrollbar-width:none}
.brand-row::-webkit-scrollbar{display:none}
.btile{flex:0 0 150px;width:150px;height:108px;border-radius:20px;background:linear-gradient(180deg,#ffffff,#FBF8FF);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;transition:.22s;box-shadow:0 1px 2px rgba(40,30,90,.05),0 10px 26px -16px rgba(76,29,149,.20);overflow:hidden;position:relative}
.btile::after{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.22s}
.btile .mono{width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -6px rgba(124,58,237,.55);transition:.22s}
.btile .bn{font-weight:800;color:#4b3a7a;font-size:13.5px;letter-spacing:.01em;transition:.2s}
.btile .btag{font-size:10px;font-weight:700;color:var(--violet);background:#F3E8FF;padding:3px 9px;border-radius:99px;transition:.2s;margin-top:-2px}
.btile:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 18px 40px -14px rgba(124,58,237,.55)}
.btile:hover::after{opacity:1}
.btile:hover .mono{transform:scale(1.08)}
.btile:hover .bn{color:var(--violet)}

/* ===== bottom nav — floating glass pill on desktop, full-width on mobile ===== */
.bnav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;z-index:30}
.bnav-inner{display:flex;justify-content:space-around;align-items:stretch;width:100%;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:8px 0 max(8px,env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(40,30,90,.06)}
.bnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:#9a9aa2;font-weight:600;flex:1;transition:.15s}
.bnav a svg{width:23px;height:23px}
.bnav a.on{color:var(--violet)}
.bnav a.on svg{filter:drop-shadow(0 3px 7px rgba(168,85,247,.4))}
@media(min-width:768px){
  .bnav{left:50%;transform:translateX(-50%);bottom:18px;width:auto}
  .bnav-inner{width:auto;gap:6px;background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:99px;padding:8px 14px;box-shadow:0 14px 40px -12px rgba(76,29,149,.35);backdrop-filter:blur(20px) saturate(160%)}
  .bnav a{padding:0 18px}
}

.fade{opacity:0;transform:translateY(14px);animation:rise .6s forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fade{animation:none;opacity:1;transform:none}}

/* ===== mobile (phone) — native app feel ===== */
@media(max-width:600px){
  .topbar{display:none}
  .wrap{padding:0 12px}
  body{padding-bottom:84px}
  .mhead .wrap{padding:11px 12px}
  .logo{font-size:19px}
  .logo .mark{width:34px;height:34px;border-radius:10px}
  .hicons a{padding:7px}
  .hero{margin-top:12px;gap:10px}
  .hero-main{border-radius:0 0 24px 24px;min-height:230px;padding:24px 20px}
  .hero-main h1{font-size:30px}
  .hero-side{grid-template-rows:none;grid-template-columns:1fr 1fr;gap:10px}
  .hs-card{padding:14px}
  .hs-card h4{font-size:14px}
  .hs-card span{font-size:11px}
  .hero-side .hs-card:nth-child(3){grid-column:1 / -1}
  .sec{border-radius:20px;margin-top:12px}
  .sec-head{padding:16px 16px 10px}
  .sec-head h2{font-size:18px}
  .trust{margin-top:12px;gap:10px}
  .trust .t{padding:13px;gap:10px}
  .trust .ti{width:38px;height:38px;border-radius:11px}
  .cats{grid-template-columns:repeat(4,1fr);gap:6px;padding:4px 12px 16px}
  .cat{padding:13px 4px}
  .cat .ci{width:52px;height:52px;border-radius:15px}
  .cat span{font-size:11px}
  .flash-viewport{padding:4px 0 18px}
  .flash-track{gap:11px;padding:0 16px}
  .flash-track .fcard{flex:0 0 44vw;width:44vw}
  .flash-track .fcard .img{width:44vw;height:44vw;border-radius:14px}
  .flash-track .fcard .price{font-size:15px}
  .brand-row{padding:4px 16px 18px}
  .btile{flex:0 0 104px;width:104px;height:84px}
  .feed-grid{gap:9px;padding:6px 12px 14px}
  .pcard{border-radius:16px}
  .pcard .body{padding:9px 10px 11px}
  .pcard .name{font-size:12.5px;height:34px}
  .pcard .pr{font-size:15px;margin-top:5px}
  .disc{top:7px;left:7px;font-size:10px;padding:3px 7px}
  .bnav a{font-size:10px}
  .bnav a svg{width:22px;height:22px}
}

/* ===== desktop (large) — premium, airy, high-density ===== */
@media(min-width:1280px){
  .wrap{padding:0 28px}
  .mhead .wrap{padding:14px 28px}
  .hero-main{border-radius:30px;min-height:340px}
  .sec{border-radius:26px;margin-top:22px}
  .sec-head{padding:24px 28px 16px}
  .sec-head h2{font-size:24px}
  .cats{padding:6px 22px 24px;gap:12px}
  .cat .ci{width:68px;height:68px;border-radius:20px}
  .cat .ci svg{width:32px;height:32px}
  .trust{gap:16px;margin-top:20px}
  .trust .t{padding:18px;gap:14px}
  .trust .ti{width:48px;height:48px;border-radius:14px}
  .flash-viewport{padding:6px 0 26px}
  .flash-track{gap:16px;padding:0 28px}
  .flash-track .fcard{flex:0 0 188px;width:188px}
  .flash-track .fcard .img{width:188px;height:188px;border-radius:18px}
  .brand-row{padding:6px 28px 26px;gap:14px}
  .btile{flex:0 0 144px;width:144px;height:100px}
}
@media(min-width:1700px){ .wrap{padding:0 36px} }