/* ============================================================================
   YIWU — Layout: header, hero, mega-menu, mobile nav, footer.
   ============================================================================ */

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar { background: var(--charcoal); color: #cfd5df; font-size: .8rem; }
html.dark .topbar { background: #06080c; }
.topbar .container { display:flex; align-items:center; justify-content:space-between; height: 38px; }
.topbar a { color: #cfd5df; }
.topbar a:hover { color: #fff; }
.topbar .left { display:flex; gap:18px; align-items:center; }
.topbar .right { display:flex; gap:14px; align-items:center; }
.topbar .sep { width:1px; height:14px; background: rgba(255,255,255,.18); }
@media (max-width: 760px){ .topbar .left { display:none; } }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50;
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.site-header.scrolled { box-shadow: var(--shadow-md); }
.header-row { display:flex; align-items:center; gap: 20px; height: var(--header-h); }

.brand { display:flex; align-items:center; gap: 10px; font-weight: 900; font-size: 1.4rem; letter-spacing:-.03em; flex:none; }
.brand .mark { width: 38px; height: 38px; border-radius: 11px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--red-600), var(--red-800)); color:#fff; font-size: 1.1rem; box-shadow: var(--shadow-red); }
.brand .mark svg { width: 22px; height: 22px; }
.brand b { color: var(--text); }
.brand span { color: var(--primary); }

/* Image-based brand logo (extracted from the YIWU brand asset) */
.brand-logo { gap: 0; }
.brand-logo img { height: 40px; width: auto; display: block; }
.site-footer .brand-logo img { height: 42px; }
.drawer .brand-logo img { height: 34px; }
@media (max-width: 480px){ .brand-logo img { height: 34px; } }

/* Search */
.header-search { flex: 1; max-width: 640px; position: relative; }
.header-search form { display:flex; align-items:center; background: var(--surface); border:1.5px solid var(--border);
  border-radius: var(--r-full); padding: 5px 5px 5px 16px; transition: all var(--dur) var(--ease); }
.header-search form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.header-search .cat-select { border:0; background:transparent; color: var(--text-soft); font-weight:600; font-size:.85rem; padding-inline-end: 12px; margin-inline-end: 12px; border-inline-end:1px solid var(--border); outline:none; max-width: 130px; }
.header-search input { flex:1; border:0; background:transparent; color: var(--text); font-size:.95rem; outline:none; min-width: 0; }
.header-search input::placeholder { color: var(--text-muted); }
.header-search .go { width: 42px; height: 42px; border-radius: var(--r-full); background: var(--primary); color:#fff; border:0; display:grid; place-items:center; flex:none; transition: background var(--dur) var(--ease); }
.header-search .go:hover { background: var(--primary-h); }

/* Header actions */
.header-actions { display:flex; align-items:center; gap: 6px; flex:none; }
.icon-btn { width: 42px; height: 42px; border-radius: var(--r-full); display:grid; place-items:center;
  background: transparent; color: var(--text-soft); border:1px solid transparent; position: relative; transition: all var(--dur) var(--ease); }
.icon-btn:hover { background: var(--surface-2); color: var(--primary); }
.icon-btn .dot { position:absolute; top:8px; inset-inline-end:9px; width:8px; height:8px; border-radius:50%; background: var(--primary); border:2px solid var(--glass-bg); }

/* Nav (category bar) */
.nav-bar { border-top: 1px solid var(--border-soft); }
.nav-bar .container { display:flex; align-items:center; gap: 4px; height: 50px; overflow-x: auto; scrollbar-width:none; }
.nav-bar .container::-webkit-scrollbar { display:none; }
.nav-link { padding: 8px 14px; border-radius: var(--r-md); font-weight:600; font-size:.9rem; color: var(--text-soft); white-space:nowrap; transition: all var(--dur) var(--ease); display:flex; align-items:center; gap:7px; }
.nav-link:hover, .nav-link.is-active { background: var(--surface-2); color: var(--primary); }
.nav-link.has-mega { position: relative; }
.nav-all { color: var(--primary); font-weight: 800; }

/* Mega menu */
.mega { position: absolute; top: 100%; inset-inline-start: 0; z-index: 60; width: min(760px, 92vw);
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px;
  opacity:0; visibility:hidden; transform: translateY(10px); transition: all var(--dur) var(--ease); }
.nav-link.has-mega:hover .mega, .mega:hover { opacity:1; visibility:visible; transform: translateY(8px); }
.mega a { padding: 9px 12px; border-radius: var(--r-md); display:flex; align-items:center; gap:10px; color: var(--text-soft); font-weight:600; font-size:.88rem; }
.mega a:hover { background: var(--surface-2); color: var(--primary); }
.mega a .em { font-size: 1.1rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--bg); }
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg .blob { position:absolute; border-radius:50%; filter: blur(60px); opacity:.5; animation: blob 18s var(--ease) infinite; }
.hero-bg .b1 { width: 520px; height:520px; background: radial-gradient(circle, rgba(193,18,31,.5), transparent 70%); top:-160px; inset-inline-end:-120px; }
.hero-bg .b2 { width: 460px; height:460px; background: radial-gradient(circle, rgba(220,20,60,.35), transparent 70%); bottom:-180px; inset-inline-start:-100px; animation-delay:-6s; }
.hero-bg .grid { position:absolute; inset:0; background-image: linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); opacity:.6; }
.hero-inner { position: relative; z-index:1; padding-block: clamp(48px, 9vw, 110px); text-align:center; }
.hero h1 { font-size: clamp(2.1rem, 6vw, 4.1rem); font-weight: 900; letter-spacing:-.035em; line-height: 1.05; max-width: 18ch; margin-inline:auto; }
.hero .sub { color: var(--text-soft); font-size: clamp(1rem,2vw,1.2rem); max-width: 60ch; margin: 18px auto 0; }
.hero .pill { display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:var(--r-full);
  background: var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter: blur(10px);
  font-weight:700; font-size:.82rem; color: var(--text-soft); margin-bottom: 22px; }
.hero .pill .live { width:8px; height:8px; border-radius:50%; background:#1a7f4b; animation: pulseRing 2s infinite; }

/* Hero search (big) */
.hero-search { max-width: 760px; margin: 30px auto 0; }
.hero-search form { display:flex; align-items:center; gap:8px; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--r-full); padding: 8px; box-shadow: var(--shadow-lg); }
.hero-search .field { display:flex; align-items:center; gap:10px; flex:1; padding-inline-start: 14px; min-width:0; }
.hero-search input { flex:1; border:0; background:transparent; font-size:1.05rem; color:var(--text); outline:none; min-width:0; }
.hero-search input::placeholder { color: var(--text-muted); }
.hero-search .go { flex:none; }
.hero-tags { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.hero-tags span { color: var(--text-muted); font-size:.85rem; font-weight:600; align-self:center; }

.hero-stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; max-width: 820px; margin: 44px auto 0; }
.hero-stats .stat { text-align:center; padding: 18px 10px; border-radius: var(--r-lg); background: var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter: blur(10px); }
.hero-stats .stat .n { font-size: clamp(1.4rem,3vw,2rem); font-weight: 900; letter-spacing:-.02em; color: var(--text); }
.hero-stats .stat .l { color: var(--text-muted); font-size: .82rem; font-weight:600; margin-top:2px; }

/* Trust marquee */
.trust { border-block: 1px solid var(--border); background: var(--surface); overflow:hidden; }
.trust .container { display:flex; align-items:center; gap: 14px; padding-block: 18px; }
.trust .label { color: var(--text-muted); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
.marquee { overflow:hidden; flex:1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display:flex; gap: 48px; width: max-content; animation: marquee 28s linear infinite; }
.marquee .track span { color: var(--text-soft); font-weight: 800; font-size: 1.05rem; white-space: nowrap; opacity:.7; }

/* ── Opportunities / news rows ───────────────────────────────────────────── */
.opp-card { display:flex; flex-direction:column; gap:10px; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); transition: all var(--dur) var(--ease-out); }
.opp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.opp-card .top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.opp-card h3 { font-size: 1rem; font-weight:700; line-height:1.35; }
.opp-card .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; font-size:.84rem; }
.opp-card .grid2 .k { color: var(--text-muted); }
.opp-card .grid2 .v { color: var(--text); font-weight:700; }

.cta-band { background: linear-gradient(120deg, var(--red-700), var(--red-900)); color:#fff; border-radius: var(--r-xl); position:relative; overflow:hidden; }
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 50%); }
.cta-band .inner { position:relative; padding: clamp(34px,5vw,56px); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-band h2 { font-size: clamp(1.5rem,3vw,2.2rem); font-weight:900; letter-spacing:-.02em; }
.cta-band p { opacity:.9; margin-top:8px; max-width: 50ch; }
.cta-band .btn-primary { background:#fff; color: var(--red-700); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.cta-band .btn-primary:hover { background: var(--gray-100); }
.cta-band .btn-ghost { color:#fff; border-color: rgba(255,255,255,.5); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--charcoal); color: #b9c0cc; margin-top: 40px; }
html.dark .site-footer { background: #06080c; }
.site-footer a { color: #b9c0cc; transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: #fff; }
.footer-top { display:grid; grid-template-columns: 1.6fr repeat(4,1fr); gap: 32px; padding-block: 56px; }
.footer-top .brand b { color:#fff; }
.footer-col h4 { color:#fff; font-size:.9rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
.footer-col ul { display:flex; flex-direction:column; gap:10px; font-size:.9rem; }
.footer-about p { font-size:.9rem; line-height:1.7; margin: 16px 0; max-width: 38ch; }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background: rgba(255,255,255,.06); }
.footer-social a:hover { background: var(--primary); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-block:22px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.84rem; }
.footer-pay { display:flex; gap:8px; align-items:center; }
.footer-pay span { padding:4px 10px; border-radius:6px; background:rgba(255,255,255,.08); font-weight:700; font-size:.72rem; }

/* ── Mobile drawer ───────────────────────────────────────────────────────── */
.menu-toggle { display:none; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:90; opacity:0; visibility:hidden; transition: opacity .3s var(--ease); }
.drawer-backdrop.open { opacity:1; visibility:visible; }
.drawer { position:fixed; top:0; inset-inline-start:0; height:100dvh; width: min(340px, 86vw); z-index:100;
  background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(-110%);
  transition: transform .35s var(--ease-out); display:flex; flex-direction:column; overflow-y:auto; }
html[dir="rtl"] .drawer { transform: translateX(110%); }
.drawer.open { transform: translateX(0); }
.drawer .head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.drawer nav { padding: 12px; display:flex; flex-direction:column; gap:2px; }
.drawer nav a { padding: 13px 14px; border-radius: var(--r-md); font-weight:600; color: var(--text-soft); display:flex; align-items:center; gap:12px; }
.drawer nav a:hover { background: var(--surface-2); color: var(--primary); }
.drawer .foot { margin-top:auto; padding: 18px 20px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px){
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 920px){
  .header-search { display:none; }
  .nav-bar { display:none; }
  .menu-toggle { display:grid; }
  .header-actions .hide-mobile { display:none; }
}
@media (max-width: 760px){
  .hero-stats { grid-template-columns: repeat(2,1fr); }
  .hero-search form { flex-direction: column; padding: 12px; border-radius: var(--r-xl); }
  .hero-search .field { width:100%; padding: 6px 8px; }
  .hero-search .go { width:100%; border-radius: var(--r-md); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-bottom { justify-content:center; text-align:center; }
  .opp-card .grid2 { grid-template-columns: 1fr; }
  .cta-band .inner { flex-direction:column; align-items:flex-start; text-align:start; }
}
@media (max-width: 480px){
  .footer-top { grid-template-columns: 1fr; }
  .hero-stats { gap:10px; }
}