/* =====================================================================
   MakeYouExporter Design System  ·  v3
   Premium B2B Marketplace · Apple-glass / Luxury White + Blue
   Design tokens · Grid · Components · States · Dark-mode ready
   ===================================================================== */

:root{
  /* brand */
  --white:#FFFFFF;
  --cream:#F5F8FF;
  --cream-2:#EAF1FF;
  --ink:#0E1A38;
  --ink-2:#182B5C;
  --muted:#6A7188;
  --muted-2:#98A1B8;
  --blue:#3E6FF2;
  --blue-2:#6E93FF;
  --blue-deep:#0F2470;
  --blue-pale:#E3EBFF;
  --teal:#16806F;
  --rust:#C1440E;
  --gold:#C7A96B;
  --gold-2:#E7D3A1;
  --green:#1E9E6A;
  --amber:#E1961B;
  --red:#D64545;

  /* surfaces */
  --bg:#FFFFFF;
  --bg-alt:#F5F8FF;
  --surface:#FFFFFF;
  --surface-2:#FAFBFF;
  --glass:rgba(255,255,255,0.72);
  --glass-strong:rgba(255,255,255,0.86);
  --line:rgba(14,26,56,0.09);
  --line-2:rgba(14,26,56,0.14);

  /* text */
  --text:#0E1A38;
  --text-soft:#485073;
  --text-mut:#6A7188;

  /* radii */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  /* spacing scale (8pt) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* shadows */
  --shadow-sm:0 1px 2px rgba(14,26,56,0.04), 0 8px 20px rgba(14,26,56,0.06);
  --shadow-md:0 2px 6px rgba(14,26,56,0.06), 0 22px 46px rgba(14,26,56,0.13);
  --shadow-lg:0 8px 24px rgba(14,26,56,0.10), 0 40px 80px rgba(14,26,56,0.18);
  --shadow-blue:0 3px 10px rgba(62,111,242,0.20), 0 22px 44px rgba(62,111,242,0.28);
  --shadow-gold:0 3px 10px rgba(199,169,107,0.24), 0 20px 40px rgba(199,169,107,0.24);
  --glass-top:inset 0 1px 0 rgba(255,255,255,0.85);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.2,.8,.3,1);
  --fast:.2s; --med:.35s; --slow:.7s;

  /* layout */
  --maxw:1240px;
  --gutter:40px;
  --header-h:78px;
}

/* dark mode ready ---------------------------------------------------- */
[data-theme="dark"]{
  --bg:#080D1C;
  --bg-alt:#0C1428;
  --surface:#111A33;
  --surface-2:#0E1730;
  --glass:rgba(17,26,51,0.66);
  --glass-strong:rgba(17,26,51,0.86);
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.14);
  --white:#111A33;
  --cream:#0E1730;
  --cream-2:#152244;
  --blue-pale:#17244a;
  --text:#EAF0FF;
  --text-soft:#B7C2E0;
  --text-mut:#8A94B6;
  --ink:#EAF0FF;
  --muted:#8A94B6;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.4);
  --shadow-md:0 2px 6px rgba(0,0,0,0.4), 0 22px 46px rgba(0,0,0,0.5);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.5), 0 40px 80px rgba(0,0,0,0.6);
}

/* ---------- 2. BASE -------------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:clip;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  transition:background var(--med) var(--ease), color var(--med) var(--ease);
}
h1,h2,h3,h4,.display{font-family:inherit; font-weight:700; letter-spacing:-0.02em; margin:0; color:var(--text);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
p{margin:0;}
::selection{background:var(--blue-pale); color:var(--ink);}
.mono{font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:.04em;}

/* layout helpers */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}
.section{padding:84px 0;}
.section-sm{padding:52px 0;}
.section-alt{background:var(--bg-alt);}
.grid{display:grid; gap:var(--s5);}
.stack{display:flex; flex-direction:column;}
.row{display:flex; align-items:center;}
.between{display:flex; align-items:center; justify-content:space-between;}
.center{display:flex; align-items:center; justify-content:center;}
.gap2{gap:var(--s2);} .gap3{gap:var(--s3);} .gap4{gap:var(--s4);} .gap5{gap:var(--s5);}

/* eyebrow / section head */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color:var(--blue-deep);
  background:var(--blue-pale); padding:7px 14px; border-radius:var(--r-pill);
}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--s6); flex-wrap:wrap; gap:14px;}
.section-head .tag{font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--blue-deep); margin-bottom:8px; display:block;}
.section-head h2{font-size:34px; font-weight:700;}
.section-head p{color:var(--text-mut); font-size:15px; margin-top:8px; max-width:520px;}
.viewall{font-weight:600; font-size:13.5px; color:var(--blue); display:inline-flex; align-items:center; gap:6px; transition:gap var(--fast) var(--ease);}
.viewall:hover{gap:11px;}

/* ---------- 3. BUTTONS ---------------------------------------------- */
.btn{
  --pad:12px 22px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:var(--pad); border-radius:var(--r-pill); font-size:14px; font-weight:600;
  font-family:inherit; cursor:pointer; border:1px solid transparent; position:relative;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease), filter var(--fast) var(--ease);
  white-space:nowrap; overflow:hidden; will-change:transform;
}
.btn svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0;}
.btn:active{transform:scale(.97);}
.btn-blue{background:linear-gradient(160deg,var(--blue),var(--blue-deep)); color:#fff; box-shadow:var(--shadow-blue);}
.btn-blue::before{content:""; position:absolute; inset:0 0 auto 0; height:52%; background:linear-gradient(180deg,rgba(255,255,255,.32),transparent); pointer-events:none;}
.btn-blue:hover{transform:translateY(-2px); filter:brightness(1.06);}
.btn-gold{background:linear-gradient(160deg,var(--gold-2),var(--gold)); color:#5a4415; box-shadow:var(--shadow-gold);}
.btn-gold:hover{transform:translateY(-2px); filter:brightness(1.04);}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{transform:translateY(-2px); background:var(--ink-2);}
.btn-outline{background:var(--surface); color:var(--text); border-color:var(--line-2); box-shadow:var(--shadow-sm);}
.btn-outline:hover{transform:translateY(-2px); border-color:var(--blue); color:var(--blue);}
.btn-ghost{background:transparent; color:var(--text-soft);}
.btn-ghost:hover{background:var(--cream-2); color:var(--ink);}
.btn-sm{--pad:8px 15px; font-size:13px;}
.btn-lg{--pad:16px 30px; font-size:15.5px;}
.btn-icon{width:42px; height:42px; padding:0; border-radius:50%;}
.btn-block{width:100%;}
.magnetic{transition:transform .18s var(--ease);}

/* ---------- 4. CARDS ------------------------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);
  position:relative; overflow:hidden;
}
.card-hover:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--line-2);}
.card-3d{transform-style:preserve-3d; transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);}
.glass{
  background:var(--glass); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,0.5); box-shadow:var(--shadow-md), var(--glass-top); border-radius:var(--r-lg);
}
[data-theme="dark"] .glass{border-color:rgba(255,255,255,0.1);}
.pad4{padding:var(--s4);} .pad5{padding:var(--s5);} .pad6{padding:var(--s6);}

/* ---------- 5. BADGES / PILLS --------------------------------------- */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:var(--r-pill); letter-spacing:.01em;}
.badge svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2;}
.badge-verified{background:rgba(30,158,106,.12); color:var(--green);}
.badge-gold{background:rgba(199,169,107,.16); color:#96712e;}
.badge-blue{background:var(--blue-pale); color:var(--blue-deep);}
.badge-urgent{background:rgba(214,69,69,.12); color:var(--red);}
.badge-neutral{background:var(--cream-2); color:var(--text-soft);}
.dot{width:7px; height:7px; border-radius:50%; display:inline-block;}
.pulse{animation:pulseRing 2s infinite;}

/* ---------- 6. INPUTS ------------------------------------------------ */
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-size:12.5px; font-weight:600; color:var(--text-soft);}
.input, .select, .textarea{
  width:100%; padding:12px 15px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:14px; outline:none;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-pale);}
.textarea{resize:vertical; min-height:110px;}
.input::placeholder{color:var(--muted-2);}

/* search bar (header) */
.searchbar{
  flex:1; display:flex; align-items:stretch; max-width:640px; height:50px;
  border:1px solid var(--line); border-radius:var(--r-pill); overflow:hidden; background:var(--surface);
  box-shadow:0 2px 10px rgba(14,26,56,.06), var(--glass-top);
  transition:box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.searchbar:focus-within{border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-pale), 0 10px 24px rgba(62,111,242,.16);}
.searchbar select{border:none; background:var(--cream-2); padding:0 30px 0 18px; font-family:inherit; font-size:13px; font-weight:500; border-right:1px solid var(--line); color:var(--text); cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223357' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; background-size:13px;}
.searchbar input{flex:1; border:none; padding:0 18px; font-size:14.5px; background:transparent; outline:none; font-family:inherit; color:var(--text);}
.searchbar input::placeholder{color:var(--muted-2);}
.searchbar .go{display:flex; align-items:center; gap:8px; background:linear-gradient(160deg,var(--blue),var(--blue-deep)); border:none; padding:0 24px; font-weight:600; cursor:pointer; color:#fff; font-size:14px; font-family:inherit;}
.searchbar .go svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.2;}
.search-tool{display:flex; align-items:center; justify-content:center; width:44px; border-left:1px solid var(--line); cursor:pointer; color:var(--muted); background:var(--surface-2); transition:color var(--fast);}
.search-tool:hover{color:var(--blue);}
.search-tool svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9;}

/* ---------- 7. TOP STRIP + HEADER ----------------------------------- */
.topstrip{background:var(--ink); color:var(--cream); font-size:12.5px; display:flex; justify-content:space-between; align-items:center; padding:7px var(--gutter); letter-spacing:.02em; position:relative; z-index:60;}
.topstrip .left span{opacity:.72; margin-right:14px;}
.topstrip .live{display:inline-flex; align-items:center; gap:6px; opacity:1; color:var(--blue-2); font-weight:600;}
.topstrip .liveDot{width:6px; height:6px; border-radius:50%; background:var(--blue-2); animation:ticker-blink 1.6s infinite;}
.topstrip .right a{margin-left:18px; opacity:.85; transition:opacity var(--fast);}
.topstrip .right a:hover{opacity:1; text-decoration:underline;}
.topstrip .theme-toggle{margin-left:18px; cursor:pointer; opacity:.85; display:inline-flex; align-items:center; gap:6px;}
.topstrip .theme-toggle svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;}

header.main{
  background:var(--glass-strong); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line); padding:0 var(--gutter); height:var(--header-h);
  display:flex; align-items:center; gap:28px; position:sticky; top:0; z-index:50;
}
.logo{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.logo .mark{width:44px; height:44px; border-radius:50%;
  background:conic-gradient(from 210deg,var(--blue),var(--blue-deep) 35%,var(--teal) 70%,var(--blue));
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:inset 0 0 0 3px var(--surface), inset 0 3px 5px rgba(255,255,255,.55), inset 0 -5px 8px rgba(0,0,0,.18), var(--shadow-blue);
  animation:spinSlow 16s linear infinite;}
.logo .mark::after{content:"M"; color:#fff; font-weight:600; font-size:19px; animation:spinSlow 16s linear infinite reverse;}
.logo .word{font-weight:700; font-size:22px; letter-spacing:-.01em; color:var(--text);}
.logo .word small{display:block; font-weight:500; letter-spacing:.18em; font-size:9.5px; color:var(--teal); text-transform:uppercase; margin-top:1px;}
.headcta{display:flex; align-items:center; gap:10px; flex-shrink:0;}

/* nav + mega menu */
.mainnav{display:flex; align-items:center; gap:2px;}
.mainnav > a, .mainnav > .navitem > a{padding:10px 13px; font-size:13.5px; font-weight:550; color:var(--text-soft); border-radius:10px; display:inline-flex; align-items:center; gap:6px; transition:background var(--fast), color var(--fast);}
.mainnav > a:hover, .navitem:hover > a{background:var(--cream-2); color:var(--ink);}
.navitem > a svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; transition:transform var(--fast);}
.navitem:hover > a svg{transform:rotate(180deg);}
.navitem{position:relative;}
.mega{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(10px);
  width:min(920px,92vw); background:var(--glass-strong); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:24px; opacity:0; visibility:hidden; transition:opacity var(--med) var(--ease), transform var(--med) var(--ease); z-index:70;
}
.navitem:hover .mega{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.mega::before{content:""; position:absolute; top:-14px; left:0; right:0; height:14px;}
.mega-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px 24px;}
.mega-col h6{font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--blue-deep); margin:0 0 8px; font-weight:700;}
.mega-link{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; transition:background var(--fast);}
.mega-link:hover{background:var(--cream-2);}
.mega-ico{width:36px; height:36px; border-radius:10px; background:var(--blue-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.mega-ico svg{width:18px; height:18px; stroke:var(--blue-deep); fill:none; stroke-width:1.8;}
.mega-link .t{font-size:13px; font-weight:600; color:var(--text);}
.mega-link .d{font-size:11.5px; color:var(--text-mut);}
.mega-feature{grid-column:span 1; background:linear-gradient(150deg,var(--ink),var(--blue-deep)); color:#fff; border-radius:var(--r-md); padding:20px; display:flex; flex-direction:column; justify-content:space-between; min-height:150px;}
.mega-feature h5{font-size:16px; margin:0 0 6px;}
.mega-feature p{font-size:12.5px; opacity:.85; line-height:1.5;}

/* mobile menu */
.mobile-menu-btn{display:none; background:var(--surface); border:1px solid var(--line-2); border-radius:11px; cursor:pointer; padding:9px; align-items:center; justify-content:center;}
.mobile-menu-btn svg{width:20px; height:20px; stroke:var(--ink); fill:none; stroke-width:2;}
.mobile-menu-overlay{position:fixed; inset:0; background:rgba(4,9,26,.55); z-index:190; opacity:0; visibility:hidden; transition:opacity var(--med), visibility var(--med);}
.mobile-menu-overlay.open{opacity:1; visibility:visible;}
.mobile-menu{position:fixed; top:0; right:-340px; width:320px; max-width:86vw; height:100%; background:var(--surface); z-index:200; box-shadow:-16px 0 48px rgba(14,26,56,.28); transition:right var(--med) var(--ease-out); display:flex; flex-direction:column;}
.mobile-menu.open{right:0;}
.mobile-menu-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; font-weight:700; font-size:15px;}
.mobile-menu-close{background:rgba(255,255,255,.16); border:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.mobile-menu-close svg{width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2.2;}
.mobile-menu-list{list-style:none; margin:0; padding:8px 0; overflow-y:auto; flex:1;}
.mobile-menu-list a{display:flex; align-items:center; gap:11px; padding:13px 20px; font-size:13.5px; font-weight:500; color:var(--text); border-bottom:1px solid var(--line);}
.mobile-menu-list a svg{width:16px; height:16px; stroke:var(--blue-deep); fill:none; stroke-width:1.7; flex-shrink:0;}
.mobile-menu-cta{padding:16px 20px; border-top:1px solid var(--line);}

/* ---------- 8. BREADCRUMB / TABS / ACCORDION ------------------------ */
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-mut); padding:18px 0;}
.breadcrumb a:hover{color:var(--blue);}
.breadcrumb svg{width:13px; height:13px; stroke:var(--muted-2); fill:none; stroke-width:2;}
.breadcrumb .cur{color:var(--text); font-weight:600;}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; overflow-x:auto;}
.tab{padding:12px 18px; font-size:14px; font-weight:600; color:var(--text-mut); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:color var(--fast), border-color var(--fast);}
.tab.active{color:var(--blue); border-bottom-color:var(--blue);}
.tab:hover{color:var(--ink);}
.tabpanel{display:none;} .tabpanel.active{display:block; animation:fadeUp .4s var(--ease);}

.accordion{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-item:last-child{border-bottom:none;}
.acc-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; cursor:pointer; font-weight:600; font-size:15px; gap:16px;}
.acc-head svg{width:18px; height:18px; stroke:var(--blue); fill:none; stroke-width:2.2; flex-shrink:0; transition:transform var(--med) var(--ease);}
.acc-item.open .acc-head svg{transform:rotate(45deg);}
.acc-body{max-height:0; overflow:hidden; transition:max-height var(--med) var(--ease); }
.acc-body-inner{padding:0 22px 20px; color:var(--text-soft); font-size:14px; line-height:1.65;}

/* ---------- 9. MODAL / DRAWER --------------------------------------- */
.modal-overlay{position:fixed; inset:0; background:rgba(4,9,26,.5); backdrop-filter:blur(4px); z-index:300; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity var(--med), visibility var(--med); padding:20px;}
.modal-overlay.open{opacity:1; visibility:visible;}
.modal{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); width:min(480px,100%); padding:30px; transform:scale(.94) translateY(12px); transition:transform var(--med) var(--ease-out);}
.modal-overlay.open .modal{transform:scale(1) translateY(0);}
.modal h3{font-size:22px; margin-bottom:6px;}
.modal-close{position:absolute; top:16px; right:16px; background:var(--cream-2); border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.modal-close svg{width:15px; height:15px; stroke:var(--ink); fill:none; stroke-width:2.2;}

/* ---------- 10. STATES: skeleton / empty / error / success ---------- */
.skeleton{background:linear-gradient(90deg,var(--cream-2) 25%,var(--cream) 37%,var(--cream-2) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:var(--r-sm);}
.state{display:flex; flex-direction:column; align-items:center; text-align:center; padding:48px 24px; gap:14px;}
.state-ico{width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.state-ico svg{width:32px; height:32px; fill:none; stroke-width:1.8;}
.state h4{font-size:18px;} .state p{color:var(--text-mut); font-size:14px; max-width:360px;}
.state-empty .state-ico{background:var(--cream-2); color:var(--muted);}
.state-error .state-ico{background:rgba(214,69,69,.12); color:var(--red);}
.state-success .state-ico{background:rgba(30,158,106,.12); color:var(--green);}

/* toast / trust badges / chips */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; padding:7px 13px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); color:var(--text-soft);}
.chip svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;}
.chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}

