/* =========================================================
   OMETONG — HOME PAGE STYLESHEET
   Accent: #FF7431 · Glass UI · Space Grotesk + Inter
========================================================= */

:root{
  --accent:#FF7431;
  --accent-dark:#E05A18;
  --accent-light:#FFA361;
  --blue:#3A6FF7;
  --green:#22C55E;
  --violet:#8B5CF6;
  --gold:#FFC24D;

  --ink:#15181F;
  --ink-soft:#666E7A;
  --ink-faint:#9AA1AC;
  --line:rgba(21,24,31,.08);

  --glass-bg:rgba(255,255,255,.55);
  --glass-bg-strong:rgba(255,255,255,.78);
  --glass-border:rgba(255,255,255,.65);
  --glass-blur:20px;

  --bg:#F5F6F8;
  --bg-alt:#FBFAF8;

  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-sm:0 4px 16px rgba(21,24,31,.06);
  --shadow-md:0 16px 40px rgba(21,24,31,.10);
  --shadow-lg:0 28px 70px rgba(21,24,31,.14);
  --shadow-glow:0 12px 30px rgba(255,116,49,.30);
  --ease:cubic-bezier(.22,1,.36,1);

  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --gutter:clamp(16px, 4vw, 64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:var(--font-display);margin:0 0 .5em;color:var(--ink);line-height:1.15;font-weight:700;}
p{margin:0 0 1em;color:var(--ink-soft);line-height:1.7;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
button,input,select{font-family:inherit;}
.container{max-width:1600px;margin:0 auto;padding:0 var(--gutter);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:6px;}

/* ===== Scroll progress ===== */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--gold));width:0;z-index:9999;}

/* ===== Loader ===== */
.loader{position:fixed;inset:0;background:var(--ink);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .6s var(--ease),visibility .6s;}
.loader.hide{opacity:0;visibility:hidden;}
.loader-ring{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loader-word{color:#fff;font-family:var(--font-display);font-weight:600;letter-spacing:.02em;font-size:.95rem;text-transform:lowercase;}
.loader-word em{color:var(--accent);font-style:normal;}

/* ===== Ambient blobs ===== */
.bg-blobs{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none;}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28;animation:drift 22s ease-in-out infinite;}
.b1{width:560px;height:560px;background:var(--accent);top:-200px;left:-160px;}
.b2{width:460px;height:460px;background:var(--blue);top:520px;right:-180px;opacity:.18;animation-delay:-6s;}
.b3{width:420px;height:420px;background:var(--gold);bottom:-180px;left:30%;opacity:.2;animation-delay:-12s;}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,-30px) scale(1.08);}}

/* ===== Announcement bar ===== */
.announce{
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(90deg,var(--ink),#262B36);color:#fff;
  font-size:.8rem;font-weight:600;padding:9px var(--gutter);position:relative;
  transition:max-height .4s var(--ease), padding .4s var(--ease), opacity .3s;
}
.announce a{color:var(--accent-light);font-weight:700;}
.announce#hide{max-height:0;padding:0;opacity:0;overflow:hidden;}
#announceClose{position:absolute;right:16px;background:none;border:none;color:rgba(255,255,255,.6);font-size:1.1rem;top:50%;transform:translateY(-50%);}
#announceClose:hover{color:#fff;}

/* ===== Nav ===== */
.nav{
  position:sticky;top:0;z-index:500;padding:18px 0;
  background:linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.12) 100%);
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  border-bottom:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  transition:padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.nav.scrolled{
  padding:9px 0;
  background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.26) 100%);
  backdrop-filter:blur(30px) saturate(220%);
  -webkit-backdrop-filter:blur(30px) saturate(220%);
  box-shadow:0 12px 36px -10px rgba(21,24,31,.20), inset 0 1px 0 rgba(255,255,255,.7);
  border-bottom:1px solid rgba(255,255,255,.5);
}
.nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(120px 60px at 10% 0%, rgba(255,116,49,.12), transparent 70%),
    radial-gradient(160px 70px at 90% 100%, rgba(58,111,247,.10), transparent 70%);
  opacity:.9;
}
.nav::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9) 35%, rgba(255,255,255,.9) 65%, transparent);
}
.nav-inner{max-width:1600px;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:30px;}
.logo{display:flex;align-items:center;gap:9px;}
.logo-img{height:38px;width:auto;display:block;}
.logo-img-compact{display:none;}
@media (max-width:560px){
  .logo-img-full{display:none;}
  .logo-img-compact{display:block;height:32px;width:auto;}
}
.nav-links{display:flex;gap:6px;margin:0 auto;position:relative;}
.nav-links a{font-size:.9rem;font-weight:600;color:var(--accent);position:relative;z-index:1;padding:8px 14px;border-radius:999px;transition:color .25s;}
.nav-links a::after{display:none;}
.nav-links a:hover{color:var(--accent-dark);}

