/* 07-refinements — Design refinements added over time (premium polish, testimonials, regions, CTA, header v2, sell page, login modal, flags, marquee, offer popup …).
   Loaded on every page in file-name order (see inc/core/assets.php). */

/* ===== 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;}

.prod-actions .btn{white-space:nowrap;}

.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); padding:24px; box-shadow:var(--shadow-sm);}

.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{ margin:6px 0 10px;}

.testi p{color:var(--text-soft);}

.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); position:relative; overflow:hidden;}

.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-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 h3{ 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::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;}

.tf-metric{ 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-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);}

.ti-side-head{ font-weight:700; color:var(--text);}

.ti-sidebar ul{list-style:none; margin:0; padding:0;}

.ti-cat > a{display:flex; align-items:center; gap:11px; border-radius:10px; font-weight:550; color:var(--text-soft); transition:background var(--fast), color var(--fast);}

.ti-cat > a .tc-ico{ border-radius:8px; background:var(--blue-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0;}

.ti-cat > a .tc-ico svg{ 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; font-weight:700; color:var(--blue); border-top:1px solid var(--line);}

/* mega flyout */

.ti-mega{position:absolute; border-radius:18px; 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;}

.tm-col .tm-h{ font-weight:700; color:var(--text);}

.tm-col a{ color:var(--text-mut); 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; 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{ 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;}

.mva-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}

.mva-card{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; 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{ 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{ stroke:var(--blue-deep); fill:none; stroke-width:1.8;}

.mva-b b{display:block; line-height:1.25;}

.mva-desc{ color:var(--text-mut); display:block;}

.mva-learn{display:inline-flex; align-items:center; gap:6px; 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;}

.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; 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;}

.country-panel::before{content:""; position:absolute; inset:0; pointer-events:none;}

.country-panel::after{content:""; position:absolute; inset:0; pointer-events:none;}

.country-panel .cp-inner{ z-index:1;}

.cp-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:920px; margin:0 auto;}

.cpst{ border-radius:16px; text-align:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}

.cpst:hover{ background:rgba(255,255,255,.15);}

.cpst b{ font-weight:800; color:#fff; letter-spacing:-.02em; display:inline-flex; align-items:flex-start; line-height:1;}

.cpst b i{ font-style:normal; margin-left:2px;}

.cpst span{display:block; color:rgba(255,255,255,.84);}

/* flag marquee */

.flag-marquee{position:relative; z-index:1; 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; overflow:hidden; 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);} }

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

.showcase-title{font-size:24px; font-weight:700; margin-bottom:20px; letter-spacing:-.01em;}

.showcase{display:grid; 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; 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){ .sc-feature{min-height:200px;} .scf-list{flex-direction:row; flex-wrap:wrap; gap:10px 20px;} }

/* ===== 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 .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 .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%); border-radius:3px;}

.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 b i{color:var(--gold-2);}

.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) */

/* refined divider under subtitle */

/* 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 */

.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; 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;}

.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; row-gap:9px;}
  .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;}
}