/* ---------- 11. DASHBOARD ------------------------------------------- */
.dash{display:grid; grid-template-columns:250px 1fr; min-height:100vh;}
.dash-side{background:var(--surface); border-right:1px solid var(--line); padding:24px 18px; position:sticky; top:0; height:100vh; overflow-y:auto;}
.dash-nav{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:3px;}
.dash-nav a{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:11px; font-size:13.5px; font-weight:550; color:var(--text-soft); transition:background var(--fast), color var(--fast);}
.dash-nav a svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8;}
.dash-nav a.active{background:var(--blue-pale); color:var(--blue-deep); font-weight:650;}
.dash-nav a:hover{background:var(--cream-2); color:var(--ink);}
.dash-main{padding:26px 34px; background:var(--bg-alt); min-height:100vh;}
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; box-shadow:var(--shadow-sm);}
.kpi .k-top{display:flex; align-items:center; justify-content:space-between;}
.kpi .k-ico{width:40px; height:40px; border-radius:11px; background:var(--blue-pale); display:flex; align-items:center; justify-content:center;}
.kpi .k-ico svg{width:20px; height:20px; stroke:var(--blue-deep); fill:none; stroke-width:1.9;}
.kpi .k-val{font-size:28px; font-weight:700; margin-top:14px; letter-spacing:-.02em;}
.kpi .k-lbl{font-size:12.5px; color:var(--text-mut); margin-top:2px;}
.kpi .k-delta{font-size:12px; font-weight:600;}
.k-up{color:var(--green);} .k-down{color:var(--red);}

/* simple bar chart */
.barchart{display:flex; align-items:flex-end; gap:10px; height:180px; padding-top:10px;}
.barchart .bar{flex:1; background:linear-gradient(180deg,var(--blue-2),var(--blue)); border-radius:8px 8px 4px 4px; position:relative; transition:height 1s var(--ease); box-shadow:var(--shadow-blue);}
.barchart .bar span{position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-size:11px; color:var(--text-mut);}

/* ---------- 11b. MARKETPLACE COMPONENTS ----------------------------- */
/* category tile */
.cat-tile{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:26px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); cursor:pointer; transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med);}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--blue-pale);}
.cat-ico{width:62px; height:62px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,var(--blue-pale),var(--cream-2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), var(--shadow-sm); transition:transform var(--med) var(--ease);}
.cat-tile:hover .cat-ico{transform:scale(1.08) rotate(-4deg);}
.cat-ico svg{width:30px; height:30px; stroke:var(--blue-deep); fill:none; stroke-width:1.7;}
.cat-tile .ct-name{font-size:14px; font-weight:650; color:var(--text);}
.cat-tile .ct-count{font-size:11.5px; color:var(--text-mut);}

/* product card */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.prod{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease); display:flex; flex-direction:column;}
.prod:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.prod-media{height:190px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.prod-media svg.art{width:70px; height:70px; stroke:rgba(255,255,255,.9); fill:none; stroke-width:1.4;}
.prod-media .fav{position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform var(--fast);}
.prod-media .fav:hover{transform:scale(1.12);} .prod-media .fav svg{width:16px; height:16px; stroke:var(--red); fill:none; stroke-width:2;}
.prod-media .plabel{position:absolute; top:12px; left:12px;}
.prod-body{padding:15px 16px 16px; display:flex; flex-direction:column; gap:9px; flex:1;}
.prod-body .pname{font-size:14.5px; font-weight:650; line-height:1.35; color:var(--text);}
.prod-price{font-size:17px; font-weight:700; color:var(--ink);}
.prod-price small{font-size:11.5px; font-weight:500; color:var(--text-mut);}
.prod-meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11.5px; color:var(--text-mut);}
.prod-meta b{color:var(--text-soft); font-weight:600;}
.prod-supplier{display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid var(--line); margin-top:auto;}
.prod-supplier .sav{width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0;}
.prod-supplier .sname{font-size:12px; font-weight:600; color:var(--text); line-height:1.2;}
.prod-supplier .sloc{font-size:11px; color:var(--text-mut);}
.prod-actions{display:flex; gap:8px; padding:0 16px 16px;}
.prod-actions .btn{flex:1;}

/* company card */
.comp{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);}
.comp:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.comp-cover{height:96px; position:relative;}
.comp-logo{width:60px; height:60px; border-radius:16px; background:var(--surface); border:3px solid var(--surface); box-shadow:var(--shadow-sm); position:absolute; left:20px; bottom:-28px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; color:var(--blue-deep);}
.comp-body{padding:38px 20px 20px;}
.comp-body h4{font-size:16px;}
.comp-tags{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0;}
.comp-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:14px 0;}
.comp-stats .cs{text-align:center;} .comp-stats .cs b{display:block; font-size:15px; color:var(--ink);} .comp-stats .cs span{font-size:11px; color:var(--text-mut);}

/* rfq card */
.rfq{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med);}
.rfq:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.rfq .rfq-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px;}
.rfq h4{font-size:15.5px; line-height:1.35;}
.rfq-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin:14px 0; font-size:12.5px;}
.rfq-grid .rl{color:var(--text-mut);} .rfq-grid .rv{font-weight:650; color:var(--text);}

/* service card */
.svc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med);}
.svc:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.svc-ico{width:52px; height:52px; border-radius:14px; background:linear-gradient(150deg,var(--ink),var(--blue-deep)); display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:var(--shadow-blue);}
.svc-ico svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.8;}
.svc h4{font-size:16px; margin-bottom:7px;} .svc p{font-size:13px; color:var(--text-mut); line-height:1.6;}

/* pricing card */
.plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px 26px; box-shadow:var(--shadow-sm); position:relative; transition:transform var(--med) var(--ease), box-shadow var(--med);}
.plan:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.plan.feat{border-color:transparent; background:linear-gradient(165deg,var(--ink),var(--blue-deep)); color:#fff; box-shadow:var(--shadow-lg);}
.plan.feat h3,.plan.feat .price{color:#fff;}
.plan .tier{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-deep);}
.plan.feat .tier{color:var(--gold-2);}
.plan .price{font-size:38px; font-weight:800; letter-spacing:-.02em; margin:14px 0 2px;}
.plan .price small{font-size:14px; font-weight:500; color:var(--text-mut);}
.plan.feat .price small{color:rgba(255,255,255,.7);}
.plan ul{list-style:none; margin:20px 0; padding:0; display:flex; flex-direction:column; gap:11px;}
.plan li{display:flex; align-items:flex-start; gap:10px; font-size:13.5px;}
.plan li svg{width:17px; height:17px; stroke:var(--green); fill:none; stroke-width:2.4; flex-shrink:0; margin-top:1px;}
.plan.feat li svg{stroke:var(--gold-2);}
.plan-badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(160deg,var(--gold-2),var(--gold)); color:#5a4415; font-size:11px; font-weight:700; padding:6px 16px; border-radius:var(--r-pill); box-shadow:var(--shadow-gold);}

/* story / blog cards */
.story-card{flex:0 0 190px; height:320px; border-radius:var(--r-lg); position:relative; overflow:hidden; cursor:pointer; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; justify-content:flex-end; padding:18px; color:#fff; transition:transform var(--med) var(--ease), box-shadow var(--med);}
.story-card:hover{transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-md);}
.story-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(4,9,26,.72)); z-index:0;}
.story-card > *{position:relative; z-index:1;}
.story-title{font-size:14px; font-weight:650; line-height:1.35;}
.story-date{font-size:11px; opacity:.8; margin-top:6px;}
.story-icon{width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; margin-bottom:auto;}
.story-icon svg{width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.8;}
.blog-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med);}
.blog-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.blog-media{height:170px;}
.blog-body{padding:18px;} .blog-body .bmeta{font-size:11.5px; color:var(--blue-deep); font-weight:600; text-transform:uppercase; letter-spacing:.08em;}
.blog-body h4{font-size:16px; margin:8px 0; line-height:1.35;} .blog-body p{font-size:13px; color:var(--text-mut); line-height:1.6;}

/* art gradients for media blocks */
.art-1{background:linear-gradient(150deg,#3E6FF2,#0F2470);}
.art-2{background:linear-gradient(150deg,#16806F,#0f5a4d);}
.art-3{background:linear-gradient(150deg,#6E93FF,#3E6FF2);}
.art-4{background:linear-gradient(150deg,#C1440E,#7a2a08);}
.art-5{background:linear-gradient(150deg,#0E1A38,#182B5C);}
.art-6{background:linear-gradient(150deg,#C7A96B,#8a6d33);}
.art-7{background:linear-gradient(150deg,#1E9E6A,#0d5f3f);}
.art-8{background:linear-gradient(150deg,#8B5CF6,#4c2a9e);}
.art-dot{background-image:radial-gradient(rgba(255,255,255,.22) 1.4px,transparent 1.4px); background-size:16px 16px;}

/* ---------- 12. FOOTER ---------------------------------------------- */
footer{background:var(--ink); color:#cdd6ef; padding:64px var(--gutter) 30px; margin-top:0;}
[data-theme="dark"] footer{background:#050912;}
.footgrid{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:40px;}
footer h5{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:#fff; margin:0 0 16px; font-weight:700;}
footer a{display:block; font-size:13px; color:#9aa6cc; margin-bottom:11px; transition:color var(--fast);}
footer a:hover{color:#fff;}
.footbottom{max-width:var(--maxw); margin:40px auto 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#8390b8; flex-wrap:wrap; gap:10px;}
.newsletter{display:flex; gap:8px; margin-top:14px; max-width:320px;}
.newsletter input{flex:1; padding:11px 14px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font-family:inherit; font-size:13px; outline:none;}
.newsletter input::placeholder{color:#8390b8;}

/* ---------- 13. UTIL ANIMATIONS ------------------------------------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal-stagger.in-view > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in-view > *:nth-child(1){transition-delay:.03s;}
.reveal-stagger.in-view > *:nth-child(2){transition-delay:.09s;}
.reveal-stagger.in-view > *:nth-child(3){transition-delay:.15s;}
.reveal-stagger.in-view > *:nth-child(4){transition-delay:.21s;}
.reveal-stagger.in-view > *:nth-child(5){transition-delay:.27s;}
.reveal-stagger.in-view > *:nth-child(6){transition-delay:.33s;}
.reveal-stagger.in-view > *:nth-child(7){transition-delay:.39s;}
.reveal-stagger.in-view > *:nth-child(8){transition-delay:.45s;}
.blob{position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0;}
@keyframes floatY{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-18px) translateX(8px);}}
@keyframes floatY2{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(16px) translateX(-10px);}}
@keyframes spinSlow{from{transform:rotate(0);}to{transform:rotate(360deg);}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(30,158,106,.35);}70%{box-shadow:0 0 0 10px rgba(30,158,106,0);}100%{box-shadow:0 0 0 0 rgba(30,158,106,0);}}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes ticker-blink{0%,100%{opacity:1;}50%{opacity:.3;}}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px);}to{opacity:1; transform:translateY(0);}}
.float-a{animation:floatY 9s ease-in-out infinite;}
.float-b{animation:floatY2 11s ease-in-out infinite;}

/* mouse glow */
.glow-follow{position:fixed; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(62,111,242,.14),transparent 70%); pointer-events:none; z-index:1; transform:translate(-50%,-50%); transition:opacity .3s; mix-blend-mode:multiply;}
[data-theme="dark"] .glow-follow{mix-blend-mode:screen; background:radial-gradient(circle,rgba(62,111,242,.22),transparent 70%);}

/* ---------- 14. RESPONSIVE ------------------------------------------ */
@media (max-width:1080px){
  .mainnav{display:none;}
  .mobile-menu-btn{display:flex;}
  :root{--gutter:26px;}
  .dash{grid-template-columns:1fr;}
  .dash-side{display:none;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .headcta .btn-outline{display:none;}
  .footgrid{grid-template-columns:1fr 1fr;}
  .section-head h2{font-size:26px;}
  .section{padding:60px 0;}
}
@media (max-width:640px){
  :root{--gutter:18px;}
  .topstrip{font-size:11px; padding:6px 18px;}
  .topstrip .left span:not(.live){display:none;}
  .searchbar{display:none;}
  .footgrid{grid-template-columns:1fr; gap:26px;}
  .footbottom{flex-direction:column; align-items:flex-start;}
  .kpi-grid{grid-template-columns:1fr;}
  .section-head h2{font-size:22px;}
  .mega{display:none;}
}
/* ===== comprehensive mobile pass ===== */
@media (max-width:760px){
  .compgrid{grid-template-columns:1fr;}
  .svcgrid{grid-template-columns:1fr 1fr; gap:12px;}
  .rfqgrid{grid-template-columns:1fr;}
  .pd-top{grid-template-columns:1fr; gap:22px; padding:8px 0 34px;}
  .pd-gallery .main{height:260px;}
  .pd-gallery .main svg{width:80px; height:80px;}
  .pd-info h1{font-size:24px;}
  .pd-attrs{grid-template-columns:1fr;}
  .help-cats{grid-template-columns:1fr 1fr; gap:12px;}
  .ct-layout{grid-template-columns:1fr; gap:24px; padding:16px 0 46px;}
}
@media (max-width:640px){
  header.main{height:62px; gap:12px;}
  .logo .word{font-size:17px;}
  .logo .word small{display:none;}
  .logo .mark{width:34px; height:34px;}
  .headcta{display:none;}
  .section{padding:44px 0;}
  .section-sm{padding:32px 0;}
  .section-head h2{font-size:21px;}
  .section-head p{font-size:13.5px;}
  h1{font-size:29px;}
  .lead-p{font-size:14px;}
  .breadcrumb{padding:12px 0;}
  .svcgrid{grid-template-columns:1fr; gap:12px;}
  .prod-grid{grid-template-columns:1fr 1fr !important; gap:12px;}
  body.route-marketplace .prod-grid,body.route-home .prod-grid{grid-template-columns:1fr 1fr;}
  .cols{columns:1;}
  .pd-tiers{grid-template-columns:repeat(3,1fr); gap:8px;}
  .pd-price-box{padding:16px;}
  .pd-cta{gap:8px;}
  .pd-cta .btn{flex:1 1 100%;}
  .help-cats{grid-template-columns:1fr 1fr;}
  .ct-layout h1{font-size:26px !important;}
  .office{gap:14px;}
  .ctaband{flex-direction:column; align-items:flex-start; padding:28px 22px; border-radius:var(--r-lg); gap:18px;}
  .ctaband h3{font-size:22px !important; line-height:1.2;}
  .ctaband p{font-size:13.5px !important;}
  .cta-actions{width:100%;}
  .cta-actions .btn{width:100%; justify-content:center;}
  .cta-chips{gap:8px 14px;}
  .sell-hero{padding:34px 0 40px;}
  .sell-stats{gap:16px;}
  .join-banner{padding:26px 22px;}
  .join-banner .btn{width:100%; justify-content:center;}
  .row.gap4{flex-direction:column; align-items:stretch;}
  .modal{padding:24px 20px; width:calc(100% - 32px);}
  .newsletter{flex-wrap:wrap;}
  .brand-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:400px){
  :root{--gutter:14px;}
  .prod-grid{grid-template-columns:1fr !important;}
  .svcgrid,.help-cats{grid-template-columns:1fr;}
  .pd-tiers{grid-template-columns:1fr;}
  h1{font-size:26px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ============ SPA layout ============ */
#app{min-height:60vh;}
body.route-dashboard{background:var(--bg-alt);}
body.route-dashboard #site-header,body.route-dashboard #site-footer{display:none;}

/* ============ HOME ============ */
.hero{position:relative; overflow:hidden; padding:64px 0 40px;}
.hero-bg{position:absolute; inset:0; z-index:0; background:radial-gradient(1200px 600px at 78% 8%, rgba(62,111,242,0.12), transparent 60%),radial-gradient(900px 500px at 12% 90%, rgba(22,128,111,0.08), transparent 60%);}
.hero-grid{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; position:relative; z-index:2;}
.hero h1{font-size:clamp(34px,4.6vw,60px); line-height:1.03; font-weight:800; letter-spacing:-.03em;}
.hero h1 em{font-style:normal; background:linear-gradient(120deg,var(--blue),var(--teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.hero-sub{font-size:17px; color:var(--text-soft); line-height:1.6; margin:20px 0 26px; max-width:520px;}
.hero .ctas{display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap;}
.hero-trust{display:flex; gap:8px; flex-wrap:wrap;}
.hero-trust span{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:550; color:var(--text-soft); background:var(--surface); border:1px solid var(--line); padding:8px 13px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm);}
.hero-trust svg{width:15px; height:15px; stroke:var(--green); fill:none; stroke-width:2.2;}
.globe-wrap{position:relative; height:460px; display:flex; align-items:center; justify-content:center;}
#globe{width:100%; height:100%; cursor:grab;}
.globe-badge{position:absolute; background:var(--glass-strong); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow-md); font-size:12px; display:flex; align-items:center; gap:9px;}
.globe-badge b{font-size:13px;} .globe-badge .gb-ico{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.globe-badge .gb-ico svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2;}
.gb-1{top:26px; left:-6px; animation:floatY 8s ease-in-out infinite;}
.gb-2{bottom:44px; right:-8px; animation:floatY2 10s ease-in-out infinite;}
.gb-3{bottom:8px; left:34px; animation:floatY 11s ease-in-out infinite;}
.aisearch{max-width:820px; margin:34px auto 0; position:relative; z-index:3;}
.aisearch-bar{display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:8px 8px 8px 20px; box-shadow:var(--shadow-md);}
.aisearch-bar:focus-within{border-color:var(--blue); box-shadow:0 0 0 5px var(--blue-pale),var(--shadow-md);}
.aisearch-bar .sp{width:20px; height:20px; stroke:var(--blue); fill:none; stroke-width:2;}
.aisearch-bar input{flex:1; border:none; outline:none; background:transparent; font-family:inherit; font-size:15.5px; color:var(--text);}
.aisearch-bar input::placeholder{color:var(--muted-2);}
.aisearch-bar .tool{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-soft); transition:background var(--fast);}
.aisearch-bar .tool:hover{background:var(--cream-2); color:var(--blue);}
.aisearch-bar .tool svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.9;}
.aichips{display:flex; gap:8px; justify-content:center; margin-top:14px; flex-wrap:wrap;}
.aichips .chip{cursor:pointer;} .aichips .chip:hover{border-color:var(--blue); color:var(--blue);}
.aichips .lbl{font-size:12px; color:var(--text-mut); align-self:center;}
.ledger{max-width:var(--maxw); margin:44px auto 0; padding:0 var(--gutter); display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:22px; box-shadow:var(--shadow-sm); text-align:center;}
.stat .num{font-size:30px; font-weight:800; letter-spacing:-.02em; background:linear-gradient(120deg,var(--blue-deep),var(--blue)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.stat .lbl{font-size:12.5px; color:var(--text-mut); margin-top:4px;}
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.tl-step{position:relative; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);}
.tl-step .tl-n{width:40px; height:40px; border-radius:12px; background:linear-gradient(150deg,var(--blue),var(--blue-deep)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:14px; box-shadow:var(--shadow-blue);}
.tl-step h4{font-size:16px; margin-bottom:6px;} .tl-step p{font-size:13px; color:var(--text-mut); line-height:1.6;}
.ctaband{max-width:var(--maxw); margin:0 auto; background:linear-gradient(150deg,var(--ink),var(--blue-deep)); border-radius:var(--r-xl); padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow-lg);}
.ctaband::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1.5px,transparent 1.5px); background-size:22px 22px;}
.ctaband h3{font-size:26px; position:relative;} .ctaband p{opacity:.82; margin-top:8px; max-width:520px; position:relative; font-size:14.5px;}
.catgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
.compgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.svcgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.rfqgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.storyrail{display:flex; gap:16px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x mandatory;}
.storyrail .story-card{scroll-snap-align:start;}
body.route-home .bloggrid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px;}

/* ============ shared prod-grid default + route overrides ============ */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
body.route-marketplace .prod-grid{grid-template-columns:repeat(3,1fr);}

/* ============ MARKETPLACE ============ */
.mk-head{background:var(--bg-alt); border-bottom:1px solid var(--line); padding:20px 0 26px;}
.mk-layout{display:grid; grid-template-columns:270px 1fr; gap:28px; align-items:start; padding:28px 0 70px;}
.filters{position:sticky; top:96px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm);}
.filters h5{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-mut); margin:18px 0 10px;}
.filters h5:first-child{margin-top:0;}
.fopt{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-soft); padding:6px 0; cursor:pointer;}
.fopt input{accent-color:var(--blue); width:16px; height:16px;}
.fopt .cnt{margin-left:auto; font-size:11.5px; color:var(--muted-2);}
.range{width:100%; accent-color:var(--blue); margin-top:6px;}
.mk-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.mk-toolbar .cnt{font-size:13.5px; color:var(--text-mut);} .mk-toolbar .cnt b{color:var(--text);}
.chipsrow{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}

/* ============ PRODUCT ============ */
.pd-top{display:grid; grid-template-columns:1.05fr 1fr; gap:40px; padding:12px 0 50px;}
.pd-gallery .main{height:420px; border-radius:var(--r-lg); position:relative; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);}
.pd-gallery .main svg{width:120px; height:120px; stroke:rgba(255,255,255,.9); fill:none; stroke-width:1.2;}
.pd-thumbs{display:flex; gap:12px; margin-top:14px;}
.pd-thumbs .t{width:82px; height:72px; border-radius:12px; cursor:pointer; border:2px solid transparent; transition:border-color var(--fast);}
.pd-thumbs .t.active{border-color:var(--blue);}
.pd-info h1{font-size:30px; line-height:1.15;}
.pd-badges{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 18px;}
.pd-price-box{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; margin:18px 0;}
.pd-tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px;}
.pd-tier{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center;}
.pd-tier b{display:block; font-size:16px; color:var(--ink);} .pd-tier span{font-size:11.5px; color:var(--text-mut);}
.pd-attrs{display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin:20px 0;}
.pd-attrs .a{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.pd-attrs .a .l{color:var(--text-mut);} .pd-attrs .a .v{font-weight:650;}
.pd-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;}
.supbox{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-sm); margin-top:22px;}
.supbox .row-top{display:flex; align-items:center; gap:14px;}
.supbox .slogo{width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg,var(--teal),#0f5a4d); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px;}
.pd-tabs-wrap{padding:10px 0 70px;}

/* ============ SUPPLIER ============ */
.sp-cover{height:240px; position:relative; border-radius:0 0 var(--r-xl) var(--r-xl); overflow:hidden;}
.sp-cover::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(4,9,26,.35));}
.sp-header{max-width:var(--maxw); margin:-70px auto 0; padding:0 var(--gutter); position:relative; z-index:2;}
.sp-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:24px; display:flex; gap:22px; align-items:center; flex-wrap:wrap;}
.sp-logo{width:96px; height:96px; border-radius:22px; background:linear-gradient(135deg,var(--teal),#0f5a4d); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:38px; box-shadow:var(--shadow-md); flex-shrink:0;}
.sp-meta{flex:1; min-width:240px;}
.sp-meta h1{font-size:26px;}
.sp-loc{font-size:13px; color:var(--text-mut); margin-top:4px; display:flex; gap:14px; flex-wrap:wrap;}
.sp-loc span{display:inline-flex; align-items:center; gap:5px;} .sp-loc svg{width:14px; height:14px; stroke:var(--muted); fill:none; stroke-width:2;}
.sp-actions{display:flex; gap:10px; flex-wrap:wrap;}
.sp-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line); margin-top:20px; padding-top:18px;}
.sp-strip .s{text-align:center; border-right:1px solid var(--line);} .sp-strip .s:last-child{border-right:none;}
.sp-strip .s b{display:block; font-size:20px;} .sp-strip .s span{font-size:11.5px; color:var(--text-mut);}
.sp-body{max-width:var(--maxw); margin:0 auto; padding:34px var(--gutter) 70px;}
.cert-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.cert{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; text-align:center; box-shadow:var(--shadow-sm);}
.cert .ci{width:48px;height:48px;border-radius:12px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.cert .ci svg{width:24px;height:24px;stroke:var(--blue-deep);fill:none;stroke-width:1.8;}
.factory-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.factory-grid .f{height:180px; border-radius:var(--r-md); box-shadow:var(--shadow-sm);}

/* ============ MEMBERSHIP ============ */
.mm-hero{text-align:center; padding:56px 0 30px; position:relative; overflow:hidden;}
.mm-hero h1{font-size:clamp(30px,4vw,48px); letter-spacing:-.03em;}
.mm-hero p{color:var(--text-soft); font-size:16px; max-width:560px; margin:16px auto 0;}
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:start; padding:20px 0 40px;}
.compare{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);}
.compare th,.compare td{padding:14px 18px; text-align:center; font-size:13.5px; border-bottom:1px solid var(--line);}
.compare th{background:var(--bg-alt); font-weight:700;}
.compare td:first-child,.compare th:first-child{text-align:left; font-weight:600;}
.compare tr:last-child td{border-bottom:none;}
.compare svg{width:17px;height:17px;stroke:var(--green);fill:none;stroke-width:2.6;}
.compare .no{color:var(--muted-2);}

/* ============ DASHBOARD ============ */
.dash-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:14px;}
.dash-top h1{font-size:24px;}
.dash-brand{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.dash-brand .mark{width:40px;height:40px;border-radius:50%;background:conic-gradient(from 210deg,var(--blue),var(--blue-deep) 35%,var(--teal) 70%,var(--blue));display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-blue);}
.dash-brand .mark::after{content:"M";color:#fff;font-weight:600;font-size:17px;}
.dash-brand b{font-size:17px;}
.panels{display:grid; grid-template-columns:1.6fr 1fr; gap:20px; margin-top:22px;}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm);}
.panel h3{font-size:16px; margin-bottom:4px;}
table.dt{width:100%; border-collapse:collapse; font-size:13px;}
table.dt th{text-align:left; color:var(--text-mut); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; padding:10px 10px; border-bottom:1px solid var(--line);}
table.dt td{padding:12px 10px; border-bottom:1px solid var(--line);}
table.dt tr:last-child td{border-bottom:none;}
.lead-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
.lead-item:last-child{border-bottom:none;}
.lead-item .li-ico{width:38px;height:38px;border-radius:10px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.lead-item .li-ico svg{width:18px;height:18px;stroke:var(--blue-deep);fill:none;stroke-width:1.9;}
.donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--blue) 0 42%,var(--teal) 42% 68%,var(--gold) 68% 86%,var(--cream-2) 86% 100%);display:flex;align-items:center;justify-content:center;margin:0 auto;}
.donut .hole{width:96px;height:96px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.legend{display:flex;flex-direction:column;gap:8px;margin-top:16px;font-size:12.5px;}
.legend .lg{display:flex;align-items:center;gap:8px;} .legend .sw{width:11px;height:11px;border-radius:3px;}

/* ============ CATEGORY ============ */
.cat-hero{position:relative; border-radius:0 0 var(--r-xl) var(--r-xl); overflow:hidden; padding:52px 0 46px; color:#fff;}
.cat-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(4,9,26,.55),rgba(4,9,26,.15));z-index:0;}
.cat-hero .wrap{position:relative;z-index:1;}
.cat-hero h1{font-size:clamp(28px,4vw,44px);}
.cat-hero p{max-width:520px;opacity:.9;margin-top:10px;line-height:1.6;}
.cat-stats{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap;}
.cat-stats .cs b{font-size:24px;display:block;} .cat-stats .cs span{font-size:12.5px;opacity:.85;}
.subcats{display:flex;gap:10px;overflow-x:auto;padding:22px 0;}
.subcats a{white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--text-soft);padding:9px 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);}
.subcats a.active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* categories index */
.cat-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:20px;}
.cat-block .cb-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.cat-block .cb-ico{width:52px;height:52px;border-radius:14px;background:linear-gradient(150deg,var(--blue-pale),var(--cream-2));display:flex;align-items:center;justify-content:center;}
.cat-block .cb-ico svg{width:26px;height:26px;stroke:var(--blue-deep);fill:none;stroke-width:1.8;}
.cat-block h3{font-size:18px;} .cat-block .cb-head span{font-size:12.5px;color:var(--text-mut);}
.subchips{display:flex;flex-wrap:wrap;gap:8px;}
.subchips a{font-size:13px;color:var(--text-soft);padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-pill);transition:all var(--fast);}
.subchips a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-pale);}
.cols{columns:2;column-gap:20px;} .cols > *{break-inside:avoid;}

/* ============ RFQ ============ */
.rfq-layout{display:grid;grid-template-columns:1.1fr 0.9fr;gap:34px;align-items:start;padding:24px 0 70px;}
.rfq-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-md);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.rfq-feed .rfq{margin-bottom:14px;}

/* ============ BLOG ============ */
.feat{display:grid;grid-template-columns:1.3fr 1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:30px;}
.feat .fimg{min-height:340px;} .feat .fbody{padding:38px;}
.feat .fbody h2{font-size:30px;line-height:1.15;margin:12px 0;}
.blogcats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
body.route-blog .bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}

/* ============ CONTACT ============ */
.ct-layout{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;padding:24px 0 70px;}
.office{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;}
.office .o{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow-sm);}
.office .o b{font-size:14px;} .office .o span{font-size:12.5px;color:var(--text-mut);line-height:1.6;display:block;margin-top:4px;}