/* ---- Sliding liquid-glass indicator: follows whichever nav item is hovered/focused ---- */
.nav-indicator{
  position:absolute;top:50%;left:0;height:36px;width:0;
  transform:translate(0,-50%);
  border-radius:999px;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-sm);
  opacity:0;z-index:0;pointer-events:none;
  transition:transform .4s var(--ease), width .4s var(--ease), opacity .25s var(--ease);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
}
.nav-indicator.is-active{opacity:1;}
.nav-indicator::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 55%);
  opacity:.65;mix-blend-mode:overlay;
}
/* ---- Glow highlight (Marketplace nav item only) ---- */
.nav-links a.nav-glow{
  color:var(--accent-dark);background:rgba(255,116,49,.10);
  animation:navGlowPulse 2.6s ease-in-out infinite;
}
.nav-links a.nav-glow:hover{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-dark));}
@keyframes navGlowPulse{
  0%,100%{box-shadow:0 0 0 rgba(255,116,49,.45);}
  50%{box-shadow:0 0 16px 3px rgba(255,116,49,.45);}
}

.nav-actions{display:flex;align-items:center;gap:14px;}
.link-btn{font-size:.88rem;font-weight:600;color:var(--accent);padding:8px 14px;border-radius:999px;transition:color .25s, background .3s;position:relative;overflow:hidden;isolation:isolate;}
.link-btn:hover{
  color:var(--accent-dark);
  background:var(--glass-bg-strong);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  box-shadow:var(--shadow-sm);
}
.link-btn:hover::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 55%);
  opacity:.65;mix-blend-mode:overlay;
}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;}
.hamburger span{width:22px;height:2px;background:var(--ink);}
.mobile-menu{position:fixed;top:0;right:-100%;width:82%;max-width:320px;height:100vh;background:#fff;z-index:1100;padding:90px 30px 30px;display:flex;flex-direction:column;gap:22px;box-shadow:-10px 0 40px rgba(0,0,0,.15);transition:right .4s var(--ease);}
.mobile-menu.open{right:0;}
.mobile-menu a{font-weight:700;font-size:1.05rem;color:var(--accent);}
.mobile-menu a.nav-glow{
  color:var(--accent-dark);display:inline-block;padding:8px 16px;border-radius:999px;
  background:rgba(255,116,49,.10);animation:navGlowPulse 2.6s ease-in-out infinite;
}
.mobile-menu a.btn-primary{color:#fff;}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:14px 26px;border-radius:999px;border:none;font-weight:700;font-size:.94rem;cursor:pointer;transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;box-shadow:var(--shadow-glow);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(255,116,49,.4);}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.btn-ghost-light{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(6px);}
.btn-ghost-light:hover{background:rgba(255,255,255,.22);transform:translateY(-3px);}
.btn-lg{padding:16px 32px;font-size:1rem;}
.btn-sm{padding:10px 20px;font-size:.84rem;}
.tag{display:inline-block;color:var(--accent);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;margin-bottom:12px;}

/* ===== Reveal ===== */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
[data-reveal].in{opacity:1;transform:translateY(0);}

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;padding:70px 0 0;isolation:isolate;
  background:
    linear-gradient(180deg, rgba(10,14,22,.80) 0%, rgba(12,16,26,.62) 40%, rgba(10,14,22,.88) 100%),
    url('../../images/BG image.png') center 60%/cover no-repeat;
}
.hero-inner{max-width:1600px;margin:0 auto;padding:0 var(--gutter);display:flex;justify-content:flex-start;align-items:center;min-height:78vh;}
.eyebrow{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(var(--glass-blur));font-size:.8rem;font-weight:700;color:var(--accent-dark);margin-bottom:22px;}
.hero h1{font-size:clamp(2.4rem,4.6vw,3.6rem);letter-spacing:-.02em;color:#fff;}
.hero h1 span{background:linear-gradient(100deg,var(--accent),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-copy > p{font-size:1.1rem;max-width:520px;margin-bottom:30px;color:rgba(255,255,255,.82);}

/* ---- Hero copy panel: floats cleanly over the busy background photo ---- */
.hero-copy--panel{
  max-width:560px;padding:36px;border-radius:24px;
  background:rgba(10,14,22,.55);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.hero-copy--panel .eyebrow{margin-bottom:20px;}
.hero-copy--panel .hero-actions{margin-bottom:0;}

.hero-search{
  display:flex;align-items:center;gap:10px;max-width:520px;
  background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--glass-border);border-radius:999px;padding:6px 6px 6px 18px;
  box-shadow:var(--shadow-md);position:relative;
}
.hero-search::before{content:"";position:absolute;inset:-1.5px;border-radius:999px;z-index:-1;background:conic-gradient(from 0deg,var(--accent),var(--gold),var(--blue),var(--accent));opacity:0;transition:opacity .35s;animation:spin-ring 5s linear infinite;}
.hero-search:focus-within::before{opacity:.5;}
@keyframes spin-ring{to{transform:rotate(360deg);}}
.ai-icon{color:var(--accent);fill:currentColor;flex-shrink:0;}
.hero-search input{flex:1;border:none;background:none;outline:none;font-size:.94rem;padding:12px 0;color:var(--ink);}
.hero-search input::placeholder{color:var(--ink-faint);}
.ai-btn{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border:none;padding:11px 20px;border-radius:999px;font-weight:700;font-size:.84rem;box-shadow:var(--shadow-glow);transition:transform .25s var(--ease);}
.ai-btn:hover{transform:translateY(-2px) scale(1.03);}
.hero-suggest{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 30px;font-size:.82rem;color:rgba(255,255,255,.6);}
.hero-suggest button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);padding:5px 12px;border-radius:999px;font-size:.78rem;color:rgba(255,255,255,.85);transition:.25s;backdrop-filter:blur(6px);}
.hero-suggest button:hover{border-color:var(--accent);color:var(--accent-light);background:rgba(255,255,255,.14);}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:30px;}
.magnetic{transition:transform .25s var(--ease);}
.hero-trust{display:flex;align-items:center;gap:14px;}
.avatars{display:flex;}
.avatars span{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.4);margin-left:-10px;background:linear-gradient(135deg,var(--accent),var(--blue));}
.avatars span:first-child{margin-left:0;}
.hero-trust p{margin:0;font-size:.86rem;color:rgba(255,255,255,.75);}
.hero-trust strong{color:#fff;}

/* ---- Hero visual: orbiting glass cards ---- */
.hero-visual{position:relative;height:560px;}
.orbit-stage{position:relative;width:100%;height:100%;transform-style:preserve-3d;}
.orbit-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:96px;height:96px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:0 0 0 14px rgba(255,116,49,.12), var(--shadow-glow);
  animation:pulse-core 3s ease-in-out infinite;z-index:3;
}
.orbit-core span{font-size:.62rem;font-weight:700;}
@keyframes pulse-core{0%,100%{box-shadow:0 0 0 14px rgba(255,116,49,.12), var(--shadow-glow);}50%{box-shadow:0 0 0 22px rgba(255,116,49,.06), var(--shadow-glow);}}
.orbit-rings{position:absolute;inset:0;width:100%;height:100%;}
.orbit-rings circle{fill:none;stroke:var(--line);stroke-width:1.4;stroke-dasharray:4 8;}