/* ============ ABOUT ============ */
.ab-hero{text-align:center;padding:56px 0 30px;position:relative;overflow:hidden;}
.ab-hero h1{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.03em;max-width:820px;margin:0 auto;}
.ab-hero p{color:var(--text-soft);font-size:17px;max-width:600px;margin:18px auto 0;line-height:1.6;}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.val{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-sm);}
.val .vi{width:50px;height:50px;border-radius:14px;background:linear-gradient(150deg,var(--ink),var(--blue-deep));display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--shadow-blue);}
.val .vi svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8;}
.val h4{font-size:17px;margin-bottom:7px;} .val p{font-size:13.5px;color:var(--text-mut);line-height:1.6;}
.bignum{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.bignum .b{text-align:center;} .bignum .b .n{font-size:38px;font-weight:800;background:linear-gradient(120deg,var(--blue-deep),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.bignum .b span{font-size:13px;color:var(--text-mut);}

/* ============ HELP ============ */
.help-hero{text-align:center;padding:52px 0 34px;position:relative;overflow:hidden;}
.help-hero h1{font-size:clamp(28px,4vw,44px);}
.help-search{max-width:600px;margin:22px auto 0;}
.help-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px;}
.hc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;text-align:center;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--med) var(--ease),box-shadow var(--med);}
.hc:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.hc .hi{width:48px;height:48px;border-radius:13px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.hc .hi svg{width:24px;height:24px;stroke:var(--blue-deep);fill:none;stroke-width:1.8;}
.hc b{font-size:14.5px;} .hc span{font-size:12px;color:var(--text-mut);display:block;margin-top:3px;}

/* ============ responsive (SPA) ============ */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; text-align:center;} .globe-wrap{height:360px; order:-1;}
  .hero-sub,.hero .ctas,.hero-trust{margin-left:auto; margin-right:auto; justify-content:center;}
  .ledger{grid-template-columns:repeat(2,1fr);} .timeline{grid-template-columns:repeat(2,1fr);}
  .prod-grid{grid-template-columns:repeat(2,1fr)!important;} .ctaband{flex-direction:column; align-items:flex-start; padding:32px;}
  .compgrid,.rfqgrid,.svcgrid{grid-template-columns:1fr 1fr;} body.route-home .bloggrid,body.route-blog .bloggrid{grid-template-columns:1fr;}
  .mk-layout{grid-template-columns:1fr;} .filters{position:static;} .pd-top{grid-template-columns:1fr;} .pd-gallery .main{height:320px;}
  .sp-strip{grid-template-columns:repeat(2,1fr); gap:16px;} .sp-strip .s{border-right:none;} .factory-grid{grid-template-columns:1fr 1fr;}
  .cert-grid{grid-template-columns:repeat(2,1fr);} .plans{grid-template-columns:1fr 1fr;} .compare{display:block; overflow-x:auto;}
  .panels{grid-template-columns:1fr;} .rfq-layout{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;}
  .feat{grid-template-columns:1fr;} .ct-layout{grid-template-columns:1fr;} .office{grid-template-columns:1fr;}
  .vals{grid-template-columns:1fr;} .bignum{grid-template-columns:1fr 1fr;} .help-cats{grid-template-columns:1fr 1fr;}
  .catgrid{grid-template-columns:repeat(3,1fr);} .cols{columns:1;}
}
@media (max-width:560px){
  .ledger{grid-template-columns:repeat(2,1fr);} .timeline{grid-template-columns:1fr;} .prod-grid{grid-template-columns:1fr!important;}
  .catgrid{grid-template-columns:repeat(2,1fr);} .pd-tiers{grid-template-columns:1fr;} .pd-attrs{grid-template-columns:1fr;} .bignum{grid-template-columns:1fr;} .help-cats{grid-template-columns:1fr;} .plans{grid-template-columns:1fr;}
}


/* ===== style block ===== */

/* ===== mega dropdown: fix left overflow / cut-off ===== */
.navitem .mega{left:0 !important; right:auto !important; transform:translateY(10px) !important; width:min(880px, calc(100vw - 300px)) !important;}
.navitem:hover .mega{transform:translateY(0) !important;}
@media (max-width:1080px){ .navitem .mega{display:none !important;} }

/* ===== photo cards ===== */
.has-photo{background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; background-color:var(--cream-2);}
.prod-media.has-photo .art{display:none !important;}
.pd-gallery .main.has-photo svg{display:none !important;}
.comp-cover.has-photo .comp-logo{background:var(--surface) !important;}
.prod-media{background-color:var(--cream-2);}

/* ===== section polish / consistency ===== */
.section{padding:78px 0;}
.section-head{margin-bottom:34px;}
.section-head p{line-height:1.55; margin-top:10px;}
.accordion{box-shadow:var(--shadow-sm);}
.acc-head{align-items:center;}
.prod-actions .btn{white-space:nowrap;}
.catgrid{gap:16px;}
.card-hover:hover, .prod:hover, .comp:hover, .svc:hover, .cat-tile:hover, .blog-card:hover{box-shadow:var(--shadow-md);}


/* ===== style block ===== */