.float-card{
  position:absolute;display:flex;align-items:center;gap:10px;
  background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--glass-border);border-radius:14px;padding:9px 14px 9px 9px;
  box-shadow:var(--shadow-md);width:200px;
  animation:float 6s ease-in-out infinite;
}
.float-card strong{display:block;font-size:.78rem;color:var(--ink);}
.float-card span{font-size:.7rem;color:var(--ink-faint);}
.fc-thumb{width:34px;height:34px;border-radius:10px;flex-shrink:0;}
.fc1{top:6%;left:2%;animation-delay:0s;}
.fc2{top:16%;right:0%;animation-delay:-1.5s;}
.fc3{bottom:14%;left:0%;animation-delay:-3s;}
.fc4{bottom:2%;right:6%;animation-delay:-4.5s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* Marquee */
.hero-marquee{margin-top:70px;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);padding:22px 0;overflow:hidden;background:rgba(10,14,22,.55);backdrop-filter:blur(var(--glass-blur));}
.marquee-track{display:flex;gap:60px;width:max-content;animation:marquee 26s linear infinite;}
.marquee-track span{font-family:var(--font-display);font-weight:600;font-size:.85rem;letter-spacing:.08em;color:rgba(255,255,255,.55);white-space:nowrap;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* =========================================================
   HOMEPAGE AD BANNER
   The "Homepage Banner" ad plan — hidden entirely (see #adBannerZone
   [hidden] in Home.html) until Home.js finds an active one.
========================================================= */
.ad-banner-zone{padding:0 var(--gutter) 40px;max-width:1440px;margin:0 auto;}
.ad-banner-link{
  display:flex;align-items:stretch;min-height:120px;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid var(--line);background:var(--card-bg,#fff);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ad-banner-link:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.ad-banner-media{width:220px;flex-shrink:0;background-size:cover;background-position:center;}
.ad-banner-copy{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:20px 28px;}
.ad-banner-tag{
  align-self:flex-start;background:rgba(255,116,49,.12);color:var(--accent-dark);
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:3px 10px;border-radius:999px;
}
.ad-banner-copy strong{font-family:var(--font-display);font-size:1.15rem;color:var(--ink);}
.ad-banner-copy span:last-child{font-size:.86rem;color:var(--ink-soft);}
@media (max-width:640px){
  .ad-banner-link{flex-direction:column;}
  .ad-banner-media{width:100%;height:100px;}
}

/* =========================================================
   STATS BAND
========================================================= */
.stats-band{background:var(--ink);padding:56px 0;}
.stats-inner{max-width:1600px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.stat-num{display:block;font-family:var(--font-display);font-weight:700;font-size:2.4rem;color:#fff;}
.stat label{font-size:.82rem;color:rgba(255,255,255,.55);}

/* =========================================================
   SECTIONS
========================================================= */
.section{padding:110px 0;}
.section.alt{background:var(--bg-alt);}
.section-head{max-width:640px;margin:0 auto 54px;text-align:center;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);}
.section-head.with-action{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;text-align:left;flex-wrap:wrap;gap:16px;}
.link-arrow{font-weight:700;font-size:.9rem;color:var(--accent);display:inline-flex;gap:6px;}
.link-arrow span{transition:transform .3s var(--ease);}
.link-arrow:hover span{transform:translateX(5px);}

/* ---- How it works ---- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.step-line{position:absolute;top:56px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);z-index:0;}
.step{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:28px 22px;transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.step-num{font-family:var(--font-display);font-weight:700;color:var(--line);font-size:1.6rem;margin-bottom:4px;}
.step-icon{width:46px;height:46px;border-radius:12px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.step-icon svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.step h3{font-size:1.02rem;margin-bottom:6px;}
.step p{font-size:.87rem;margin:0;}

/* =========================================================
   GLOBAL REACH
========================================================= */
.reach-section{background:var(--bg-alt);overflow:hidden;}

.reach-hub-wrap{margin:0 auto 20px;max-width:640px;}
.reach-hub{
  position:relative;width:100%;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:radial-gradient(circle at 50% 50%, rgba(255,116,49,.06), transparent 60%);
  padding:18px;
}
.reach-hub-svg{display:block;width:100%;height:auto;}

/* ---- animated shipping routes ---- */
.route-path{
  fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:10 12;opacity:.55;
  filter:drop-shadow(0 0 2px rgba(255,116,49,.4));
  animation:reachDash 34s linear infinite;
}
@keyframes reachDash{to{stroke-dashoffset:-660;}}

.ship-icon{
  opacity:.95;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
  transform-box:fill-box;transform-origin:center;
  animation-name:shipFlip;animation-iteration-count:infinite;animation-timing-function:steps(1,end);
}
@keyframes shipFlip{
  0%,49.9%{transform:scaleX(1);}
  50%,100%{transform:scaleX(-1);}
}

/* ---- origin marker (Guangzhou) ---- */
.hub-origin-ring{fill:var(--card-bg,#fff);stroke:var(--gold);stroke-width:4;}
.hub-origin-pulse{
  fill:none;stroke:var(--gold);stroke-width:3;
  transform-box:fill-box;transform-origin:center;
  animation:hubPulse 2.8s var(--ease) infinite;
}
@keyframes hubPulse{
  0%{transform:scale(1);opacity:.55;}
  100%{transform:scale(1.5);opacity:0;}
}

/* ---- destination flags ---- */
.hub-dest-ring{fill:#fff;stroke:var(--accent);stroke-width:3;filter:drop-shadow(0 4px 10px rgba(255,116,49,.25));}

.hub-label{
  font-family:var(--font-body);font-size:22px;font-weight:700;fill:var(--ink);
}
.hub-origin-label{font-size:23px;}
.hub-sublabel{
  font-family:var(--font-body);font-size:15px;font-weight:600;fill:var(--ink-faint);
}

.map-caption{
  font-size:.8rem;color:var(--ink-faint);text-align:center;
  margin:14px 0 4px;padding-bottom:6px;
}

.reach-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:36px;}
.reach-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:22px 18px;text-align:center;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.reach-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.reach-flag{font-size:1.8rem;display:block;margin-bottom:10px;}
.reach-card h4{font-size:.92rem;margin-bottom:6px;}
.reach-card p{font-size:.78rem;margin:0;}

.reach-note{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--ink);color:rgba(255,255,255,.82);
  border-radius:var(--radius-md);padding:22px 24px;max-width:820px;margin:0 auto;
}
.reach-note-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.reach-note-icon svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.reach-note p{font-size:.86rem;margin:0;color:rgba(255,255,255,.82);}

@media (max-width:900px){
  .reach-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:620px){
  .reach-grid{grid-template-columns:repeat(2,1fr);}
  .hub-label{font-size:26px;}
  .hub-sublabel{font-size:18px;}
  .reach-note{flex-direction:column;}
}

/* ---- Categories ---- */
#categories{
  position:relative;isolation:isolate;
  background:
    linear-gradient(180deg, rgba(9,13,20,.88) 0%, rgba(12,16,26,.74) 45%, rgba(9,13,20,.92) 100%),
    url('../../images/categories.png') center/cover no-repeat;
}
#categories .tag{color:var(--accent-light);}
#categories .section-head h2{color:#fff;}
#categories .link-arrow{color:var(--accent-light);}
#categories .link-arrow:hover{color:var(--gold);}

.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.cat-card{
  position:relative;overflow:hidden;
  background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1.5px solid rgba(255,255,255,.6);border-radius:var(--radius-md);
  padding:32px 22px 28px;text-align:center;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .35s var(--ease);
}
.cat-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(165deg, var(--cat-color, var(--accent)) 0%, transparent 55%);
  opacity:.16;
}
.cat-card:hover{transform:translateY(-10px) scale(1.03);box-shadow:0 26px 48px rgba(0,0,0,.36);border-color:var(--cat-color, var(--accent));}
.cat-icon-wrap{
  position:relative;z-index:1;width:58px;height:58px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  font-size:1.65rem;background:var(--cat-color, var(--accent));color:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  transition:transform .4s var(--ease);
}
.cat-card:hover .cat-icon-wrap{transform:scale(1.08) rotate(-4deg);}
.cat-card h4{position:relative;z-index:1;font-size:1rem;margin-bottom:5px;color:var(--ink);}
.cat-count{position:relative;z-index:1;font-size:.78rem;font-weight:700;color:var(--ink-soft);}

/* ---- Featured listings (horizontal scroll) ---- */
.feat-scroll{display:flex;gap:18px;overflow-x:auto;padding:6px 4px 20px;scroll-snap-type:x mandatory;}
.feat-scroll::-webkit-scrollbar{height:6px;}
.feat-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;}
.feat-card{
  flex:0 0 240px;scroll-snap-align:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:16px;transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.feat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.feat-thumb{height:110px;border-radius:12px;margin-bottom:12px;}
.feat-badge{display:inline-block;background:var(--accent-soft, rgba(255,116,49,.12));color:var(--accent-dark);font-size:.66rem;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:8px;}
.feat-card h4{font-size:.92rem;margin-bottom:4px;}
.feat-meta{display:block;font-size:.74rem;color:var(--ink-faint);margin-bottom:10px;}
.feat-price{font-family:var(--font-display);font-size:1.02rem;}
.feat-price small{font-family:var(--font-body);color:var(--ink-faint);font-weight:400;font-size:.7rem;}

/* ---- Why choose ---- */
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;}
.why-copy p{max-width:460px;}
.why-list{display:flex;flex-direction:column;gap:18px;}
.why-item{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;transition:transform .35s var(--ease), box-shadow .35s;}
.why-item:hover{transform:translateX(6px);box-shadow:var(--shadow-sm);}
.why-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.why-icon svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.why-item h4{font-size:.96rem;margin-bottom:4px;}
.why-item p{font-size:.86rem;margin:0;}

/* ---- Testimonials ---- */
.testi-slider{max-width:700px;margin:0 auto 30px;overflow:hidden;}
.testi-track{display:flex;transition:transform .6s var(--ease);}
.testi-card{min-width:100%;background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:40px;text-align:center;box-shadow:var(--shadow-md);}
.stars{color:var(--accent);letter-spacing:3px;margin-bottom:14px;}
.testi-card p{font-size:1.06rem;color:var(--ink);font-style:italic;}
.testi-person{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;}
.tp-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--blue));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;}
.testi-person strong{display:block;font-size:.9rem;}
.testi-person span{font-size:.78rem;color:var(--ink-faint);}
.testi-dots{display:flex;justify-content:center;gap:8px;}
.testi-dots button{width:9px;height:9px;border-radius:50%;background:var(--line);border:none;transition:.3s;}
.testi-dots button.active{background:var(--accent);width:24px;border-radius:6px;}