.art-1{background:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px) 0 0/16px 16px, linear-gradient(150deg,#3E6FF2,#0F2470) !important;}
.art-2{background:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px) 0 0/16px 16px, linear-gradient(150deg,#16806F,#0f5a4d) !important;}
.art-3{background:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px) 0 0/16px 16px, linear-gradient(150deg,#6E93FF,#3E6FF2) !important;}
.art-4{background:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px) 0 0/16px 16px, linear-gradient(150deg,#C1440E,#7a2a08) !important;}
.art-5{background:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px) 0 0/16px 16px, linear-gradient(150deg,#0E1A38,#182B5C) !important;}
.art-6{background:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px) 0 0/16px 16px, linear-gradient(150deg,#C7A96B,#8a6d33) !important;}
.art-7{background:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px) 0 0/16px 16px, linear-gradient(150deg,#1E9E6A,#0d5f3f) !important;}
.art-8{background:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px) 0 0/16px 16px, linear-gradient(150deg,#8B5CF6,#4c2a9e) !important;}

/* ===== plan cards: fix oval button + premium 3D ===== */
.plan{display:flex; flex-direction:column;}
.plan ul{flex:1 1 auto;}
.plan .btn{margin-top:auto; align-self:stretch; width:100%; height:auto; min-height:0; border-radius:14px; padding:14px 20px;}
.plan.feat{overflow:visible; padding-top:40px; box-shadow:var(--shadow-lg), 0 0 0 1px rgba(199,169,107,.4); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);}
.plan.feat::after{content:""; position:absolute; inset:0 0 auto 0; height:140px; border-radius:var(--r-xl) var(--r-xl) 0 0; background:linear-gradient(180deg,rgba(255,255,255,.10),transparent); pointer-events:none;}
.plan.feat:hover{transform:translateY(-8px) scale(1.015);}
.plan-badge{top:-14px; z-index:5;}

/* ===== testimonials ===== */
.testi-layout{display:grid; grid-template-columns:1.15fr 1fr; gap:22px; align-items:stretch;}
.testi-side{display:flex; flex-direction:column; gap:22px;}
.testi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease); position:relative;}
.testi:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.testi .quote-mark{font-family:Georgia,serif; font-size:52px; line-height:.4; color:var(--blue-pale); height:22px;}
.testi .stars{color:var(--amber); letter-spacing:2px; font-size:14px; margin:6px 0 10px;}
.testi p{color:var(--text-soft); font-size:14px; line-height:1.65;}
.testi .who{display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.testi .av{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;}
.testi .who b{font-size:14px;} .testi .who span{font-size:11.5px; color:var(--text-mut);}
.testi-feature{background:linear-gradient(160deg,var(--ink),var(--blue-deep)); color:#fff; border-radius:var(--r-xl); padding:38px; position:relative; overflow:hidden; box-shadow:var(--shadow-lg);}
.testi-feature::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1.5px,transparent 1.5px); background-size:22px 22px; pointer-events:none;}
.testi-feature > *{position:relative;}
.testi-feature .fq{font-size:23px; line-height:1.42; font-weight:600; letter-spacing:-.01em; margin-top:14px;}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.tilt3d{transition:transform .25s var(--ease); transform-style:preserve-3d; will-change:transform;}

/* ===== region / country ===== */
.region-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:16px;}
.region-item{text-align:center;}
.region{background:linear-gradient(160deg,var(--ink),var(--blue-deep)); border-radius:var(--r-md); padding:22px 10px; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);}
.region:hover{transform:translateY(-6px); box-shadow:var(--shadow-blue);}
.region .ri{width:46px; height:46px; border-radius:12px; background:rgba(110,147,255,.14); display:flex; align-items:center; justify-content:center; margin:0 auto;}
.region .ri svg{width:22px; height:22px; stroke:var(--blue-2); fill:none; stroke-width:1.8;}
.region-item .rn{margin-top:11px; font-size:13px; font-weight:600; color:var(--text);}
.country-grid{display:grid; grid-template-columns:repeat(9,1fr); gap:14px;}
.country-item{text-align:center;}
.country-c{width:74px; height:74px; border-radius:50%; margin:0 auto; background:linear-gradient(160deg,#eef3ff,#dbe6ff); border:2px solid var(--blue); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease);}
[data-theme="dark"] .country-c{background:linear-gradient(160deg,#17244a,#0f1a36);}
.country-item:hover .country-c{transform:translateY(-6px); box-shadow:var(--shadow-blue);}
.country-item .cn{margin-top:10px; font-size:12.5px; color:var(--text-mut);}

/* ===== premium search: custom scope dropdown + suggestions ===== */
.searchbar{position:relative; overflow:visible;}
.scope{position:relative; display:flex; align-items:center; gap:6px; background:var(--cream-2); padding:0 15px; border-right:1px solid var(--line); font-size:13px; font-weight:600; color:var(--text); cursor:pointer; border-radius:999px 0 0 999px; white-space:nowrap; user-select:none;}
.scope > svg{width:14px; height:14px; stroke:var(--ink); fill:none; transition:transform var(--fast);}
.scope.open > svg{transform:rotate(180deg);}
.scope-menu{position:absolute; top:calc(100% + 10px); left:0; min-width:186px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:6px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease); z-index:85;}
.scope.open .scope-menu{opacity:1; visibility:visible; transform:translateY(0);}
.scope-opt{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; font-size:13px; font-weight:500; color:var(--text-soft);}
.scope-opt:hover{background:var(--cream-2); color:var(--ink);}
.scope-opt.active{background:var(--blue-pale); color:var(--blue-deep); font-weight:600;}
.scope-opt svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9;}
.go{border-radius:0 999px 999px 0;}
.search-suggest{position:absolute; top:calc(100% + 12px); left:0; right:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:14px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity var(--med) var(--ease), transform var(--med) var(--ease); z-index:84;}
.search-suggest.show{opacity:1; visibility:visible; transform:translateY(0);}
.ss-group{margin-bottom:8px;} .ss-group:last-child{margin-bottom:0;}
.ss-h{font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-mut); font-weight:700; padding:6px 8px 4px;}
.ss-item{display:flex; align-items:center; gap:11px; padding:9px 8px; border-radius:10px; font-size:13.5px; color:var(--text-soft); cursor:pointer;}
.ss-item:hover{background:var(--cream-2); color:var(--ink);}
.ss-item > svg{width:15px; height:15px; stroke:var(--muted); fill:none; stroke-width:2;}
.ss-item .tag2{margin-left:auto; font-size:10px; font-weight:700; color:var(--blue-deep); background:var(--blue-pale); padding:3px 9px; border-radius:99px;}

/* ===== bottom CTA clean ===== */
.ctaband{align-items:center; gap:32px; padding:42px 48px;}
.ctaband h3{font-size:27px; line-height:1.15;}
.ctaband > div{max-width:620px;}
.ctaband .btn{flex-shrink:0;}
@media (max-width:760px){ .ctaband{flex-direction:column; align-items:flex-start; padding:30px 26px;} .ctaband .btn{width:100%;}
  .region-grid{grid-template-columns:repeat(4,1fr);} .country-grid{grid-template-columns:repeat(5,1fr);} .testi-layout,.testi-grid{grid-template-columns:1fr;} }
@media (max-width:520px){ .region-grid{grid-template-columns:repeat(2,1fr);} .country-grid{grid-template-columns:repeat(3,1fr);} }


/* ===== style block ===== */

/* ===== CTA band: fix invisible heading + premium redesign ===== */
.ctaband{position:relative; overflow:hidden; align-items:center; gap:36px; padding:44px 50px; background:linear-gradient(135deg,#0b1a44,#132b6b 55%,#0b1a44);}
.ctaband h3{color:#fff !important; font-size:30px; letter-spacing:-.02em;}
.ctaband p{color:rgba(255,255,255,.82) !important; font-size:15px; margin-top:10px;}
.cta-eyebrow{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); margin-bottom:12px;}
.cta-chips{display:flex; gap:18px; margin-top:20px; flex-wrap:wrap;}
.cta-chips span{font-size:12.5px; color:rgba(255,255,255,.8); font-weight:500;}
.cta-actions{display:flex; flex-direction:column; gap:12px; flex-shrink:0; position:relative; z-index:2;}
.cta-left{position:relative; z-index:2;}
.cta-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(6px);}
.cta-ghost:hover{background:rgba(255,255,255,.16); transform:translateY(-2px);}
.cta-glow{position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(199,169,107,.30), transparent 68%); right:-80px; top:-150px; pointer-events:none; z-index:0;}

/* ===== Success Stories: premium/unique ===== */
.story-card{padding:18px; justify-content:space-between; border:1px solid rgba(255,255,255,.06);}
.story-card::after{background:linear-gradient(180deg,rgba(4,9,26,.05) 0%,rgba(4,9,26,.35) 45%,rgba(4,9,26,.78) 100%);}
.story-top{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1;}
.story-metric{font-size:11px; font-weight:700; color:#fff; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); padding:5px 11px; border-radius:99px; border:1px solid rgba(255,255,255,.22);}
.story-body2{position:relative; z-index:1;}
.story-read{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#fff; margin-top:12px; opacity:.85; transition:gap var(--fast) var(--ease), opacity var(--fast);}
.story-read svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;}
.story-card:hover .story-read{gap:11px; opacity:1;}
.story-card:hover{transform:translateY(-8px) scale(1.02); box-shadow:var(--shadow-lg);}

/* ===== Testimonials: advanced modern premium ===== */
.testi-trust{display:flex; gap:28px; align-items:center;}
.testi-trust .tt b{font-size:26px; font-weight:800; display:block; letter-spacing:-.02em; line-height:1; background:linear-gradient(120deg,var(--blue-deep),var(--blue)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.testi-trust .tt b small{font-size:14px; -webkit-text-fill-color:var(--text-mut); color:var(--text-mut);}
.testi-trust .tt span{font-size:12px; color:var(--text-mut); margin-top:3px; display:block;}
.testi-feature{padding:42px 40px 34px; border:1px solid rgba(199,169,107,.22);}
.testi-feature::after{content:"\201C"; position:absolute; top:-6px; right:26px; font-family:Georgia,serif; font-size:150px; line-height:1; color:rgba(255,255,255,.09); pointer-events:none;}
.testi-feature .fq{font-size:24px; line-height:1.42;}
.testi-feature .who{align-items:center;}
.tf-metric{margin-left:auto; align-self:center; font-size:12px; font-weight:800; color:#5a4415; background:linear-gradient(160deg,var(--gold-2),var(--gold)); padding:8px 14px; border-radius:99px; box-shadow:var(--shadow-gold); white-space:nowrap;}
.testi{border-radius:var(--r-lg); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med);}
.testi:hover{border-color:var(--blue-pale);}
.testi .av{box-shadow:0 4px 12px rgba(14,26,56,.18);}
.testi .stars{font-size:13px;}
@media (max-width:760px){ .testi-trust{gap:18px;} .testi-trust .tt b{font-size:20px;} .tf-metric{display:none;} }


/* ===== style block ===== */

/* ===== Success Stories: bigger cards + premium carousel ===== */
.storyrail{gap:22px; padding:10px 2px 20px; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none;}
.storyrail::-webkit-scrollbar{display:none;}
.storyrail .story-card{flex:0 0 324px; height:448px; border-radius:26px; padding:26px; scroll-snap-align:start; border:1px solid rgba(255,255,255,.07);}
.storyrail .story-card .story-icon{width:48px; height:48px; border-radius:13px;}
.storyrail .story-card .story-icon svg{width:23px; height:23px;}
.storyrail .story-card .story-title{font-size:20px; line-height:1.28; font-weight:700;}
.storyrail .story-card .story-date{font-size:12.5px; margin-top:7px;}
.storyrail .story-metric{font-size:12px; padding:6px 14px;}
.storyrail .story-read{font-size:13px; margin-top:16px;}
.storyrail .story-card::after{background:linear-gradient(180deg,rgba(4,9,26,.04) 0%,rgba(4,9,26,.30) 42%,rgba(4,9,26,.82) 100%);}
.storyrail .story-card:hover{transform:translateY(-10px) scale(1.02); box-shadow:var(--shadow-lg);}
/* premium carousel arrows */
.section-head [data-scroll]{width:48px; height:48px; border-radius:50%; box-shadow:var(--shadow-sm); transition:transform var(--fast) var(--ease), background var(--fast), color var(--fast), box-shadow var(--fast);}
.section-head [data-scroll]:hover{background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.section-head [data-scroll] svg{width:18px; height:18px;}
@media (max-width:640px){ .storyrail .story-card{flex:0 0 84vw; height:420px;} }


/* ===== style block ===== */

/* ===== fix featured testimonial who-row (avatar/name were unstyled on .testi-feature) ===== */
.testi .av,.testi-feature .av{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; line-height:1;}
.testi-feature .who{display:flex; align-items:center; gap:12px;}
.testi-feature .who > div{min-width:0; flex:0 1 auto;}
.testi-feature .who b{display:block; font-size:14px; line-height:1.2; color:#fff;}
.testi-feature .who span{display:block; font-size:11.5px; margin-top:2px; color:rgba(255,255,255,.72);}
.tf-metric{margin-left:auto; align-self:center;}

/* ===== luxury polish ===== */
.testi-sec-head{margin-bottom:34px;}
.testi-feature{border:1px solid rgba(199,169,107,.32); box-shadow:var(--shadow-lg); padding:42px 42px 36px;}
.testi-feature .fq{font-size:23px; line-height:1.44;}
.testi-feature .who{border-top:1px solid rgba(255,255,255,.14) !important; margin-top:24px !important; padding-top:20px !important;}
.testi{position:relative;}
.testi::before{content:""; position:absolute; top:0; left:22px; right:22px; height:2px; background:linear-gradient(90deg,transparent,var(--gold-2),transparent); opacity:0; transition:opacity var(--med) var(--ease);}
.testi:hover::before{opacity:.85;}
.testi .stars{color:#DDA83A; letter-spacing:2px;}
.testi p{font-size:14.5px; line-height:1.7;}


/* ===== style block ===== */

/* ===== premium header v2 ===== */
.topstrip{font-size:12.5px; padding:8px 40px;}
.topstrip .left{display:flex; align-items:center; gap:14px;}
.topstrip .greet{opacity:.7; margin:0;}
.topstrip .ts-link{opacity:.92; font-weight:600; margin:0;}
.topstrip .ts-link:hover{text-decoration:underline;}
.topstrip .ts-join{background:linear-gradient(160deg,var(--blue-2),var(--blue)); color:#fff; padding:4px 13px; border-radius:99px; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.topstrip .ts-join:hover{filter:brightness(1.06);}
.topstrip .ts-center{position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:12px; opacity:.72;}
.topstrip .ts-center .sep{opacity:.4;}
.topstrip .right{display:flex; align-items:center; gap:4px;}
.ts-item{position:relative;}
.ts-item > a{display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:8px; cursor:pointer; opacity:.9; font-weight:500;}
.ts-item > a svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; transition:transform var(--fast);}
.ts-item:hover > a{background:rgba(255,255,255,.10); opacity:1;}
.ts-item:hover > a svg{transform:rotate(180deg);}
.ts-menu{position:absolute; top:calc(100% + 10px); right:0; min-width:238px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease); z-index:95;}
.ts-item:hover .ts-menu{opacity:1; visibility:visible; transform:translateY(0);}
.ts-menu::before{content:""; position:absolute; top:-10px; left:0; right:0; height:10px;}
.ts-menu a{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; font-size:13px; font-weight:500; color:var(--text-soft); margin:0;}
.ts-menu a:hover{background:var(--cream-2); color:var(--ink);}
.ts-menu a svg{width:16px; height:16px; stroke:var(--blue-deep); fill:none; stroke-width:1.8; flex-shrink:0;}
.topstrip .theme-toggle{margin-left:8px;}

/* main row */
header.main{gap:26px;}
.searchbar{max-width:760px;}

/* category subnav */
.subnav{display:flex; align-items:center; gap:4px; padding:0 40px; height:52px; background:var(--surface); border-bottom:1px solid var(--line); position:relative; z-index:40;}
.subnav > a{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; font-size:13.5px; font-weight:550; color:var(--text-soft); border-radius:9px; transition:background var(--fast), color var(--fast);}
.subnav > a:hover{background:var(--cream-2); color:var(--ink);}
.subnav .navitem{position:relative;}
.subnav .navitem > a.allcat{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; background:linear-gradient(160deg,var(--ink),var(--blue-deep)); color:#fff; font-weight:650; border-radius:10px; box-shadow:var(--shadow-sm); margin-right:6px;}
.subnav .navitem > a.allcat svg{fill:none; stroke:#fff; stroke-width:1.9;}
.subnav .navitem > a.allcat svg:first-of-type{width:16px; height:16px;}
.subnav .navitem > a.allcat svg:last-of-type{width:13px; height:13px; transition:transform var(--fast);}
.subnav .navitem:hover > a.allcat svg:last-of-type{transform:rotate(180deg);}
.subnav .mega{top:calc(100% + 12px);}

@media (max-width:1080px){ .subnav{display:none;} .topstrip .ts-center{display:none;} .topstrip .right .ts-item{display:none;} }
@media (max-width:640px){ .topstrip .greet{display:none;} }


/* ===== style block ===== */

.logo .word{font-size:18px; letter-spacing:-.02em; line-height:1.05;}
.logo .word small{font-size:8.5px; letter-spacing:.12em;}
footer .logo .word{font-size:18px;}
/* WhatsApp floating button */
.wa-float{position:fixed; right:24px; bottom:24px; width:60px; height:60px; border-radius:50%; background:linear-gradient(160deg,#25D366,#128C7E); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(18,140,126,.46); z-index:310; transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); animation:waPulse 2.6s infinite;}
.wa-float:hover{transform:scale(1.08); box-shadow:0 16px 34px rgba(18,140,126,.58);}
.wa-float svg{width:33px; height:33px;}
.wa-tip{position:absolute; right:72px; background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:10px; white-space:nowrap; opacity:0; transform:translateX(8px); pointer-events:none; transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease); box-shadow:var(--shadow-md);}
.wa-tip::after{content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%) rotate(45deg); width:10px; height:10px; background:var(--ink);}
.wa-float:hover .wa-tip{opacity:1; transform:translateX(0);}
@keyframes waPulse{0%{box-shadow:0 12px 28px rgba(18,140,126,.46), 0 0 0 0 rgba(37,211,102,.5);}70%{box-shadow:0 12px 28px rgba(18,140,126,.46), 0 0 0 16px rgba(37,211,102,0);}100%{box-shadow:0 12px 28px rgba(18,140,126,.46), 0 0 0 0 rgba(37,211,102,0);}}
@media (max-width:640px){ .wa-float{width:54px; height:54px; right:16px; bottom:16px;} .wa-float svg{width:29px; height:29px;} .wa-tip{display:none;} }


/* ===== style block ===== */

/* ===== main-row All Categories button ===== */
.hdr-cat{position:relative; flex-shrink:0;}
.hdr-cat > a.allcat{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; background:linear-gradient(160deg,var(--ink),var(--blue-deep)); color:#fff; font-weight:650; font-size:13.5px; border-radius:12px; box-shadow:var(--shadow-sm); white-space:nowrap; cursor:pointer;}
.hdr-cat > a.allcat svg{fill:none; stroke:#fff; stroke-width:1.9;}
.hdr-cat > a.allcat svg:first-of-type{width:17px; height:17px;}
.hdr-cat > a.allcat svg:last-of-type{width:13px; height:13px; transition:transform var(--fast);}
.hdr-cat:hover > a.allcat svg:last-of-type{transform:rotate(180deg);}
.hdr-cat .mega{top:calc(100% + 12px); left:0;}
@media (max-width:1080px){ .hdr-cat{display:none;} }

/* ===== premium 3D category media cards ===== */
.catgrid{gap:18px;}
.cat-tile{display:flex; flex-direction:column; align-items:stretch; text-align:left; padding:0; gap:0; overflow:hidden; border-radius:20px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);}
.cat-tile:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg);}
.cat-media{height:116px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.cat-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(4,9,26,.14)); pointer-events:none;}
.cat-media .cat-emoji{width:58px; height:58px; border-radius:16px; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.34); position:relative; z-index:1; transition:transform var(--med) var(--ease);}
.cat-tile:hover .cat-media .cat-emoji{transform:scale(1.1) rotate(-4deg);}
.cat-media .cat-emoji svg{width:28px; height:28px; stroke:#fff; fill:none; stroke-width:1.8;}
.cat-body{padding:15px 16px 17px; display:flex; flex-direction:column; gap:3px;}
.cat-body .ct-name{font-size:14.5px; font-weight:650; color:var(--text); line-height:1.25;}
.cat-body .ct-count{font-size:12px; color:var(--text-mut);}
.cat-body .cat-go{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--blue); margin-top:9px; opacity:0; transform:translateY(4px); transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease);}
.cat-body .cat-go svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2;}
.cat-tile:hover .cat-body .cat-go{opacity:1; transform:translateY(0);}


/* ===== style block ===== */

/* ===== SELL / REGISTER PAGE ===== */
.sell-hero{position:relative; overflow:hidden; padding:64px 0; color:#fff;}
.sell-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(6,12,30,.74),rgba(6,12,30,.42)); z-index:0;}
.sell-hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.08fr 0.92fr; gap:44px; align-items:center;}
.sell-eyebrow{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); background:rgba(255,255,255,.12); padding:7px 14px; border-radius:99px; margin-bottom:16px;}
.sell-hero-left h1{font-size:clamp(30px,4vw,46px); line-height:1.1; color:#fff; letter-spacing:-.02em;}
.sell-hero-left p{font-size:16px; color:rgba(255,255,255,.85); margin-top:14px; max-width:520px; line-height:1.6;}
.sell-stats{display:flex; gap:32px; margin-top:26px; flex-wrap:wrap;}
.sstat b{font-size:26px; font-weight:800; color:#fff; display:block; line-height:1;}
.sstat span{font-size:12.5px; color:rgba(255,255,255,.82);}
.sell-form{background:var(--surface); border-radius:22px; padding:30px; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.5);}
.sell-form h3{font-size:22px; color:var(--text);}
.sf-sub{font-size:13px; color:var(--text-mut); margin:6px 0 18px;}
.sell-form .field{margin-bottom:12px;}
.sf-tc{font-size:11px; color:var(--text-mut); text-align:center; margin-top:12px;}
.phone-in{display:flex; align-items:stretch; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; background:var(--surface);}
.phone-in:focus-within{border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-pale);}
.phone-in .pi-code{display:flex; align-items:center; padding:0 13px; background:var(--cream-2); font-size:13.5px; font-weight:600; color:var(--text); border-right:1px solid var(--line);}
.phone-in .input{border:none; border-radius:0;}
.phone-in .input:focus{box-shadow:none;}
.lead-p{font-size:15.5px; color:var(--text-soft); line-height:1.8; margin-bottom:16px;}

.how-layout{display:grid; grid-template-columns:0.8fr 1.2fr; gap:44px; align-items:center;}
.phone-mock{justify-self:center; width:238px; height:472px; border-radius:38px; background:linear-gradient(160deg,#0e1a38,#182b5c); padding:12px; box-shadow:var(--shadow-lg); position:relative;}
.phone-mock::before{content:""; position:absolute; top:18px; left:50%; transform:translateX(-50%); width:66px; height:6px; border-radius:99px; background:rgba(255,255,255,.22); z-index:2;}
.pm-screen{background:var(--surface); border-radius:28px; height:100%; padding:44px 22px 22px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.pm-ava{width:66px; height:66px; border-radius:50%; background:var(--blue-pale);}
.pm-line{width:120px; height:12px; border-radius:6px; background:var(--cream-2);}
.pm-inp{width:100%; height:42px; border-radius:11px; background:var(--cream-2);}
.pm-btn{width:100%; height:46px; border-radius:11px; background:linear-gradient(160deg,var(--blue),var(--blue-deep)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; margin-top:auto;}
.steps2{display:flex; flex-direction:column; gap:14px;}
.step2{display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);}
.step2:hover{transform:translateX(6px); box-shadow:var(--shadow-md);}
.s2-ico{width:46px; height:46px; border-radius:12px; background:linear-gradient(150deg,var(--ink),var(--blue-deep)); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-blue);}
.s2-ico svg{width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.8;}
.s2-n{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-deep);}
.s2-body h4{font-size:16px; margin:3px 0 4px;}
.s2-body p{font-size:13px; color:var(--text-mut); line-height:1.55;}

.benefit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.brand-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
.brand-cell{background:var(--surface); border:1px solid var(--line); border-radius:14px; height:96px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);}
.brand-cell:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.brand-cell span{font-weight:800; font-size:14.5px; letter-spacing:.02em; color:var(--text-soft); opacity:.72;}

.join-banner{position:relative; overflow:hidden; border-radius:26px; padding:46px 48px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:28px; box-shadow:var(--shadow-lg);}
.join-banner::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(6,12,30,.72),rgba(6,12,30,.4)); z-index:0;}
.join-banner > *{position:relative; z-index:2;}
.join-banner h3{font-size:26px; color:#fff; letter-spacing:-.01em;}
.join-banner p{color:rgba(255,255,255,.85); margin-top:8px; max-width:640px; font-size:14.5px;}
.jb-glow{position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(199,169,107,.3),transparent 70%); right:-60px; top:-150px; z-index:1;}

/* ===== LOGIN MODAL (glossy premium) ===== */
.login-overlay{z-index:320;}
.login-card{position:relative; width:min(420px,100%); background:var(--surface); border-radius:24px; box-shadow:var(--shadow-lg); padding:34px 30px 30px; overflow:hidden; transform:scale(.94) translateY(12px); transition:transform var(--med) var(--ease-out);}
.login-overlay.open .login-card{transform:scale(1) translateY(0);}
.login-card::before{content:""; position:absolute; top:0; left:0; right:0; height:92px; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); z-index:0;}
.login-card::after{content:""; position:absolute; top:0; left:0; right:0; height:92px; background:linear-gradient(180deg,rgba(255,255,255,.22),transparent); z-index:0;}
.login-card .modal-close{z-index:3; background:rgba(255,255,255,.22);}
.login-card .modal-close svg{stroke:#fff;}
.login-brand{position:relative; z-index:2; display:flex; align-items:center; gap:10px; color:#fff; margin-bottom:24px;}
.login-brand .mark{width:38px; height:38px; border-radius:50%; background:conic-gradient(from 210deg,var(--blue-2),#fff 35%,var(--gold-2) 70%,var(--blue-2)); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);}
.login-brand .mark::after{content:"M"; color:var(--blue-deep); font-weight:800; font-size:16px;}
.login-brand b{font-size:16px;}
.login-card h3{font-size:22px; margin-bottom:4px;}
.lg-sub{font-size:13px; color:var(--text-mut); margin-bottom:18px;}
.lg-label{font-size:12.5px; font-weight:600; color:var(--text-soft); display:block; margin-bottom:7px;}
.login-card .phone-in{margin-bottom:16px;}
.lg-alt{font-size:13px; color:var(--text-mut); text-align:center; margin-top:16px;}
.lg-alt a{color:var(--blue); font-weight:600; cursor:pointer;}
.otp-row{display:flex; gap:12px; justify-content:center; margin:6px 0 20px;}
.otp{width:56px; height:60px; border:1px solid var(--line-2); border-radius:14px; text-align:center; font-size:22px; font-weight:700; color:var(--text); background:var(--surface); outline:none; transition:border-color var(--fast), box-shadow var(--fast);}
.otp:focus{border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-pale);}
.lg-success{width:70px; height:70px; border-radius:50%; background:rgba(30,158,106,.14); color:var(--green); display:flex; align-items:center; justify-content:center; margin:6px auto 14px;}
.lg-success svg{width:34px; height:34px;}

@media (max-width:900px){ .sell-hero-inner{grid-template-columns:1fr;} .how-layout{grid-template-columns:1fr;} .phone-mock{display:none;} .benefit-grid{grid-template-columns:1fr;} .brand-grid{grid-template-columns:repeat(3,1fr);} .join-banner{flex-direction:column; align-items:flex-start;} }
@media (max-width:520px){ .brand-grid{grid-template-columns:repeat(2,1fr);} .otp{width:48px; height:54px; font-size:20px;} .sell-stats{gap:22px;} }


/* ===== style block ===== */

/* ===== TradeIndia-style categories layout ===== */
.ti-layout{display:grid; grid-template-columns:262px 1fr 300px; gap:20px; align-items:stretch;}
.ti-sidebar{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:12px; box-shadow:var(--shadow-sm); position:relative;}
.ti-side-head{font-size:15px; font-weight:700; color:var(--text); padding:8px 10px 12px;}
.ti-sidebar ul{list-style:none; margin:0; padding:0;}
.ti-cat{position:relative;}
.ti-cat > a{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px; font-size:13.5px; font-weight:550; color:var(--text-soft); transition:background var(--fast), color var(--fast);}
.ti-cat > a .tc-ico{width:30px; height:30px; border-radius:8px; background:var(--blue-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ti-cat > a .tc-ico svg{width:16px; height:16px; stroke:var(--blue-deep); fill:none; stroke-width:1.8;}
.ti-cat > a .tc-arrow{margin-left:auto; width:13px; height:13px; stroke:var(--muted-2); fill:none; stroke-width:2; transition:transform var(--fast);}
.ti-cat:hover > a{background:var(--cream-2); color:var(--ink);}
.ti-cat:hover > a .tc-ico{background:var(--blue); }
.ti-cat:hover > a .tc-ico svg{stroke:#fff;}
.ti-cat:hover > a .tc-arrow{transform:translateX(3px); stroke:var(--blue);}
.ti-viewall{display:block; text-align:center; margin-top:8px; padding:11px; font-size:13px; font-weight:700; color:var(--blue); border-top:1px solid var(--line);}
/* mega flyout */
.ti-mega{position:absolute; left:calc(100% + 14px); top:0; width:min(760px,58vw); background:var(--glass-strong); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:22px 24px; opacity:0; visibility:hidden; transform:translateX(8px); transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease); z-index:60;}
.ti-cat:hover .ti-mega{opacity:1; visibility:visible; transform:translateX(0);}
.ti-mega::before{content:""; position:absolute; left:-16px; top:0; width:16px; height:100%;}
.tm-head{font-size:13px; font-weight:800; color:var(--blue-deep); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line);}
.tm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px 22px;}
.tm-col .tm-h{font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:6px;}
.tm-col a{display:block; font-size:12.8px; color:var(--text-mut); padding:5px 0; transition:color var(--fast), padding-left var(--fast);}
.tm-col a:hover{color:var(--blue); padding-left:4px;}
/* banner */
.ti-banner{position:relative; overflow:hidden; border-radius:18px; min-height:344px; display:flex; align-items:flex-end; padding:30px; box-shadow:var(--shadow-md); transition:transform .25s var(--ease);}
.ti-banner::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(6,12,30,.66),rgba(6,12,30,.18)); z-index:0;}
.tb-inner{position:relative; z-index:1; color:#fff; max-width:440px;}
.tb-eyebrow{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2);}
.tb-inner h3{font-size:30px; color:#fff; margin:10px 0 8px; line-height:1.12; letter-spacing:-.01em;}
.tb-inner p{font-size:14px; color:rgba(255,255,255,.85); margin-bottom:18px; line-height:1.55;}
/* promo cards */
.ti-promo{display:flex; flex-direction:column; gap:20px;}
.ti-pcard{flex:1; border-radius:18px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);}
.ti-pcard:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.tp-buyer{background:linear-gradient(160deg,#FDE8C4,#F2C879);}
.tp-seller{background:linear-gradient(160deg,#E8615F,#BE3E1C);}
.tp-txt span{font-size:14px; color:rgba(20,26,56,.78);}
.tp-buyer .tp-txt b{display:block; font-size:24px; color:var(--ink); margin-top:2px; letter-spacing:-.01em;}
.tp-seller .tp-txt span{color:rgba(255,255,255,.9);}
.tp-seller .tp-txt b{display:block; font-size:22px; color:#fff; margin-top:2px; letter-spacing:-.01em;}
.tp-cta{display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; padding:12px 16px; border-radius:12px; font-size:13.5px; font-weight:700;}
.tp-buyer .tp-cta{background:var(--surface); color:var(--ink); border:1px solid rgba(20,26,56,.12);}
.tp-seller .tp-cta{background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.4);}
.tp-cta svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2;}
/* more value adds */
.mva-head{font-size:20px; font-weight:700; margin:36px 0 16px;}
.mva-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.mva-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:12px; transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);}
.mva-card:hover{transform:translateY(-7px); box-shadow:var(--shadow-md);}
.mva-ico{width:46px; height:46px; border-radius:12px; background:linear-gradient(150deg,var(--blue-pale),var(--cream-2)); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.8);}
.mva-ico svg{width:22px; height:22px; stroke:var(--blue-deep); fill:none; stroke-width:1.8;}
.mva-b b{display:block; font-size:15px; margin:2px 0 6px; line-height:1.25;}
.mva-desc{font-size:12.5px; color:var(--text-mut); display:block; margin-bottom:10px;}
.mva-learn{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--blue);}
.mva-learn svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4;}