/* ---- Team ---- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.team-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 22px;text-align:center;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.team-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--glass-border);}
.team-avatar{
  width:76px;height:76px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.3rem;
  box-shadow:0 10px 24px -8px rgba(21,24,31,.28);
  transition:transform .4s var(--ease);
}
.team-card:hover .team-avatar{transform:scale(1.07);}
.team-card h4{font-size:1rem;margin-bottom:4px;}
.team-role{display:block;font-size:.78rem;font-weight:700;color:var(--accent);margin-bottom:12px;}
.team-card p{font-size:.85rem;margin:0;}

/* ---- CTA band ---- */
.cta-band{background:linear-gradient(120deg,var(--ink),#2A2032 60%,var(--accent-dark));padding:90px 0;position:relative;overflow:hidden;}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%, rgba(255,116,49,.35), transparent 55%);}
.cta-inner{position:relative;text-align:center;max-width:640px;margin:0 auto;}
.cta-inner h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);}
.cta-inner p{color:rgba(255,255,255,.72);font-size:1.05rem;}
.cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:26px;}

/* =========================================================
   FOOTER
========================================================= */
.footer{background:var(--ink);color:rgba(255,255,255,.7);padding:70px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:36px;padding-bottom:50px;}
.footer-brand p{color:rgba(255,255,255,.55);font-size:.86rem;margin:16px 0 20px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;transition:.3s;}
.footer-social a:hover{background:var(--accent);transform:translateY(-3px);}
.footer h5{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
.footer-grid > div:not(.footer-brand) a{
  position:relative;isolation:isolate;overflow:hidden;
  display:block;width:fit-content;font-size:.87rem;margin-bottom:10px;padding:5px 12px;margin-left:-12px;
  border-radius:999px;color:rgba(255,255,255,.6);
  transition:color .25s, background .3s, transform .3s var(--ease);
}
.footer-grid > div:not(.footer-brand) a:hover{
  color:#fff;transform:translateX(3px);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px) saturate(160%);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
}
.footer-grid > div:not(.footer-brand) a:hover::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%);
  opacity:.7;mix-blend-mode:overlay;
}
.nl-form{display:flex;gap:8px;margin-top:12px;}
.nl-form input{flex:1;padding:10px 12px;border-radius:8px;border:none;font-size:.85rem;}
.nl-form button{padding:10px 16px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-weight:700;}
.footer-bottom{display:flex;justify-content:space-between;padding:22px var(--gutter);border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;flex-wrap:wrap;gap:10px;}
.footer-legal{display:flex;gap:20px;}
.footer-legal a:hover{color:var(--accent-light);}