@media (max-width:1080px){ .ti-layout{grid-template-columns:1fr;} .ti-mega{display:none;} .ti-sidebar ul{display:grid; grid-template-columns:repeat(2,1fr); gap:2px;} .mva-grid{grid-template-columns:repeat(2,1fr);} .ti-promo{flex-direction:row;} }
@media (max-width:600px){ .ti-promo{flex-direction:column;} .mva-grid{grid-template-columns:1fr;} .ti-sidebar ul{grid-template-columns:1fr;} }


/* ===== style block ===== */

/* ===== Buy Leads + Membership Plans (TradeIndia style) ===== */
.leads-layout{display:grid; grid-template-columns:1fr 380px; gap:22px; align-items:start;}
.leads-panel,.plans-panel{background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md);}
.lp-head{display:flex; align-items:center; justify-content:space-between; padding:16px 22px; background:linear-gradient(120deg,var(--blue),var(--blue-deep)); color:#fff; position:relative;}
.lp-head::after,.pp-head::after{content:""; position:absolute; inset:0 0 auto 0; height:52%; background:linear-gradient(180deg,rgba(255,255,255,.20),transparent); pointer-events:none;}
.lp-title{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; position:relative; z-index:1;}
.lp-dot{width:9px; height:9px; border-radius:50%; background:#4ade80; animation:leadPulse 1.8s infinite;}
@keyframes leadPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.65);}70%{box-shadow:0 0 0 9px rgba(74,222,128,0);}100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}}
.lp-live{font-size:11px; font-weight:700; letter-spacing:.14em; background:rgba(255,255,255,.2); padding:4px 11px; border-radius:99px; position:relative; z-index:1;}
.leads-mask{height:428px; overflow:hidden; position:relative; -webkit-mask:linear-gradient(180deg,transparent,#000 6%,#000 93%,transparent); mask:linear-gradient(180deg,transparent,#000 6%,#000 93%,transparent);}
.leads-scroll{display:flex; flex-direction:column; animation:leadScroll 28s linear infinite;}
.leads-mask:hover .leads-scroll{animation-play-state:paused;}
@keyframes leadScroll{0%{transform:translateY(0);}100%{transform:translateY(-50%);}}
.lead-row{display:flex; align-items:center; gap:14px; padding:15px 22px; border-bottom:1px dashed var(--line); transition:background var(--fast) var(--ease);}
.lead-row:hover{background:var(--cream-2);}
.lead-name{font-size:14px; font-weight:600; color:var(--blue-deep); flex:1;}
.lead-time{font-size:11.5px; color:var(--text-mut); font-variant-numeric:tabular-nums; white-space:nowrap;}
/* circular flags (CSS, render on all platforms) */
.flag{width:30px; height:30px; border-radius:50%; flex-shrink:0; box-shadow:0 2px 6px rgba(14,26,56,.20), inset 0 0 0 1px rgba(255,255,255,.45); transition:transform var(--fast) var(--ease);}
.lead-row:hover .flag{transform:scale(1.16) rotate(-5deg);}
.flag-IN{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Crect width='60' height='20' fill='%23FF9933'/%3E%3Crect y='40' width='60' height='20' fill='%23138808'/%3E%3Ccircle cx='30' cy='30' r='7.5' fill='none' stroke='%23000080' stroke-width='0.9'/%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23000080'/%3E%3Cg stroke='%23000080' stroke-width='0.75'%3E%3Cline x1='30' y1='22.5' x2='30' y2='37.5'/%3E%3Cline x1='22.5' y1='30' x2='37.5' y2='30'/%3E%3Cline x1='24.7' y1='24.7' x2='35.3' y2='35.3'/%3E%3Cline x1='35.3' y1='24.7' x2='24.7' y2='35.3'/%3E%3Cline x1='26.5' y1='23' x2='33.5' y2='37'/%3E%3Cline x1='33.5' y1='23' x2='26.5' y2='37'/%3E%3Cline x1='23' y1='26.5' x2='37' y2='33.5'/%3E%3Cline x1='23' y1='33.5' x2='37' y2='26.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
  background-position:center;
}
.flag-DE{background:linear-gradient(180deg,#000 0 33%,#DD0000 33% 66%,#FFCE00 66% 100%);}
.flag-US{background:repeating-linear-gradient(180deg,#B22234 0 12%,#fff 12% 24%);}
.flag-AE{background:linear-gradient(90deg,#FF0000 0 28%,rgba(0,0,0,0) 28%), linear-gradient(180deg,#00732F 0 33%,#fff 33% 66%,#000 66% 100%);}
.flag-NP{background:#DC143C;}
.flag-MV{background:radial-gradient(circle at 55% 50%, #0A7B3E 0 40%, #D21034 40% 100%);}
.flag-AU{background:#00247D;}
.flag-TH{background:linear-gradient(180deg,#A51931 0 16%,#F4F5F8 16% 33%,#2D2A4A 33% 66%,#F4F5F8 66% 83%,#A51931 83% 100%);}
.flag-MY{background:repeating-linear-gradient(180deg,#CC0001 0 12.5%,#fff 12.5% 25%);}
.flag-GB{background:#012169;}
.flag-SG{background:linear-gradient(180deg,#EF3340 0 50%,#fff 50% 100%);}
.flag-SA{background:#006C35;}
/* membership plans */
.pp-head{padding:16px 22px; background:linear-gradient(120deg,var(--blue),var(--blue-deep)); color:#fff; font-size:16px; font-weight:700; position:relative;}
.pp-list{padding:14px; display:flex; flex-direction:column; gap:12px;}
.plan-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);}
.plan-row:hover{transform:translateY(-4px) scale(1.01); box-shadow:var(--shadow-md); border-color:var(--gold-2);}
.pr-left b{display:block; font-size:15px; font-weight:800; color:var(--ink); letter-spacing:.01em;}
.pr-left span{font-size:11px; color:var(--text-mut); text-transform:uppercase; letter-spacing:.05em;}
.pr-right{text-align:right;}
.pr-right b{display:block; font-size:22px; font-weight:800; color:var(--blue-deep); letter-spacing:-.02em;}
.pr-right span{font-size:10px; color:var(--text-mut); text-transform:uppercase; letter-spacing:.06em;}
.pp-viewall{display:block; text-align:center; padding:15px; background:linear-gradient(120deg,var(--blue),var(--blue-deep)); color:#fff; font-weight:700; font-size:13.5px; letter-spacing:.08em; margin:2px 14px 16px; border-radius:12px; box-shadow:var(--shadow-blue); transition:filter var(--fast) var(--ease), transform var(--fast) var(--ease);}
.pp-viewall:hover{filter:brightness(1.07); transform:translateY(-2px);}
@media (max-width:900px){ .leads-layout{grid-template-columns:1fr;} .leads-mask{height:360px;} }


/* ===== style block ===== */

/* ===== States (region) grid ===== */
.state-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px;}
.state-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); text-align:center; transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);}
.state-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg);}
.sc-img{height:98px; background:linear-gradient(180deg,#eef3ff,#dde7ff); display:flex; align-items:flex-end; justify-content:center; padding:8px 10px 0; overflow:hidden;}
[data-theme="dark"] .sc-img{background:linear-gradient(180deg,#12224a,#0e1a38);}
.sc-img svg{width:100%; height:auto; opacity:.92; transition:transform var(--med) var(--ease), opacity var(--med);}
.state-card:hover .sc-img svg{transform:scale(1.06); opacity:1;}
.sc-name{padding:13px 8px; font-size:14px; font-weight:700; color:var(--text);}
@media (max-width:900px){ .state-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .state-grid{grid-template-columns:repeat(2,1fr);} }

/* ===== Country panel (blue glossy) ===== */
.country-panel{position:relative; overflow:hidden; border-radius:26px; padding:46px 30px 34px; box-shadow:var(--shadow-lg); background:linear-gradient(160deg,#2050d6,#0b1f66 68%,#0a1850);}
.country-panel::before{content:""; position:absolute; inset:0; background:radial-gradient(1000px 380px at 50% -12%, rgba(255,255,255,.16), transparent 60%), radial-gradient(circle at 18% 92%, rgba(110,147,255,.28), transparent 52%); pointer-events:none;}
.country-panel::after{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px); background-size:26px 26px; opacity:.5; pointer-events:none;}
.country-panel .cp-inner{position:relative; z-index:1;}
.cp-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:920px; margin:0 auto;}
.cpst{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.20); border-radius:16px; padding:24px 14px; text-align:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); transition:transform var(--med) var(--ease), background var(--med) var(--ease);}
.cpst:hover{transform:translateY(-6px); background:rgba(255,255,255,.15);}
.cpst b{font-size:34px; font-weight:800; color:#fff; letter-spacing:-.02em; display:inline-flex; align-items:flex-start; line-height:1;}
.cpst b i{font-size:18px; font-style:normal; color:var(--gold-2); margin-left:2px; margin-top:2px;}
.cpst span{display:block; font-size:13px; color:rgba(255,255,255,.84); margin-top:8px;}
/* flag marquee */
.flag-marquee{position:relative; z-index:1; margin-top:32px; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.fm-track{display:flex; gap:20px; width:max-content; animation:flagMarquee 32s linear infinite;}
.flag-marquee:hover .fm-track{animation-play-state:paused;}
@keyframes flagMarquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.rflag{width:80px; height:53px; border-radius:11px; overflow:hidden; box-shadow:0 10px 22px rgba(4,9,26,.45), inset 0 0 0 1px rgba(255,255,255,.35); flex-shrink:0; transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);}
.rflag svg{width:100%; height:100%; display:block;}
.rflag:hover{transform:translateY(-6px) scale(1.1); box-shadow:0 16px 30px rgba(4,9,26,.55);}
@media (max-width:600px){ .cp-stats{grid-template-columns:repeat(2,1fr);} .cpst b{font-size:28px;} }


/* ===== style block ===== */

.showcase-title{font-size:24px; font-weight:700; margin-bottom:20px; letter-spacing:-.01em;}
.showcase{display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:stretch;}
.sc-feature{position:relative; overflow:hidden; border-radius:18px; min-height:428px; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; box-shadow:var(--shadow-md); color:#fff;}
.sc-feature::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(6,12,30,.30),rgba(6,12,30,.74)); z-index:0;}
.scf-list{position:relative; z-index:1; display:flex; flex-direction:column; gap:18px;}
.scf-list span{font-size:15.5px; font-weight:600; color:#fff; line-height:1.3; cursor:pointer; transition:padding-left var(--fast) var(--ease), color var(--fast) var(--ease);}
.scf-list span:hover{padding-left:5px; color:var(--gold-2);}
.scf-viewall{position:relative; z-index:1; align-self:flex-start; margin-top:22px; background:linear-gradient(160deg,#E85D5D,#C1440E); color:#fff; border:none; box-shadow:0 8px 20px rgba(193,68,14,.4);}
.scf-viewall:hover{transform:translateY(-2px); filter:brightness(1.05);}
.sc-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.sc-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);}
.sc-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--blue-pale);}
.scc-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.scc-head h4{font-size:14.5px; font-weight:700; color:var(--text); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.scc-arrow{width:27px; height:27px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--blue); transition:background var(--fast) var(--ease), color var(--fast), border-color var(--fast);}
.sc-card:hover .scc-arrow{background:var(--blue); color:#fff; border-color:var(--blue);}
.scc-arrow svg{width:14px; height:14px;}
.scc-body{display:flex; gap:12px; justify-content:space-between; align-items:flex-end; flex:1;}
.scc-links{display:flex; flex-direction:column; gap:8px;}
.scc-links span{font-size:12.8px; color:var(--blue-deep); cursor:pointer; transition:color var(--fast) var(--ease), padding-left var(--fast);}
.scc-links span:hover{color:var(--blue); padding-left:3px;}
.scc-img{width:86px; height:86px; border-radius:12px; flex-shrink:0; box-shadow:var(--shadow-sm); align-self:flex-end; transition:transform var(--med) var(--ease);}
.sc-card:hover .scc-img{transform:scale(1.06);}
@media (max-width:1080px){ .showcase{grid-template-columns:1fr;} .sc-feature{min-height:200px;} .scf-list{flex-direction:row; flex-wrap:wrap; gap:10px 20px;} .sc-cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .sc-cards{grid-template-columns:1fr;} }


/* ===== style block ===== */

/* fix showcase right-side overflow: allow columns to shrink + truncate titles */
.showcase{grid-template-columns:300px minmax(0,1fr);}
.sc-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
.sc-card{min-width:0;}
.scc-head{min-width:0;}
.scc-head h4{min-width:0; flex:1;}
.scc-body{min-width:0;}
.scc-links{min-width:0; flex:1;}
.scc-links span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width:1080px){ .showcase{grid-template-columns:1fr;} .sc-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .sc-cards{grid-template-columns:1fr;} }


/* ===== style block ===== */

/* ===== luxury upgrade: country panel ===== */
.country-panel{background:linear-gradient(160deg,#263aa8,#0c1f6b 52%,#08154c); box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(199,169,107,.22);}
.country-panel::before{background:radial-gradient(900px 340px at 50% -14%, rgba(255,255,255,.18), transparent 60%), radial-gradient(circle at 10% 98%, rgba(199,169,107,.22), transparent 46%), radial-gradient(circle at 92% 6%, rgba(110,147,255,.30), transparent 44%);}
.country-panel .cp-inner{position:relative; overflow:hidden;}
.country-panel .cp-inner::after{content:""; position:absolute; top:0; left:-40%; width:35%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); transform:skewX(-18deg); pointer-events:none; animation:cpShine 7s ease-in-out infinite;}
@keyframes cpShine{0%{left:-40%;}55%,100%{left:135%;}}
.country-panel .tag{background:linear-gradient(160deg,#E7D3A1,#C7A96B) !important; color:#3a2c0f !important; box-shadow:0 5px 14px rgba(199,169,107,.34); letter-spacing:.18em; font-weight:800;}
.country-panel .cp-inner .section-head p{position:relative; padding-bottom:18px;}
.country-panel .cp-inner .section-head p::after{content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:88px; height:3px; border-radius:3px; background:linear-gradient(90deg,transparent,var(--gold-2),transparent);}
.cpst{border:1px solid rgba(255,255,255,.22); background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 10px 26px rgba(4,9,26,.22);}
.cpst:hover{border-color:rgba(199,169,107,.55); transform:translateY(-7px);}
.cpst b{font-size:38px;}
.cpst b i{color:var(--gold-2); font-size:20px;}
.rflag{border-radius:12px; box-shadow:0 12px 24px rgba(4,9,26,.5), inset 0 0 0 1px rgba(255,255,255,.42);}

/* ===== equal-height cards in Live Demand ===== */
.leads-layout{align-items:stretch;}
.plans-panel{display:flex; flex-direction:column;}
.pp-list{flex:1; justify-content:space-between;}


/* ===== style block ===== */

/* ===== premium FAQ accordion ===== */
.accordion{border:none !important; box-shadow:none !important; background:transparent !important; border-radius:0; display:flex; flex-direction:column; gap:14px; overflow:visible;}
.acc-item{border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; position:relative; transition:box-shadow var(--med) var(--ease), border-color var(--med) var(--ease), transform var(--med) var(--ease);}
.acc-item:hover{box-shadow:var(--shadow-md); border-color:var(--blue-pale); transform:translateY(-2px);}
.acc-item.open{box-shadow:var(--shadow-md); border-color:transparent;}
.acc-item.open::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--blue),var(--gold)); z-index:2;}
.acc-head{padding:21px 24px; font-size:16px; font-weight:650; gap:20px; align-items:center;}
.acc-item.open .acc-head{color:var(--blue-deep);}
.acc-head svg{width:36px; height:36px; min-width:36px; padding:9px; border-radius:50%; background:var(--blue-pale); box-sizing:border-box; stroke:var(--blue-deep); stroke-width:2.4; transition:transform var(--med) var(--ease), background var(--med) var(--ease), stroke var(--med) var(--ease);}
.acc-item:hover .acc-head svg{background:var(--cream-2);}
.acc-item.open .acc-head svg{background:linear-gradient(160deg,var(--gold-2),var(--gold)); stroke:#5a4415; transform:rotate(45deg); box-shadow:0 4px 12px rgba(199,169,107,.32);}
.acc-body-inner{padding:0 24px 22px 24px; font-size:14.5px; color:var(--text-soft); line-height:1.75;}


/* ===== style block ===== */

/* refined premium eyebrow (replace heavy gold bar) */
.country-panel .tag{background:rgba(255,255,255,.07) !important; color:#ECDCB0 !important; border:1px solid rgba(199,169,107,.55) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px rgba(0,0,0,.22) !important; letter-spacing:.26em !important; font-weight:700 !important; font-size:11.5px !important; padding:9px 22px !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
/* refined divider under subtitle */
.country-panel .cp-inner .section-head p::after{width:60px !important; height:2px !important; opacity:.85;}
/* bigger stat numbers */
.cpst{padding:30px 16px; position:relative;}
.cpst::before{content:""; position:absolute; top:0; left:22%; right:22%; height:1px; background:linear-gradient(90deg,transparent,rgba(199,169,107,.6),transparent);}
.cpst b{font-size:48px !important;}
.cpst b i{font-size:24px !important; margin-top:4px !important;}
.cpst span{font-size:14px; margin-top:10px;}
/* deeper 3D + premium depth */
.country-panel{box-shadow:var(--shadow-lg), 0 44px 84px rgba(8,21,76,.45), inset 0 0 0 1px rgba(199,169,107,.24);}
.cpst{transform-style:preserve-3d; transition:transform var(--med) var(--ease), background var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);}
.cpst:hover{transform:translateY(-9px) scale(1.035); box-shadow:0 22px 44px rgba(4,9,26,.42); border-color:rgba(199,169,107,.6);}
@media (max-width:600px){ .cpst b{font-size:34px !important;} }


/* ===== style block ===== */

/* ===== FINAL mobile overrides (last in cascade) ===== */
html,body{max-width:100%;}
#site-header{display:contents;}
header.main{position:sticky !important; top:0 !important; z-index:55 !important; background:var(--surface); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); transition:box-shadow .25s ease;}
header.main.stuck{box-shadow:0 10px 30px rgba(10,20,45,.12);}
body.route-dashboard header.main{position:static !important;}
/* ===== Global Trade Network — emerald panel + circular stat rings ===== */
.country-panel{background:linear-gradient(125deg,#07231d 0%,#0c4a37 48%,#0f7d57 100%)!important; border-radius:30px!important; box-shadow:0 30px 74px rgba(6,30,22,.42), inset 0 0 0 1px rgba(255,255,255,.06)!important;}
.country-panel::before{background:radial-gradient(720px 300px at 14% -8%, rgba(163,230,53,.20), transparent 60%), radial-gradient(680px 320px at 90% 112%, rgba(94,224,200,.24), transparent 56%)!important;}
.country-panel::after{background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px)!important; background-size:24px 24px!important; opacity:.4!important;}
.country-panel .tag{background:rgba(163,230,53,.12)!important; color:#c7f57f!important; border:1px solid rgba(163,230,53,.45)!important; box-shadow:none!important; letter-spacing:.22em!important; font-weight:700!important; font-size:11.5px!important; padding:9px 22px!important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.country-panel .cp-inner .section-head p::after{background:linear-gradient(90deg,transparent,#a3e635,transparent)!important; width:74px!important; height:2px!important; opacity:.9;}
.country-panel{padding:44px 30px 30px!important;}
.country-panel .cp-inner .section-head{margin-bottom:6px!important;}
.flag-marquee{margin-top:26px!important;}
/* ===== app download section (coming soon) ===== */
.appsec{background:var(--bg-alt);}
.app-inner{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center;}
.app-phones{position:relative; display:flex; justify-content:center; align-items:center; min-height:360px;}
.app-phone{width:188px; height:336px; border-radius:26px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg); padding:13px 12px; position:relative;}
.ph-back{transform:translateX(40px) rotate(-7deg) scale(.9); opacity:.8; z-index:0;}
.ph-front{transform:translateX(-26px) rotate(3deg); z-index:1;}
.apx-top{height:12px; border-radius:6px; background:var(--cream-2);}
.apx-line{height:8px; border-radius:5px; background:var(--cream-2); margin-top:10px; width:70%;}
.apx-card{height:58px; border-radius:10px; background:linear-gradient(150deg,var(--cream-2),var(--blue-pale)); margin-top:10px;}
.apx-row{display:flex; gap:6px; margin-top:10px;}
.apx-row span{flex:1; height:26px; border-radius:8px; background:var(--cream-2);}
.apx-bar{font-size:11px; font-weight:700; color:#fff; background:var(--blue-deep); border-radius:13px; padding:8px 10px; display:flex; align-items:center; gap:6px;}
.apx-dot{width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;}
.apx-search{margin-top:10px; font-size:10.5px; color:var(--text-mut); background:var(--bg-alt); border:1px solid var(--line); border-radius:9px; padding:8px 10px;}
.apx-cta{margin-top:8px; font-size:10.5px; font-weight:700; color:#fff; background:var(--blue); border-radius:9px; padding:8px 10px; text-align:center;}
.apx-grid{margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:7px;}
.apx-grid span{height:50px; border-radius:9px; background:linear-gradient(150deg,var(--cream-2),var(--blue-pale));}
.apx-nav{position:absolute; left:12px; right:12px; bottom:12px; display:flex; justify-content:space-between; align-items:center; padding:9px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px;}
.apx-nav i{width:14px; height:4px; border-radius:3px; background:var(--line-2);}
.apx-nav i.on{background:var(--blue);}
.app-chip{display:inline-block; background:var(--blue-pale); color:var(--blue-deep); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding:7px 15px; border-radius:var(--r-pill); margin-bottom:14px;}
.app-copy h2{font-size:30px; line-height:1.15; margin-bottom:10px;}
.app-copy p{color:var(--text-soft); font-size:14.5px; line-height:1.7; margin-bottom:20px; max-width:520px;}
.app-form{display:flex; gap:10px; max-width:440px; margin-bottom:10px; flex-wrap:wrap;}
.app-form .phone-in{flex:1; min-width:200px;}
.app-note{font-size:12.5px; color:var(--text-mut); margin-bottom:22px;}
.store-badges{display:flex; gap:12px; flex-wrap:wrap;}
.store-b{display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; border-radius:12px; padding:9px 16px; opacity:.6; cursor:not-allowed;}
.store-b svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; flex-shrink:0;}
.store-b small{display:block; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.85;}
.store-b b{font-size:14px; line-height:1.15;}
@media (max-width:900px){ .app-inner{grid-template-columns:1fr; gap:26px;} .app-phones{min-height:300px;} .app-copy h2{font-size:24px;} }
/* ===== brand logo (inline SVG) ===== */
/* ===== breadcrumb bar (auto, every page) ===== */
.crumb-bar{background:var(--bg-alt); border-bottom:1px solid var(--line);}
.crumb-bar .breadcrumb{padding:11px 0; margin:0;}
.crumb-bar .breadcrumb a{color:var(--text-mut);}
.crumb-bar .breadcrumb a:hover{color:var(--blue);}
.crumb-bar .breadcrumb .cur{color:var(--text); font-weight:600;}
/* ===== country suppliers ===== */
.cn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px;}
.cn-card{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--fast);}
.cn-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--blue-pale);}
.cn-card .flag{width:44px; height:32px; border-radius:7px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.cn-b{flex:1; min-width:0;}
.cn-b b{display:block; font-size:14.5px;}
.cn-reg{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mut);}
.cn-n{font-size:13.5px; font-weight:700; color:var(--blue-deep); margin:5px 0 7px;}
.cn-n small{font-weight:500; color:var(--text-mut); font-size:11.5px;}
.cn-tags{display:flex; flex-wrap:wrap; gap:5px;}
.cn-tags span{font-size:10.5px; font-weight:600; color:var(--text-soft); background:var(--bg-alt); border:1px solid var(--line); padding:3px 8px; border-radius:var(--r-pill);}
.cn-go{flex-shrink:0; color:var(--muted-2); display:inline-flex;}
.cn-go svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.2;}
.cn-card:hover .cn-go{color:var(--blue); transform:translateX(3px);}
@media (max-width:980px){ .cn-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .cn-grid{grid-template-columns:1fr;} }
/* ===== marketplace: filters, sort, pagination ===== */
.f-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.f-reset{background:none; border:none; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--blue); padding:4px 6px; border-radius:8px;}
.f-reset:hover{background:var(--blue-pale);}
.filters .fopt{cursor:pointer;}
.f-scroll{max-height:236px; overflow-y:auto; padding-right:4px; margin-right:-4px;}
.f-search{width:100%; padding:8px 12px; margin-bottom:8px; border:1px solid var(--line-2); border-radius:10px; font-family:inherit; font-size:12.5px; background:var(--surface); color:var(--text); outline:none;}
.f-search:focus{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-pale);}
.f-search::placeholder{color:var(--muted-2);}
.filters .fopt.dim{opacity:.42;}
.filters .fopt.dim input{cursor:not-allowed;}
.f-scroll::-webkit-scrollbar{width:5px;}
.f-scroll::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:5px;}
.filters input[type=checkbox]{accent-color:var(--blue); width:16px; height:16px; cursor:pointer;}
.chipsrow .chip[data-rm]{cursor:pointer;}
.pager{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:34px;}
.pg-btn{min-width:42px; height:42px; padding:0 12px; border-radius:50%; border:1px solid var(--line-2); background:var(--surface); color:var(--text); font-family:inherit; font-size:14px; font-weight:650; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); transition:all var(--fast);}
.pg-btn:hover:not(:disabled){border-color:var(--blue); color:var(--blue); transform:translateY(-2px);}
.pg-btn.on{background:linear-gradient(160deg,var(--blue-2),var(--blue-deep)); color:#fff; border-color:transparent; box-shadow:var(--shadow-blue);}
.pg-btn:disabled{opacity:.4; cursor:not-allowed;}
.pg-btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2;}
.pg-dots{color:var(--muted-2); padding:0 2px;}
.mk-empty{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:56px 20px; background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--r-lg);}
.mk-empty svg{width:34px; height:34px; stroke:var(--line-2); fill:none; stroke-width:1.7;}
.mk-empty b{font-size:15px;} .mk-empty span{font-size:13px; color:var(--text-mut); margin-bottom:6px;}
/* ===== search: tools, image-search modal, results banner ===== */
.searchbar .search-tool{cursor:pointer;}
.searchbar .search-tool:hover{color:var(--blue); background:var(--blue-pale);}
.searchbar .search-tool.listening{color:#fff; background:#e0393e; animation:micPulse 1.1s ease-in-out infinite;}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,57,62,.55);}50%{box-shadow:0 0 0 9px rgba(224,57,62,0);}}
.is-prev{width:110px; height:110px; border-radius:16px; margin:0 auto 16px; background:linear-gradient(150deg,var(--cream-2),var(--blue-pale)); background-size:cover; background-position:center; border:1px solid var(--line);}
.is-bar{height:5px; border-radius:5px; background:var(--cream-2); overflow:hidden; margin-top:18px;}
.is-bar span{display:block; height:100%; width:40%; border-radius:5px; background:linear-gradient(90deg,var(--blue),var(--teal)); animation:isSlide 1.4s ease-in-out infinite;}
@keyframes isSlide{0%{transform:translateX(-100%);}100%{transform:translateX(280%);}}
.search-banner{background:var(--blue-pale); border-bottom:1px solid var(--line);}
.search-banner .wrap{display:flex; align-items:center; gap:10px; padding:12px var(--gutter); font-size:13.5px; color:var(--blue-deep); font-weight:600;}
.search-banner .sb-ico{display:inline-flex;}
.search-banner .sb-ico svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2;}
.search-banner .sb-txt{flex:1; min-width:0;}
.search-banner .sb-clear{font-size:12.5px; font-weight:700; color:var(--blue); border:1px solid var(--blue-pale); background:var(--surface); padding:5px 12px; border-radius:var(--r-pill); flex-shrink:0;}
.search-banner .sb-clear:hover{background:var(--blue); color:#fff;}
.ts-call{display:none; align-items:center; gap:6px; color:#fff; font-weight:600; font-size:12px; opacity:.95;}
.ts-call svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;}
.ts-call:hover{opacity:1;}
@media (max-width:1080px){ .ts-call{display:inline-flex;} }
@media (max-width:640px){
  .topstrip{padding:9px 14px !important; font-size:11.5px !important; gap:10px;}
  .topstrip .left{gap:10px;}
  .topstrip .right{gap:0;}
  .ts-join{padding:5px 14px;}
  .ts-call span{display:none;}
  .ts-call{gap:0; padding:5px 9px; border:1px solid rgba(255,255,255,.25); border-radius:99px;}
  .ts-call svg{width:15px; height:15px;}
}
@media (max-width:380px){ .ts-call{display:none;} }
/* ===== mobile menu sections ===== */
.mobile-menu-list .mm-sec{padding:14px 20px 6px; font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mut); background:var(--bg-alt); border-bottom:1px solid var(--line);}
.mobile-menu-cta{display:flex; flex-direction:column;}
/* keep the WhatsApp bubble clear of the menu CTA + page bottom */
@media (max-width:640px){
  .mobile-menu-cta{padding-bottom:22px;}
  
  .wa-float{right:14px; bottom:14px; width:50px; height:50px;}
  .wa-float svg{width:26px; height:26px;}
}
/* ===== mobile side-sliders (less vertical scrolling) ===== */
@media (max-width:760px){
  .prod-grid,.testi-grid,.bloggrid,.sc-cards,.mva-grid,
  body.route-home .prod-grid,body.route-home .bloggrid,body.route-blog .bloggrid{
    display:flex !important; grid-template-columns:none !important;
    overflow-x:auto; gap:14px; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin:0 calc(var(--gutter) * -1); padding:2px var(--gutter) 12px;
  }
  .prod-grid::-webkit-scrollbar,.testi-grid::-webkit-scrollbar,.bloggrid::-webkit-scrollbar,
  .sc-cards::-webkit-scrollbar,.mva-grid::-webkit-scrollbar{display:none;}
  .prod-grid > *,.testi-grid > *,.bloggrid > *,.sc-cards > *,.mva-grid > *{flex:0 0 80%; scroll-snap-align:start; min-width:0;}
  .sc-cards > *{flex:0 0 78%;}
  .mva-grid > *{flex:0 0 62%;}
  .showcase{display:flex !important; flex-direction:column; gap:16px;}
  .sc-feature{min-height:170px;}
  .testi-layout{display:flex !important; flex-direction:column; gap:16px;}
  .testi-side{display:flex; overflow-x:auto; gap:14px; scrollbar-width:none; margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter) 8px;}
  .testi-side::-webkit-scrollbar{display:none;}
  .testi-side > *{flex:0 0 82%;}
  .slider-hint{display:block; font-size:11.5px; color:var(--text-mut); margin:-4px 0 10px;}
}
body.menu-open .wa-float{opacity:0; pointer-events:none; transform:scale(.8);}
.slider-hint{display:none;}
.ti-cat{position:static;}
.ti-sidebar{position:relative;}
.ti-mega{top:0 !important; left:calc(100% + 16px) !important; width:min(680px,50vw) !important; background:var(--surface) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 26px 60px rgba(8,18,45,.22) !important; border:1px solid var(--line) !important; max-height:none !important;}
.brand-mark{flex-shrink:0; display:block;}
.logo-chip{background:#fff; padding:5px 8px; border-radius:11px; display:inline-flex; box-shadow:var(--shadow-sm);}
.logo em,.login-brand em,.dash-brand em,.footer-logo em{font-style:normal; color:#2f9e44;}
.dash-brand,.login-brand{display:flex; align-items:center; gap:9px;}
@media (max-width:640px){ .logo .brand-mark{width:38px !important; height:38px !important;} }
/* ===== rotating banner carousel ===== */
.ti-banner::after{display:none !important;}
.tb-slides{position:absolute; inset:0; z-index:0;}
.tb-slide{position:absolute; inset:0; display:flex; align-items:flex-end; padding:30px; opacity:0; visibility:hidden; transition:opacity .7s ease, visibility .7s ease; background-size:cover; background-position:center;}
.tb-slide.on{opacity:1; visibility:visible;}
.tb-slide::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(6,12,30,.68),rgba(6,12,30,.18)); z-index:0;}
.tb-slide .tb-inner{position:relative; z-index:1;}
.tb-dots{position:absolute; bottom:16px; right:22px; z-index:3; display:flex; gap:7px;}
.tb-dots button{width:8px; height:8px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:width .3s ease, background .3s ease;}
.tb-dots button.on{width:22px; border-radius:5px; background:#fff;}
/* ===== compact top layout (banner height fix) ===== */
.ti-side-head{font-size:14px; padding:4px 10px 8px;}
.ti-cat > a{padding:3px 10px; font-size:12.8px;}
.ti-cat > a .tc-ico{width:24px; height:24px;}
.ti-cat > a .tc-ico svg{width:14px; height:14px;}
.ti-viewall{padding:9px; margin-top:5px; font-size:12.5px;}
.ti-viewall svg{width:14px; height:14px; vertical-align:middle;}
.ti-banner{min-height:0;}
.tb-inner h3{font-size:27px;}
@media (max-width:1080px){ .ti-banner{min-height:300px;} }
/* ===== More Value Adds: shift down + smaller cards ===== */
.mva-head{margin:46px 0 16px;}
.mva-card{padding:15px 16px; gap:9px; border-radius:14px;}
.mva-ico{width:40px; height:40px; border-radius:11px;}
.mva-ico svg{width:19px; height:19px;}
.mva-b b{font-size:13.5px; margin:1px 0 5px;}
.mva-desc{font-size:11.8px; margin-bottom:8px;}
.mva-learn{font-size:11.8px;}
@media (max-width:1080px){ .mva-head{margin:30px 0 14px;} }
/* ===== offer / login popup ===== */
.offer-pop{position:fixed; inset:0; z-index:300; background:rgba(8,16,40,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .25s ease;}
.offer-pop.open{display:flex; opacity:1;}
.offer-card{position:relative; width:100%; max-width:820px; background:var(--surface); border-radius:22px; overflow:hidden; display:grid; grid-template-columns:1.05fr 1fr; box-shadow:0 40px 100px rgba(4,9,26,.55); transform:translateY(14px) scale(.97); transition:transform .32s cubic-bezier(.2,.8,.2,1);}
.offer-pop.open .offer-card{transform:none;}
.offer-close{position:absolute; top:12px; right:12px; z-index:4; width:34px; height:34px; border-radius:50%; border:none; background:var(--surface); box-shadow:var(--shadow-md); cursor:pointer; color:var(--text-soft); display:flex; align-items:center; justify-content:center;}
.offer-close svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2;}
.offer-img{position:relative; background:linear-gradient(155deg,#efe6d6,#e4d3b6 55%,#d9c39c); background-size:cover; background-position:center; display:flex; align-items:flex-end; min-height:440px; padding:32px 28px;}
.offer-img-tint{position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(90,61,26,.14));}
.offer-img-inner{position:relative; z-index:2;}
.offer-eyebrow{font-weight:700; font-size:12px; letter-spacing:.08em; color:#6b4a1f; text-transform:uppercase;}
.offer-img h3{font-size:32px; line-height:1.05; margin:6px 0 18px; font-weight:800; color:#4d3413; letter-spacing:-.02em;}
.offer-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.offer-points li{display:flex; gap:10px; align-items:center; font-size:13.5px; font-weight:600; color:#5a441f;}
.offer-points li::before{content:""; width:18px; height:18px; border-radius:50%; background:rgba(199,169,107,.95); box-shadow:inset 0 0 0 3px rgba(255,255,255,.75); flex-shrink:0;}
.offer-form{padding:44px 36px; display:flex; flex-direction:column; justify-content:center; text-align:center;}
.offer-form > h3{font-size:23px; line-height:1.2; margin-bottom:20px;}
.offer-check{display:flex; gap:9px; align-items:center; font-size:13px; color:var(--text-soft); margin:0 0 16px; text-align:left; cursor:pointer;}
.offer-check input{width:16px; height:16px; accent-color:var(--blue); flex-shrink:0;}
.offer-tc{font-size:11.5px; color:var(--text-mut); margin-top:15px; line-height:1.55;}
.offer-tc a{color:var(--blue); font-weight:600;}
.offer-done{text-align:center; padding:18px 0;}
.offer-done .od-ico{width:56px; height:56px; border-radius:50%; background:rgba(30,158,106,.14); color:var(--green,#1e9e6a); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
.offer-done .od-ico svg{width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:2.2;}
@media (max-width:640px){
  .offer-card{grid-template-columns:1fr; max-width:380px; max-height:88vh; overflow-y:auto;}
  .offer-img{min-height:130px; padding:20px; align-items:center;}
  .offer-img h3{font-size:22px; margin-bottom:0;}
  .offer-points{display:none;}
  .offer-form{padding:24px 22px;}
  .offer-form > h3{font-size:20px; margin-bottom:16px;}
}
@media (max-width:640px){
  /* --- kill hero clipping + resize --- */
  .hero{padding:22px 0 30px;}
  .hero .eyebrow{display:inline-block; font-size:10.5px; white-space:normal; line-height:1.45; letter-spacing:.06em; max-width:100%;}
  .hero h1{font-size:27px !important; line-height:1.14;}
  .hero-sub{font-size:14.5px !important; margin:14px 0 18px !important; max-width:100%;}
  .hero .ctas{gap:10px; width:100%;}
  .hero .ctas .btn{flex:1 1 100%; justify-content:center;}
  .hero-trust{justify-content:flex-start;}
  .globe-wrap{height:290px !important;}
  .globe-badge{font-size:11px; padding:8px 11px;}
  .gb-1{left:2px; top:14px;} .gb-2{right:2px;} .gb-3{left:10px;}
  /* --- Verified Companies: horizontal side-scroll --- */
  .compgrid{display:flex !important; grid-template-columns:none !important; overflow-x:auto; gap:14px; scroll-snap-type:x mandatory; scrollbar-width:none; padding:2px 2px 10px; margin:0 calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter);}
  .compgrid::-webkit-scrollbar{display:none;}
  .compgrid > *{flex:0 0 78%; scroll-snap-align:start;}
  /* --- keep Trade Services tidy 2-up --- */
  .svcgrid{grid-template-columns:1fr 1fr !important; gap:12px;}
  /* --- header: search on its own full-width row --- */
  header.main{flex-wrap:wrap; height:auto; min-height:58px; padding:8px var(--gutter); row-gap:9px; align-items:center;}
  .logo{order:1; margin-right:auto;}
  .mobile-menu-btn{order:2;}
  .searchbar{display:flex !important; order:5; flex-basis:100%; width:100%; max-width:100%; height:46px;}
  .searchbar .scope{display:none;}
  .searchbar .search-tool{display:none;}
  .searchbar input{font-size:14px;}
}
@media (max-width:400px){
  .hero h1{font-size:24px !important;}
  .compgrid > *{flex:0 0 84%;}
  .svcgrid{grid-template-columns:1fr !important;}
}

/* ===== WordPress theme additions ===== */
.brand-logo-img{height:46px;width:auto;max-width:340px;display:block;object-fit:contain;}
.brand-logo-footer{height:42px;max-width:280px;}
@media (max-width:900px){ .brand-logo-img{height:40px;} }
@media (max-width:600px){ .brand-logo-img{height:34px;max-width:210px;} }
/* editable content images render full, never cropped */
#app .wp-block-image img,#app .mye-editable img,#app img.full{height:auto!important;max-width:100%!important;object-fit:contain!important;}
/* Gutenberg editable content wrapper on marketing pages */
.mye-editable{max-width:var(--maxw);margin:0 auto;padding:40px var(--gutter);}
.mye-editable .wrap{padding-left:0;padding-right:0;}
/* loading state so page never looks broken before JS mounts */
#app.mye-booting{min-height:60vh;}

/* ===== Auth modal additions (Sign In / Join Free) ===== */
.lg-msg{font-size:12.5px;margin:8px 0 0;min-height:16px;line-height:1.4;}
.lg-msg.err{color:var(--red);}
.lg-msg.ok{color:var(--green);}
.mye-role{display:flex;gap:10px;margin-top:6px;}
.mye-role-opt{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-soft);transition:border-color .2s,background .2s;}
.mye-role-opt:has(input:checked){border-color:var(--blue);background:var(--blue-pale);color:var(--ink);}
.mye-role-opt input{accent-color:var(--blue);}
.lg-testotp{font-size:13px;margin:8px 0 0;color:var(--blue-deep);background:var(--blue-pale);border-radius:8px;padding:8px 10px;text-align:center;}
.lg-testotp:empty{display:none;}

/* ===== Login / Register modal (screenshot-matched) ===== */
.login-card #loginTitle,.login-card .reg-title{font-size:26px;font-weight:800;color:#0F2470;letter-spacing:-.02em;margin:0 0 4px;}
.reg-sub{font-size:14px;color:var(--text-soft);margin:0 0 12px;}
.reg-info{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);font-weight:600;margin:0 0 16px;}
.reg-i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#1E9E6A;color:#fff;font-size:12px;font-style:italic;font-weight:700;flex-shrink:0;}
/* small India flag */
.pi-flag{
  width:22px;height:15px;border-radius:3px;overflow:hidden;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23fff'/%3E%3Crect width='60' height='13.34' fill='%23FF9933'/%3E%3Crect y='26.66' width='60' height='13.34' fill='%23138808'/%3E%3Ccircle cx='30' cy='20' r='5' fill='none' stroke='%23000080' stroke-width='0.6'/%3E%3Ccircle cx='30' cy='20' r='1' fill='%23000080'/%3E%3Cg stroke='%23000080' stroke-width='0.5'%3E%3Cline x1='30' y1='15' x2='30' y2='25'/%3E%3Cline x1='25' y1='20' x2='35' y2='20'/%3E%3Cline x1='26.46' y1='16.46' x2='33.54' y2='23.54'/%3E%3Cline x1='33.54' y1='16.46' x2='26.46' y2='23.54'/%3E%3Cline x1='27.68' y1='15.34' x2='32.32' y2='24.66'/%3E%3Cline x1='32.32' y1='15.34' x2='27.68' y2='24.66'/%3E%3Cline x1='25.34' y1='17.68' x2='34.66' y2='22.32'/%3E%3Cline x1='25.34' y1='22.32' x2='34.66' y2='17.68'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
  background-position:center;
}
/* register fields with left icon */
.reg-field{position:relative;margin-bottom:12px;display:flex;align-items:center;}
.reg-field .reg-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#98A1B8;pointer-events:none;}
.reg-field .reg-ico svg{width:20px;height:20px;}
.reg-field > input.input{width:100%;padding-left:42px;height:50px;border:1px solid var(--line-2);border-radius:12px;}
.reg-field.reg-phone{border:1px solid var(--line-2);border-radius:12px;padding:0 12px;height:50px;gap:8px;}
.reg-field.reg-phone input.input{border:none!important;padding-left:8px;height:auto;box-shadow:none!important;}
.reg-field.reg-phone .pi-code{font-weight:700;color:var(--ink);}
.reg-tc{font-size:12.5px;color:var(--text-mut);text-align:center;margin:12px 0 0;line-height:1.5;}
.reg-tc a,.lg-foot a{color:var(--blue);text-decoration:underline;}
.lg-foot{margin:16px -28px -8px;padding:14px 28px 4px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-mut);text-align:center;}
.lg-msg .go-register,.lg-msg .go-login{color:var(--blue);font-weight:700;text-decoration:underline;}
/* red create-account button */
.btn-red{background:linear-gradient(135deg,#E23744,#C1272D);color:#fff;box-shadow:0 6px 16px rgba(193,39,45,.28);}
.btn-red:hover{background:linear-gradient(135deg,#d02e3a,#a81f25);transform:translateY(-1px);}

/* ===== password toggle + protected gate ===== */
.pw-wrap{position:relative;}
.pw-wrap .input{padding-right:44px;}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#98A1B8;padding:0;}
.pw-toggle svg{width:20px;height:20px;}
.pw-toggle.on{color:var(--blue);}
.reg-field .pw-toggle.reg-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);}
.reg-field > input#regPass{padding-right:42px;}
.mye-gate{max-width:520px;margin:70px auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:48px 40px;text-align:center;}
.mye-gate-ico{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;}
.mye-gate-ico svg{width:32px;height:32px;stroke:var(--blue-deep);fill:none;}
.mye-gate h2{font-size:24px;color:var(--ink);margin-bottom:10px;}
.mye-gate p{color:var(--text-soft);line-height:1.6;max-width:400px;margin:0 auto 24px;}
.mye-gate-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
/* ===== Footer logo: bigger, no white box, sits on footer color ===== */
.footer-logo{background:transparent!important;padding:0!important;box-shadow:none!important;}
.footer-logo .logo-chip{background:transparent!important;box-shadow:none!important;padding:0!important;}
.brand-logo-footer{height:70px!important;max-width:420px!important;background:transparent!important;}
@media (max-width:600px){ .brand-logo-footer{height:48px!important;max-width:240px!important;} }

/* Slide 1 — "Source verified. Trade smarter." */
.tb-slide.art-6{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-26-2026-08_44_51-PM.png') center/cover no-repeat !important; }
/* Slide 2 — "Fresh arrivals, every single day" */
.tb-slide.art-3{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-26-2026-08_47_48-PM.png') center/cover no-repeat !important; }
/* Slide 3 — "Grow 10x with MYE Premium" */
.tb-slide.art-2{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-26-2026-08_49_03-PM.png') center/cover no-repeat !important; }
/* Slide 4 — "Post once. Get quotes in hours." */
.tb-slide.art-4{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-26-2026-08_51_48-PM.png') center/cover no-repeat !important; }
/* Bada left block (subcategories wala) */
#showcases > section:nth-child(1) .sc-feature{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-27-2026-12_42_17-AM.png') center/cover no-repeat !important; }

/* Applinces */
#showcases > section:nth-child(1) .sc-card:nth-child(1) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/tshirt1.webp') center/cover no-repeat !important; }
#showcases > section:nth-child(1) .sc-card:nth-child(2) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-12.10.43-AM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(1) .sc-card:nth-child(3) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-12.12.43-AM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(1) .sc-card:nth-child(4) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-12.15.37-AM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(1) .sc-card:nth-child(5) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-12.27.20-AM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(1) .sc-card:nth-child(6) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-12.20.56-AM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(2) .sc-feature{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-27-2026-12_30_24-AM.png') center/cover no-repeat !important; }
/* Consumer Electronics & Household Appliances */
#showcases > section:nth-child(2) .sc-card:nth-child(1) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-1.09.12-AM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(2) .sc-card:nth-child(2) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-9.48.37-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(2) .sc-card:nth-child(3) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-11.26.56-AM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(2) .sc-card:nth-child(4) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-11.26.41-AM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(2) .sc-card:nth-child(5) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-9.53.13-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(2) .sc-card:nth-child(6) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-9.57.09-PM.jpeg') center/cover no-repeat !important; }
/* Home Furnishing Products & Suppliers */
#showcases > section:nth-child(3) .sc-feature{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-27-2026-12_32_57-AM.png') center/cover no-repeat !important; }
#showcases > section:nth-child(3) .sc-card:nth-child(1) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-10.01.06-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(3) .sc-card:nth-child(2) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-10.08.13-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(3) .sc-card:nth-child(3) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-10.10.46-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(3) .sc-card:nth-child(4) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-10.14.12-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(3) .sc-card:nth-child(5) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-10.17.11-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(3) .sc-card:nth-child(6) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-10.21.42-PM.jpeg') center/cover no-repeat !important; }
/* Food & Beverage Products Suppliers */
#showcases > section:nth-child(4) .sc-feature{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-27-2026-12_37_32-AM.png') center/cover no-repeat !important; }
#showcases > section:nth-child(4) .sc-card:nth-child(1) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-10.28.26-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(4) .sc-card:nth-child(2) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-11.06.31-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(4) .sc-card:nth-child(3) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-11.17.09-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(4) .sc-card:nth-child(4) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-11.20.23-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(4) .sc-card:nth-child(5) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-11.22.59-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(4) .sc-card:nth-child(6) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-11.43.05-PM.jpeg') center/cover no-repeat !important; }
/* Pharmaceutical & Healthcare Products*/
#showcases > section:nth-child(5) .sc-feature{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/ChatGPT-Image-Jul-27-2026-12_39_59-AM.png') center/cover no-repeat !important; }
#showcases > section:nth-child(5) .sc-card:nth-child(1) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-11.46.59-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(5) .sc-card:nth-child(2) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-11.51.44-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(5) .sc-card:nth-child(3) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-26-at-11.57.23-PM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(5) .sc-card:nth-child(4) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-27-at-12.02.10-AM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(5) .sc-card:nth-child(5) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-27-at-12.09.03-AM.jpeg') center/cover no-repeat !important; }
#showcases > section:nth-child(5) .sc-card:nth-child(6) .scc-img{ background:url('https://makeyouexporter.com/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-27-at-12.20.41-AM.jpeg') center/cover no-repeat !important; }


/* ===== Homepage promo cards — background images ===== */
.ti-promo .ti-pcard{
  position:relative;
  overflow:hidden;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* Card 1 — yellow "Looking for a Product?" */
.ti-promo .ti-pcard.tp-buyer{
  background-image:url('https://makeyouexporter.com/wp-content/uploads/2026/07/Screenshot-2026-07-23-220656.png') !important;
}

/* Card 2 — red "Want to grow your business 10x faster" */
.ti-promo .ti-pcard.tp-seller{
  background-image:url('https://makeyouexporter.com/wp-content/uploads/2026/07/Sparktopus_Blog_IMG-26.webp') !important;
}

/* Dark overlay so the white text stays readable on any photo */
.ti-promo .ti-pcard::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
  z-index:0;
}
.ti-promo .ti-pcard .tp-txt,
.ti-promo .ti-pcard .tp-cta{
  position:relative; z-index:1;
}/* Buyer card — "Looking for a Product?" text ko white karo */
.ti-promo .ti-pcard.tp-buyer .tp-txt span,
.ti-promo .ti-pcard.tp-buyer .tp-txt b{
  color:#fff !important;
}

/* Seller card ka niche wala button — solid white (top card jaisa) */
.ti-promo .ti-pcard.tp-seller .tp-cta{
  background:#ffffff !important;
  color:#0F2470 !important;   /* text navy blue */
  border:none !important;
}
.ti-promo .ti-pcard.tp-seller .tp-cta svg,
.ti-promo .ti-pcard.tp-seller .tp-cta path{
  color:#0F2470 !important;
  stroke:#0F2470 !important;
  fill:#0F2470 !important;
}

/* ===== Hero carousel — poster exact fit ===== */
.ti-banner{
  aspect-ratio:16 / 9 !important;   
  min-height:0 !important;
  align-self:stretch !important;
}
.ti-banner .tb-slide{
  background-size:cover !important;
  background-position:center !important;
  background-color:transparent !important;
}
.ti-banner .tb-slide::after{ display:none !important; }
/* Company logos marquee — bade premium chips, original colours, seamless loop */
.marquee{ padding:34px 0; }
.marquee-track{ gap:30px; }
.marquee-track img.mq-logo{
  height:96px;              /* chip badi ki */
  width:auto;
  max-width:250px;
  object-fit:contain;
  flex:0 0 auto;
  padding:10px 20px;        /* logo ke charo taraf zyada space */
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-md);
  opacity:1;
  filter:none;              /* original colours */
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.marquee-track img.mq-logo:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
}
@media(max-width:640px){
  .marquee-track img.mq-logo{ height:70px; max-width:170px; padding:12px 20px; border-radius:16px; }
}
.marquee-track{display:flex; gap:56px; width:max-content; animation:marquee 26s linear infinite;}
/* ===== Membership comparison — mobile stacked view (no side-slide) ===== */
@media (max-width:760px){
  .adv-body .pt-wrap{ overflow:visible !important; border:none !important; background:transparent !important; box-shadow:none !important; }
  .pt{ min-width:0 !important; display:block !important; }

  /* Plan price cards upar (2x2 grid) */
  .pt thead{ display:block !important; }
  .pt thead tr{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px; }
  .pt thead .pt-corner{ display:none !important; }
  .pt thead .pt-h{ border-radius:14px !important; padding:14px 10px !important; border:none !important; }

  /* Har feature = ek card */
  .pt tbody{ display:block !important; margin-top:14px; }
  .pt tbody tr{ display:block !important; background:var(--surface) !important; border:1px solid var(--line); border-radius:14px; padding:4px 16px 8px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
  .pt tbody .pt-f{ display:block !important; text-align:left !important; max-width:none !important; font-size:14.5px; font-weight:700; padding:12px 0 10px !important; border-bottom:1px solid var(--line); }

  /* Har plan value ke aage uska naam */
  .pt tbody td{ display:flex !important; align-items:center; justify-content:space-between; padding:9px 0 !important; border-bottom:1px solid var(--line); border-radius:0 !important; }
  .pt tbody tr td:last-child{ border-bottom:none; }
  .pt tbody td::before{ font-weight:600; color:var(--text-mut); font-size:13px; text-align:left; }
  .pt tbody td:nth-child(2)::before{ content:"MYE Starter"; }
  .pt tbody td:nth-child(3)::before{ content:"MYE Premium"; }
  .pt tbody td:nth-child(4)::before{ content:"MYE Trusted"; }
  .pt tbody td:nth-child(5)::before{ content:"MYE Diamond"; }
  .pt tbody td .pt-v{ font-size:13.5px; }
  .pt tbody td .tk{ width:21px; height:21px; }

  /* Buy Now buttons (2x2) */
  .pt tfoot{ display:block !important; }
  .pt tfoot tr{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
  .pt tfoot .pt-corner{ display:none !important; }
  .pt tfoot .btn-buy{ border-radius:12px !important; }
}
/* ===== Marketplace — IndiaMART-style search results ===== */
.im-citybar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:var(--header-h);z-index:30;}
.im-city-inner{display:flex;align-items:center;gap:18px;padding:11px 0;flex-wrap:wrap;}
.im-city-left{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.im-city-label{font-weight:700;font-size:14px;color:var(--text);}
.im-city-search{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--surface);}
.im-city-search input{border:none;outline:none;padding:9px 12px;font-family:inherit;font-size:13px;background:transparent;color:var(--text);width:150px;}
.im-city-search svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;margin-right:10px;flex-shrink:0;}
.im-near{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--blue);white-space:nowrap;}
.im-near svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}
.im-city-tabs{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none;}
.im-city-tabs::-webkit-scrollbar{display:none;}
.im-ctab{white-space:nowrap;padding:10px 14px;font-size:13.5px;font-weight:600;color:var(--text-mut);border-bottom:2px solid transparent;cursor:pointer;}
.im-ctab:hover{color:var(--ink);}
.im-ctab.on{color:var(--blue);border-bottom-color:var(--blue);}
.im-layout{display:grid;grid-template-columns:250px 1fr;gap:22px;align-items:start;padding:22px 0 70px;}
.im-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--header-h) + 60px);}
.im-side-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;}
.im-side-h{font-size:14px;font-weight:700;color:var(--text);padding:13px 16px;border-bottom:1px solid var(--line);background:var(--bg-alt);}
.im-relcat{max-height:360px;overflow-y:auto;}
.im-rc{display:flex;align-items:center;gap:11px;padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--line);transition:background var(--fast);}
.im-rc:last-child{border-bottom:none;}
.im-rc:hover{background:var(--bg-alt);}
.im-rc.on{background:var(--blue-pale);}
.im-rc-thumb{width:44px;height:44px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;}
.im-rc-thumb svg{width:22px;height:22px;}
.im-rc-name{flex:1;font-size:13px;font-weight:600;color:var(--text);line-height:1.25;}
.im-rc-cnt{font-size:11.5px;color:var(--muted-2);font-weight:600;}
.im-fopt{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-soft);padding:9px 16px;cursor:pointer;border-bottom:1px solid var(--line);}
.im-fopt:last-child{border-bottom:none;}
.im-fopt input{accent-color:var(--blue);width:16px;height:16px;}
.im-fopt .cnt{margin-left:auto;font-size:11.5px;color:var(--muted-2);}
.im-main{min-width:0;}
.im-rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.im-rhead .cnt{font-size:14px;color:var(--text-mut);}.im-rhead .cnt b{color:var(--text);}
.im-list{display:flex;flex-direction:column;gap:16px;}
.im-card{display:grid;grid-template-columns:230px 1fr 250px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow var(--fast);}
.im-card:hover{box-shadow:var(--shadow-md);}
.im-media{position:relative;min-height:220px;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;}
.im-media .art{width:64px;height:64px;}
.im-media .fav{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);}
.im-media .fav svg{width:16px;height:16px;stroke:var(--red);fill:none;stroke-width:2;}
.im-cbody{padding:18px 20px;min-width:0;}
.im-name{display:block;font-size:17px;font-weight:700;color:var(--blue-deep);line-height:1.3;margin-bottom:8px;}
.im-name:hover{color:var(--blue);}
.im-quote{display:inline-block;font-size:15px;font-weight:700;color:var(--rust);text-decoration:underline;margin-bottom:12px;}
.im-attrs{display:flex;flex-direction:column;gap:6px;}
.im-attr{font-size:13.5px;line-height:1.4;}
.im-attr .il{color:var(--text-mut);}
.im-attr .iv{color:var(--text);font-weight:600;margin-left:4px;}
.im-more{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--blue);}
.im-sup{border-left:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:12px;}
.im-sup-top{display:flex;gap:10px;align-items:center;}
.im-sup-logo{width:44px;height:44px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex-shrink:0;}
.im-sup-info{min-width:0;}
.im-sup-name{display:block;font-size:15px;font-weight:700;color:var(--blue-deep);line-height:1.2;}
.im-sup-loc{font-size:12px;color:var(--text-mut);display:flex;align-items:center;gap:3px;margin-top:2px;}
.im-sup-loc svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.im-sup-badges{display:flex;flex-wrap:wrap;gap:6px 10px;}
.im-bdg{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--text-soft);}
.im-bdg svg{width:13px;height:13px;}
.im-bdg.gst{color:var(--green);}
.im-bdg.tr{color:var(--blue);}
.im-bdg.vr{color:var(--green);}
.im-bdg.yr{color:var(--text-mut);}
.im-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 14px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;}
.im-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.im-btn-mobile{border:1px solid var(--blue);color:var(--blue);background:var(--surface);}
.im-btn-mobile:hover{background:var(--blue-pale);}
.im-btn-inq{background:#12A37F;color:#fff;border:1px solid #12A37F;}
.im-btn-inq:hover{filter:brightness(1.06);}
@media(max-width:1080px){
  .im-layout{grid-template-columns:1fr;}
  .im-side{position:static;}
  .im-citybar{position:static;}
  .im-card{grid-template-columns:180px 1fr;}
  .im-sup{grid-column:1 / -1;border-left:none;border-top:1px solid var(--line);flex-direction:row;flex-wrap:wrap;align-items:center;}
  .im-sup-top{flex:1 1 200px;}
  .im-sup-badges{flex:1 1 100%;}
  .im-btn{flex:1;}
}
@media(max-width:600px){
  .im-card{grid-template-columns:1fr;}
  .im-media{min-height:170px;}
  .im-city-tabs{width:100%;}
  .im-city-left{width:100%;flex-wrap:wrap;}
}
/* home region cards — 4 per row + full state photos (4:3) */
.state-grid{grid-template-columns:repeat(4,1fr);}
.sc-img.photo{height:auto; aspect-ratio:4/3; padding:0; background:#fff; align-items:center;}
.sc-img.photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--med) var(--ease);}
.state-card:hover .sc-img.photo img{transform:scale(1.05);}
@media (max-width:1024px){ .state-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:720px){ .state-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:440px){ .state-grid{grid-template-columns:1fr;} }
.lg-forgot{font-size:12px;font-weight:600;color:var(--blue);}
.lg-forgot:hover{text-decoration:underline;}
/* Top Major Export Categories — image card marquee (loop) */
.excat-marquee{overflow:hidden;padding:10px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.excat-track{display:flex;gap:20px;width:max-content;animation:excatmarquee 45s linear infinite;}
.excat-marquee:hover .excat-track{animation-play-state:paused;}
@keyframes excatmarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.excat-card{flex:0 0 auto;width:210px;text-decoration:none;background:var(--surface,#fff);border:1px solid var(--line,#e6eaf3);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm,0 1px 3px rgba(20,30,60,.06));transition:transform .28s ease,box-shadow .28s ease;}
.excat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg,0 18px 40px rgba(20,30,60,.16));}
.excat-img{display:block;width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#eaf0fb,#dae3f6);}
.excat-img img{width:100%;height:100%;object-fit:cover;display:block;}
.excat-name{display:block;text-align:center;font-weight:700;font-size:14.5px;color:var(--text,#1f2740);padding:12px 10px;background:var(--surface,#fff);}
/* ===== Category hover mega-menu — bigger card for 6 subcategory groups ===== */
.ti-mega{ width:min(880px,66vw) !important; max-width:880px !important; padding:26px 30px !important; }
.tm-grid{ grid-template-columns:repeat(3,1fr) !important; gap:10px 30px !important; }
.tm-col .tm-h{ font-size:13px !important; margin-bottom:8px !important; }
.tm-col a{ font-size:13.2px !important; padding:6px 0 !important; }
.im-sup-logo{
    width:64px;
    height:64px;
    min-width:64px;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--line);
}

.im-sup-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
/* JS-controlled hover-intent — replaces flaky pure-CSS hover for category mega-menu */
.ti-cat.mega-open .ti-mega{opacity:1 !important; visibility:visible !important; transform:translateX(0) !important;}
.ti-mega{pointer-events:auto;}
/* ===== Category mega-menu: 3 → 4 columns (final override) ===== */
.tm-grid{
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px 26px !important;
}
.tm-col{
  min-width:0 !important;
}
.tm-col a{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* dropdown ko thoda chauda karo taaki 4 columns crowd na ho */
.ti-mega{
  width:min(980px, 72vw) !important;
  max-width:980px !important;
}

/* responsive fallback jab screen chhoti ho */
@media (max-width: 1200px){
  .tm-grid{ grid-template-columns: repeat(3, 1fr) !important; }
  .ti-mega{ width:min(820px, 68vw) !important; }
}
@media (max-width: 1080px){
  /* is breakpoint ke baad .ti-mega already display:none hai, isliye issue nahi */
  .tm-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}