/* ===== Back to top ===== */
/* bottom:96px, not 26px — chatWidget.js's launcher bubble sits at
   bottom:22px;right:22px, is 60px across, and has a much higher
   z-index (99999 vs this button's 900), so at the same corner it was
   sitting directly on top of and completely hiding this button the
   entire time. Stacked above it instead, same right edge. */
.back-top{
  position:fixed;bottom:96px;right:26px;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.85);
  transition:opacity .4s var(--ease),visibility .4s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .3s var(--ease);
  z-index:900;
}
/* A soft pulsing ring behind the button so it actually catches the
   eye once it appears, instead of just sitting there static — pauses
   automatically on hover so it doesn't fight the hover feedback. */
.back-top::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,116,49,.55);
  animation:backTopPulse 2.4s ease-out infinite;
  pointer-events:none;
}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.back-top svg{fill:none;stroke:#fff;stroke-width:2;position:relative;z-index:1;}
.back-top:hover{transform:translateY(-4px) scale(1.08);box-shadow:0 18px 36px rgba(255,116,49,.45);}
.back-top:hover::after{animation-play-state:paused;}
.back-top:active{transform:translateY(-1px) scale(.97);}

@keyframes backTopPulse{
  0%{box-shadow:0 0 0 0 rgba(255,116,49,.55);}
  70%{box-shadow:0 0 0 16px rgba(255,116,49,0);}
  100%{box-shadow:0 0 0 0 rgba(255,116,49,0);}
}

@media (prefers-reduced-motion:reduce){
  .back-top::after{animation:none;}
  .back-top{transition:opacity .2s ease,visibility .2s ease;}
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1080px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{height:420px;order:-1;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .step-line{display:none;}
  .category-grid{grid-template-columns:repeat(3,1fr);}
  .why-grid{grid-template-columns:1fr;gap:40px;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
}
/* Four nav links (Marketplace/Suppliers/Advertise/Contact Us) plus
   the logo and auth buttons need more room than the old two-link nav
   did — collapse to the hamburger earlier, matching the breakpoint
   already used for the same size nav on marketplace.html. */
@media (max-width: 860px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
}
@media (max-width: 860px){
  .stats-inner{grid-template-columns:repeat(2,1fr);gap:30px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 620px){
  .category-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .nav-actions .btn-sm{display:none;}
  .hero-visual{height:340px;}
  .float-card{width:150px;padding:7px 10px 7px 7px;}
  .fc-thumb{width:26px;height:26px;}
  .hero-copy--panel{padding:24px;max-width:100%;}
}

/* =========================================================
   GLASS BUTTON EFFECT
   Frosted blur + glossy top sheen + press-squish feedback,
   applied to every clickable button/pill on the page.
========================================================= */
.btn,.ai-btn,.back-top{
  position:relative;overflow:hidden;isolation:isolate;
  backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
}
.btn::before,.ai-btn::before,.back-top::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%);
  opacity:.6;mix-blend-mode:overlay;
}
/* The shared rule above also sets position:relative, which — coming
   after .back-top's own position:fixed earlier in this file, at the
   same specificity — was silently winning and overriding it. That's
   why the button was never actually fixed to the viewport corner at
   all: position:relative left it sitting in normal document flow
   whereever it naturally fell in the page (right after the footer),
   just nudged slightly by its own right/bottom offsets, so it
   scrolled away with the page instead of staying anchored on screen.
   overflow:hidden above (needed for .btn/.ai-btn's own glass sheen)
   would also have clipped the pulse ring's outward glow on
   .back-top — its own ::before still clips to a circle fine via
   border-radius:inherit alone, so overflow doesn't need to be
   hidden here either. */
.back-top{position:fixed;overflow:visible;}
.btn:active,.ai-btn:active,.back-top:active{
  transform:scale(.94);
  transition:transform .12s var(--ease);
}