@charset "UTF-8";
/* EX-IM · inner.css · every page except the homepage (load after vendor/bootstrap and site.css).
   The first part is the inner pages' layout, carried over from the old site stylesheets and trimmed to the rules
   these pages use; the NEW DESIGN layer at the end re-skins it to match the homepage. */

/* ---- from variable-style.css ---- */
:root { --black-txtcolor:#000; --white-txtcolor:#fff; --white-txtlight:#f1f1f1; --input-whitebg:#fff; --white-cardbg:#fff; --black-txtlight:#374151; --body-bgcolor:#000; --navbar-bgcolor:#3f3e3e; --wrapper-box-bg:#020202; --price-card-bg:#fff; --price-card-feature:linear-gradient(160deg,#F7C9A5 0%,#C8C2FF 50%,#74D8FF 100%); --navlink-hover:#0eb5f6; --seopage-title:linear-gradient(90deg, #ff792d 0%, #8c72ff 10%, #00b6f1 30%); --title-color:linear-gradient(90deg, #FFBA6A 30%, #D8D3FF 50%, #6FE2FF 80%); --tradesub-color:linear-gradient(90deg, #ff792d 0%, #8c72ff 50%, #00b6f1 100%); --text-muted: #868686; --divider-color: #292929; --cardborder:#e5e5e5; --owlnav-btnbg:#C8C2FF; --footer-linkhover:#f0f0f0; --bg-gradient:linear-gradient(120deg,#F7C9A5 0%,#C8C2FF 50%,#74D8FF 100%); --bg-gradient-dark:radial-gradient(circle at 12% 3%, #58122D 0%, #B0497F 20%, transparent 43%), radial-gradient(circle at 92% 0%, #E285A5 0%, #8A6FC9 38%, transparent 63%), radial-gradient(circle at 4% 85%, #5679CE 0%, #B6CCFA 35%, transparent 58%), linear-gradient(135deg, #8AA0E6 0%, #8A6FC9 55%, #644EA7 100%); --progress-bg:#edf4f6; --text-primary: #fff; --text-secondary: #374151; --text-muted:#707070; --table-bg: #101010; --table-alt:linear-gradient( 90deg, #fff5ef 10%, #f7f4ff 50%, #e4f8ff 100%); --table-hover: linear-gradient( 90deg, #fff5ef 10%, #f7f4ff 50%, #e4f8ff 100%); --card-bg: #101010; --card-bg-alt: #161616; --cmp-badge-color:linear-gradient(90deg, #FFBA6A -20%, #D8D3FF 50%, #6FE2FF 100%); --section-bg: #101010; --table-header: #262626; --slider-gradient-text:linear-gradient(90deg, #F7C9A5 10%, #C8C2FF 60%, #74D8FF 100%); --trade-tabs-bg:linear-gradient(180deg, #171717, #0b0b0b); --trade-tabs-border:rgba(255,255,255,.25); --subtitle-color:#f2f2f2; --track: #edf1f7; --bg-lightgradient:linear-gradient(90deg, rgba(138, 126, 249, .06), rgba(255, 255, 255, .88), rgba(14, 181, 246, .05)); --orange: #FFBA6A; --purple: #D8D3FF; --cyan: #6FE2FF; --dark: #000000; --duration: 12s; --blueg: #0099cc; --goldg: #dcaf26; --bgcg: #ffffff; --textg: #555555; --gridg: #e4e7eb; --bg:#020303; --card:#1a1b1d; --card-border:#505154; --blue:#64dfff; --orange-clr: #f7b85f; --peach-clr: #f7c9a5; --purple-clr: #c8c2ff; --cyan-clr: #74d8ff; --pill-bg-clr: #202020; --border-soft:#5c6067; --border:#505154; }

/* ---- from common-styles.css ---- */
body.modal-open { padding-right: 0 !important; }
.modal { padding-right: 0 !important; }
* { box-sizing:border-box }
.padding-page { padding: 70px 0px; }
a { text-decoration: none; }
.form-control:disabled { background-color: var(--bs-secondary-bg) !important; opacity: 1; }
.wrapper-box { max-width: 1480px; width: 100%; margin: auto; background: var(--wrapper-box-bg); }
.h-title { font-size: 40px; font-weight: 700; background:var(--title-color); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.inpagepara { font-size: 18px; line-height: 1.45; color: var(--white-txtlight); font-weight: 300; }
.secondery-title { font-size: 25px; font-weight: 700; line-height: 1.15; margin-bottom: 12px; background: var(--seopage-title); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero { display:flex; align-items:center; justify-content:center; text-align:center; margin-top: 22.2%; }
.serach_hero { margin-top: 10.5%; }
.hero h1 { font-size:48px; font-weight:700; line-height:1.1; }
.hero p { color:var(--white-txtlight); font-size:18px; max-width:700px; margin:20px auto 30px; line-height: 24px; font-weight: 300; }
.search-wrapper { max-width:612px; margin:auto; background: transparent; padding:2px; border-radius:50px; }
.search-inner { border-radius:50px; display:flex; align-items:center; padding:8px; border: 2px solid transparent; background: linear-gradient(#091731, #07132c) padding-box, linear-gradient(135deg, var(--orange), var(--purple), var(--cyan)) border-box; }
.search-icon { color:#fff; padding:0 8px; font-size:18px; }
.search-inner input { flex:1; background:transparent; border:none; color:var(--white-txtcolor); font-size:16px; font-weight: 400; }
.search-inner input:focus { outline:none; box-shadow:none; }
.search-btn { width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--cmp-badge-color); color: var(--black-txtcolor); font-size: 16px; }
.enquiry-section h1 { font-size: 40px; font-weight: 700; text-align: center; margin-bottom: 40px; background: var(--title-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.plan-card { max-width: 420px; margin: auto; margin-bottom: 70px; padding: 30px; border-radius: 18px; background: var(--bg-gradient); color:var(--on-grad); position: relative; }
.plan-badge { position: absolute; top: 25px; right: 25px; background: #000; color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 20px; font-weight: 400; }
.plan-name { font-size: 15px; font-weight: 700; text-transform: uppercase; }
.plan-card .plan-name { background: none; -webkit-background-clip: initial; -webkit-text-fill-color: var(--on-grad); color: var(--on-grad); }
.plan-price { font-size: 32px; font-weight: 700; line-height: 1; margin: 10px 0; }
.plan-bdemo { font-size: 14px; font-weight: 500; }
.enquiry-form { max-width: 900px; margin: auto; }
.form-check-label { font-size: 15px; }
.enquiry-form .form-label { font-size: 18px; margin-bottom: 8px; color: var(--black-txtcolor); font-weight: 400; }
.gradient-input .form-control, .gradient-input .form-select { height: 52px; background: var(--white-cardbg); border: 0; color:var(--black-txtcolor); border-radius: 8px; font-size: 16px; padding: 8px 18px; }
.form-control::placeholder { color: #666; }
.form-control:focus, .form-select:focus { background: #fff; color: var(--black-txtcolor); box-shadow:none; }
.gradient-input { background:#dce4eb; padding:2px; border-radius: 10px; transition: .35s ease; }
.gradient-input:focus-within { background: var(--bg-gradient); }
.select-wrapper { position: relative; }
.select-wrapper .form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 50px; }
.select-wrapper i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #888; font-size: 20px; pointer-events: none; }
.form-select option { background: var(--white-cardbg); color:var(--black-txtlight); }
.submit-btn { width: 360px; max-width: 100%; height: 60px; border: none; border-radius: 10px; margin-top: 40px; background:var(--bg-gradient); color:var(--white-txtcolor); font-size: 20px; font-weight:500; transition: .3s; outline: none; }
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(116, 216, 255, .25); }
.white_bgfrm { box-shadow: 0 12px 28px rgba(17, 24, 39, .05); max-width: 820px; padding: 45px; border: 1px solid #fff; border-radius: 20px; background: #fff; }

.pricing-section{padding: 35px 0px 70px;}

@media(max-width:991px) {
.plan-price { font-size: 30px; }
}
@media(max-width:767px) {
.plan-card { margin-bottom: 40px; }
.submit-btn { margin-top: 25px; }
}
.success-section { min-height: 80vh; display: flex; align-items: end; justify-content: center; text-align: center; }
.success-title { font-size: 40px; font-weight: 700; line-height: 1.1; margin-bottom: 26px; background: var(--title-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.success-text { font-size:20px; color: var(--black-txtcolor); margin-bottom: 22px; font-weight: 400; }
.btn-gradient { min-width: 356px; height: 62px; border: 0; border-radius: 8px; font-size: 22px; font-weight: 500; background: var(--bg-gradient); color: var(--white-txtcolor); transition: all .3s ease; outline: none; }
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 14px 35px rgba(116, 216, 255, .25); color: var(--white-txtcolor); }
@media (max-width: 576px) {
.btn-gradient { min-width: 100%; }
}
.rating { margin-bottom: 12px; color: #f59e0b; font-size: 17px; letter-spacing: 2px; }
.gradient-input.is-invalid { background: #e0685f; }
.form-check-input.is-invalid { background: #e0685f; outline: none; }
.phone-input-group { display: flex; align-items: stretch; }
.phone-input-group .phone-code-addon { position: relative; display: flex; align-items: center; justify-content: center; min-width: auto; white-space: nowrap; padding: 0 14px 0 18px; background: var(--white-cardbg); color: var(--black-txtcolor); border-radius: 8px 0 0 8px; font-size: 16px; font-weight: 400; }
.phone-input-group .phone-code-addon::after { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 22px; transform: translateY(-50%); background: var(--cardborder, #ddd); margin-right: 3px; }
.phone-input-group .form-control { border-radius: 0 8px 8px 0; }
.voucher-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.voucher-input-wrap { flex: 1 1 240px; margin: 0; }
.voucher-apply-btn { flex: 0 0 auto; width: auto; margin: 0; padding-left: 32px; padding-right: 32px; font-size: 18px; height: 54px; }
.payment-method-option { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid #dce4eb; border-radius: 8px; cursor: pointer; }
.payment-method-option input[type="radio"] { accent-color: #0eb5f6; }
.payment-method-option:has(input:checked) { border-color: #0eb5f6; }
.payment-method-logo { height: 24px; width: auto; }
.details-modal .modal-content { border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); background: var(--table-bg); }
.details-modal .modal-header { min-height: 58px; padding: 15px 16px; background: var(--price-card-bg); border-bottom: 1px solid var(--divider-color); }
.details-modal .modal-title { font-size: 18px; font-weight: 500; color: var(--black-txtcolor); }
.details-modal .btn-close { font-size: 18px; opacity: 0.75; background: none; outline: none; box-shadow: none; color: var(--black-txtlight); line-height: 20px; }
.details-modal .modal-body { padding: 15px; background:var(--white-cardbg); }
.details-modal .form-control, .details-modal .form-select { height: 43px; border: 1px solid var(--divider-color); border-radius: 8px; background-color: var(--white-cardbg); font-size: 14px; color: var(--black-txtcolor); box-shadow: none; }
.details-modal .form-control { padding: 10px 12px; }
.details-modal .form-select { padding-left: 15px; }
.details-modal .form-control:focus, .details-modal .form-select:focus { border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--cmp-badge-color) border-box; box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.05); }
.details-modal .form-control::placeholder { color: #666; opacity: 1; }
.phone-wrapper { display: flex; width: 100%; }
.phone-code { width: 50px; height: 43px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--divider-color); border-radius: 8px 0 0 8px; background:#eee; color: var(--black-txtcolor); font-size: 14px; flex-shrink: 0; }
.phone-wrapper .form-control { border-left: 0; border-radius: 0 8px 8px 0; }
.btn_submit { width: 100%; height: 44px; border: 0; border-radius: 8px; font-size: 16px; font-weight: 500; color: #fff; background:var(--cmp-badge-color); transition: all 0.25s ease; outline: none; }
.btn_submit:hover { opacity: 0.9; transform: translateY(-1px); }
.modal-dialog-centered { min-height: calc(60% - var(--bs-modal-margin) * 2); }
@media (min-width: 576px) {
.details-modal .modal-dialog { max-width: 600px; }
}
.tab_sec .tab-content { margin-top: 18px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .94); box-shadow: 0 14px 35px rgba(0, 0, 0, .05); overflow: hidden; outline: none; }
.tab_sec .nav-tabs { display: flex; gap: 10px; border: 0; padding: 7px; border-radius: 16px; }
.tab_sec .accordion-item { border: 0; }
.pricing-section .tab_sec h2 { border-bottom:1px solid var(--divider-color); }
.tab_sec .nav-link { border: 0 !important; border-radius: 10px; padding: 8px 18px; color: #8a7ef9; font-size: 15px; font-weight: 700; background: #fff; transition: .25s ease; }
.tab_sec .nav-link.active { color: #fff; background: var(--bg-gradient); box-shadow: 0 5px 10px rgba(138, 126, 249, .22); }
.tab_sec .accordion-body .col-xl-3, .col { margin-top: 0; }
@media (max-width: 991px) {
.tab_sec .tab-content>.tab-pane { display: block; opacity: 1; }
}
@media (max-width: 991px) {
.h-title, .enquiry-section h1, .success-title { font-size: 32px; }
.secondery-title { font-size: 22px; }
}
@media (max-width: 767px) {
.padding-page { padding: 30px 10px; }
.enquiry-form .form-label { font-size: 16px; }
.gradient-input .form-control, .gradient-input .form-select { height: 50px;font-size: 15px; }
.plan-card { padding: 22px; }
.success-section { min-height: 68vh; }
.secondery-title { font-size: 20px;line-height: 1.3; }
}
@media (max-width: 575px) {
.h-title, .enquiry-section h1, .success-title { font-size: 26px; }
.success-text { font-size: 17px; }
.submit-btn { width: 100%;height: 54px;font-size: 18px; }
.plan-price { font-size: 25px; }
.enquiry-section h1 { margin-bottom: 25px; }
}
@media (max-width: 480px) {
.voucher-apply-btn { flex: 1 1 100%; }
}
@media (max-width: 1199px) {
.hero { margin-top: 230px; }
.serach_hero { margin-top: 120px; }
}
@media (max-width: 991px) {
.hero { margin-top: 150px; }
.serach_hero { margin-top: 90px; }
.hero h1 { font-size: 38px; }
}
@media (max-width: 767px) {
.hero { margin-top: 120px;line-height: 1.2;padding: 0 10px; }
.serach_hero { margin-top:35px; }
.hero h1 { font-size: 32px;line-height: 40px;width: 90%;margin: auto; }
.hero h1 br, .hero p br { display: none; }
}
@media (max-width: 575px) {
.hero h1 { font-size: 26px;line-height: 35px;width: 100%; }
.hero p { font-size: 15px;line-height: 22px;margin: 16px auto 26px; }
.search-inner { padding: 6px; }
.search-inner input { font-size: 15px;min-width: 0; }
.search-icon { padding: 0 6px; }
.search-btn { width: 36px;height: 36px;flex: 0 0 36px;font-size: 14px; }
.search-wrapper { max-width: 365px; }
}
@media (min-width:360px) and (max-width: 767px) {
.tab_sec .tab-content { margin-top: 30px; }
.white_bgfrm { padding: 20px; }
.payment-method-option { gap: 7px;padding: 10px 14px; }
.enquiry-form .form-check-label { font-size: 14px; }
}
@media (min-width:768px) and (max-width: 991px) {
.padding-page { padding: 40px 0px; }
.tab_sec .accordion-body .col-xl-3, .col { margin-bottom:25px; }
.pm-notes { margin-top: 0; }
}
@media (min-width:992px) and (max-width: 1199px) {
.padding-page { padding: 50px 0px; }
.tab_sec .accordion-body .col-xl-3, .col { margin-bottom:25px; }
.pm-notes { margin-top: 0; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
.hero { margin-top: 18%; }
}

/* ---- from seo-page-style.css ---- */
:root { --body-bg: #000000; --navbar-bg: #050307; --section-bg: #101010; --primary: #8b5cf6; --primary-hover: #a78bfa; --primary-light: #c4b5fd; --warning: #fbbf24; --company-badge:linear-gradient(90deg, #FFBA6A -20%, #D8D3FF 50%, #6FE2FF 100%); }
.text-soft { color: var(--text-secondary) !important; }
.cmp-profileseo { padding: 40px 0 70px; }
.company-header { text-align: center; margin-bottom: 35px; }
.company-header .section-title { font-size: 30px; margin-bottom: 15px; }
.company-country { color: var(--text-secondary); font-size: 14px; }
.company-country .hero-flag { vertical-align: middle; margin-right: 4px; margin-top: -2px; border-radius: 2px; }
.country-flag-img { vertical-align: middle; margin-top: -2px; border-radius: 2px; }
.company-badge { display: inline-block; margin-left: 8px; padding:5px 15px 6px; border-radius: 30px; background: var(--cmp-badge-color); color: var(--white-txtcolor); font-size: 14px; font-weight: 600; }
.type-switcher { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 2px; }
.type-btn:hover, .type-btn.active { background: #8874ff; color: #fff !important; }
.type-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 18px; border-radius: 20px; font-size: 14px; font-weight: 500; border: 2px solid #8874ff; color: #8874ff; text-decoration: none; transition: all .2s; background: #fff; letter-spacing: .3px; }
.address-wrapper { margin-top: 15px; }
.top_cardbox { background: var(--price-card-bg); border-radius: 20px; }
.dark-card { background: var(--price-card-bg); border-radius: 20px; padding: 22px; }
.dark-card .aboutus-para { color:var(--black-txtlight); font-weight: 400; line-height: 1.45; font-size: 17px; text-align: justify; }
.card-title { font-size: 22px; font-weight: 700; line-height: 1.15; margin-bottom: 12px; background:var(--seopage-title); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.subh-title { font-size: 19px; font-weight: 500; margin-bottom: 15px; color: #74D8FF; letter-spacing: 0.1px; }
.chart-box { height: 100%; padding: 20px; background: var(--price-card-bg); border: 1px solid var(--divider-color); border-radius: 20px; }
.chart-box h6 { color: var(--text-primary); }
.chart-box p { color: var(--text-muted); }
.bar-item { margin-bottom: 18px; }
.bar-title { display: flex; justify-content: space-between; color: var(--black-txtlight); font-size: 12px; margin-bottom: 7px; font-weight: 500; }
.bar-track { height: 9px; background: var(--progress-bg); border-radius: 30px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--bg-gradient); border-radius: 30px; }
.donut { width: 165px; height: 165px; margin: 25px auto; border-radius: 50%; position: relative; background: conic-gradient( var(--primary) 0 42%, var(--primary-light) 42% 66%, #64748b 66% 82%, var(--progress-bg) 82% 100% ); }
.donut::after { content: ""; position: absolute; width: 88px; height: 88px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--price-card-bg, #fff); border-radius: 50%; }
.custom-table { margin-bottom: 0; border-color: var(--divider-color); }
.custom-table thead { background: var(--bg-gradient); }
.custom-table thead th { background:transparent; color: #fff; border-color: var(--divider-color); font-size: 14px; font-weight: 500; padding: 13px; white-space: nowrap; }
.custom-table tbody td { background: transparent; color: var(--black-txtlight); border-color: var(--divider-color); font-size: 13px; padding: 13px; white-space: nowrap; font-weight: 500; }
.custom-table tbody tr:last-child td { border-bottom: 0; }
.custom-table tbody tr:nth-child(even) { background: var(--table-alt); }
.custom-table tbody tr:hover { background: var(--table-hover); }
.market-item { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--divider-color); color: var(--text-secondary); font-size: 13px; font-weight: 500; }
.market-item:last-child { border-bottom: 0; }
.map-box { min-height: 280px; border: 1px solid var(--divider-color); border-radius: 20px; background:var(--price-card-bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.locked-area { min-height: 230px; position: relative; background: var(--white-cardbg); border: 1px solid var(--divider-color); border-radius: 20px; overflow: hidden; }
.blurred-content { padding: 70px 25px; color: var(--text-secondary); opacity: .2; filter: blur(4px); }
.unlock-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width:320px; max-width: calc(100% - 30px); padding: 24px; text-align: center; background: var(--white-cardbg); border: 1px solid var(--divider-color); border-radius: 12px; box-shadow:0 8px 30px rgba(0, 0, 0, .12); }
.unlock-card p { color: rgba(0, 0, 0, .5); font-size: 14px; font-weight:400; }
.unlock-card h6 { color: var(--text-primary); }
.unlock-icon { font-size: 25px; margin-bottom: 8px; }
.btn-unlock { background: var(--cmp-badge-color); border: 0; padding: 5px 12px; font-weight: 500; border-radius: 6px; color: var(--white-txtcolor); }
.btn-unlock:hover { color: var(--white-txtcolor); }
.btn-unlock .btn:first-child:active, :not(.btn-check)+.btn:active { color: var(--white-txtcolor); }
.score-number { color: var(--primary); font-size: 48px; font-weight: 700; }
.stars { color: var(--warning); letter-spacing: 3px; }
.accordion-item { background: var(--white-cardbg); border-color: var(--cardborder); }
#faq { border-radius: 20px; overflow: hidden; }
#faq .accordion-item:first-child .accordion-button { border-radius: 20px 20px 0 0; }
#faq .accordion-item:first-child { border-radius: 20px 20px 0 0; overflow: hidden; }
#faq .accordion-item:last-child .accordion-body { border-radius: 0 0 20px 20px; }
#faq .accordion-item:last-child .accordion-button.collapsed { border-radius: 0 0 20px 20px; }
#faq .accordion-item:last-child { border-radius: 0 0 20px 20px;overflow: hidden; }
.accordion-button { background:var(--white-cardbg); color: var(--black-txtcolor); font-size: 16px; font-weight: 500; }
#faq .accordion-button, #faq .accordion-button:not(.collapsed) { color: var(--text-secondary, #374151); }
.accordion-button:not(.collapsed) { background: var(--table-alt); color: var(--black-txtcolor); box-shadow: none; }
.accordion-button:focus { box-shadow: none; }
.accordion-button::after { filter: invert(0); }
.accordion-body { background:var(--white-cardbg); color: var(--text-secondary); font-size: 14px; letter-spacing: 0.2px; font-weight:400; outline: none; }
.selling-partners-table { position: relative; border: 1px solid var(--divider-color); border-radius: 20px; overflow: hidden; }
.selling-partners-table > .table-responsive { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.locked-row { filter: blur(4px); opacity: .22; user-select: none; pointer-events: none; }
.selling-lock { position: absolute; left: 0; right: 0; bottom: 0; min-height: 95px; display: flex; align-items: center; justify-content: center; color: var(--black-txtlight); background: linear-gradient(to bottom, transparent 0%, var(--white-cardbg) 55%); }
@media (max-width: 767px) {
.dark-card .aboutus-para { text-align: left;font-size: 15px;line-height: 1.6; }
.cmp-profileseo { padding: 24px 0 50px; }
.company-header .section-title { font-size: 24px; }
.card-title { font-size: 19px; }
.subh-title { font-size: 17px; }
.dark-card { padding: 18px; }
.chart-box { padding: 16px; }
.custom-table thead th, .custom-table tbody td { padding: 10px; }
.selling-lock { padding: 20px 20px 30px; }
}
@media (max-width: 575px) {
.type-switcher { flex-wrap: wrap; }
.company-badge { margin-left: 0; }
.address-wrapper { word-break: break-word; }
}
.company-name-highlight { color: #000; font-weight: 600; margin-left: 4px; }

/* ---- from innerpage-style.css ---- */
html, body { width: 100%;margin: 0;padding:0;overflow-x: hidden; }
body { font-family: "Inter"; font-weight: 400; font-style: normal; background: var(--body-bgcolor); }
.unlock-plan { padding: 70px 0; }
.analytics-card { position: relative; overflow-y: auto; overflow-x: hidden; height: 100%; min-height: auto; background: rgba(255,255,255,.95); border: 1px solid var(--cardborder); border-radius: 20px; box-shadow:0 14px 36px rgba(55,76,113,.06); }
.analytics-card::after { content: ""; position: absolute; top: -48px; right: -38px; width: 160px; height: 120px; border-radius: 50%; pointer-events: none; }
.accent-orange::after { background: rgba(249,130,37,.09); }
.accent-violet::after { background: rgba(138,126,249,.09); }
.accent-cyan::after { background: rgba(14,181,246,.08); }
.card-content { position: relative; z-index: 1; padding: 22px 18px 18px; }
.card-header-custom { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.header-left { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.icon-block { width: 38px; height: 38px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: #fff; font-size: 1.15rem; box-shadow: 0 10px 22px rgba(0, 0, 0, .09); background: linear-gradient(90deg, #6f51f6, #7d79ff, #7aa7ff); }
.card-title-custom { margin: 8px 0 8px; font-size: 1.08rem; font-weight: 700; color:var(--black-txtlight); line-height: 1.2; }
.menu-icon { flex: 0 0 auto; color: #6880a5; font-size: 1.1rem; padding-top: 4px; }
.list-wrap { display: flex; flex-direction: column; gap: 10px; }
.trade-row { display: grid; grid-template-columns:minmax(0, 1fr) 95px 100px; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 38px; padding: 7px 14px; border: 1px solid #eef2f7; border-radius: 999px; overflow: hidden; background: linear-gradient( 90deg, rgba(138,126,249,.055), rgba(255,255,255,.94), rgba(14,181,246,.03) ) }
.name { width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--black-txtlight); font-size: 12px; font-weight: 600; }
.progress { width: 100%; min-width: 0; height: 10px; margin: 0; overflow: hidden; border-radius: 999px; background: var(--track); }
.value { width: 100px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: #00966c; font-size: 12px; font-weight:700; font-variant-numeric: tabular-nums; }
.trade_table { box-shadow: 0 12px 30px rgba(15, 23, 42, .05);border-radius: 20px; }
.section-title { font-size: 40px; font-weight: 700; text-align: center; margin-bottom: 50px; background: var(--title-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pricep-switcher { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0px 0 2px; }
.price-card { background: var(--white-cardbg); border: 1px solid var(--cardborder); border-radius: 16px; padding: 22px; height: 100%; color: var(--black-txtcolor); }
.price-card.featured { background: var(--white-cardbg); color: #000; }
.plan-name { /*font-size: 14px;*/ font-size: 20px; font-weight: 700; text-transform: uppercase; background: var(--tradesub-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.price { font-size: 32px; font-weight: 700; margin: 10px 0 5px; }
.plan-desc { font-size: 14px; font-weight: 400; margin-bottom: 18px; height: 38px; }
.choose-btn { width: 100%; border: 0; border-radius: 6px; padding: 16px; font-weight: 500; font-size: 16px; margin: 18px 0; background: var(--bg-gradient); color: #fff; outline: none; }
.featured .choose-btn { background: #050505; color: #fff; }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { font-size: 14px; font-weight: 400; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; line-height: 18px; height: 35px; }
.feature-list li::before { content: "✓"; width: 14px; height: 14px; border-radius: 3px; background: var(--bg-gradient); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feature-list li.disabled { color: rgba(0,0,0,.45); }
.featured .feature-list li.disabled { color: rgba(0,0,0,.45); }
.feature-list li.disabled::before { content: "×"; background: rgb(0 0 0 / 40%); color: rgba(255, 255, 255, 0.80); }
.featured .feature-list li::before { background: #111; color: #fff; }
.featured .feature-list li.disabled::before { background: rgb(0 0 0 / 40%); color: rgba(255, 255, 255, 0.60); }
.badge-popular { float: right; background:var(--bg-gradient); color: #fff; border-radius: 12px; padding: 4px 8px; font-size: 12px; font-weight: 600; }
@media (max-width: 991px) {
.section-title { font-size: 30px; }
}
@media (max-width: 575px) {
.pricing-section { padding: 30px 12px; }
.section-title { font-size: 26px; }
}
.price.is-text { font-size: 22px; line-height: 1.2; }
.price-note { font-size: 11px; color: var(--text-muted); min-height: 16px; margin-bottom: 4px; }
a.choose-btn { display: block; text-align: center; text-decoration: none; }
a.choose-btn:hover, a.choose-btn:focus { color: #fff; opacity: .92; }
.pm-star { color: var(--orange); font-weight: 700; font-size: 12px; }
.pm-hash { margin-left: 2px; font-weight: 700; color: var(--text-muted); }
.featured .pm-hash { color: rgba(0, 0, 0, .55); }
.pm-tag { margin-left: 4px; padding: 1px 5px; border-radius: 8px; background: var(--bg-gradient); color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; top: -.6em; }
.pm-flag { font-size: 11px; font-weight: 700; background: var(--tradesub-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.feature-list li.disabled .pm-star { opacity: .45; }
.feature-list li::before { margin-top: 3px; }
.pm-notes { margin-top: 22px; }
.pm-notes p { margin: 0 0 4px; font-size: 12px; color: var(--black-txtlight); }
.mcp-card .price { font-size: 30px; }
.mcp-card { display: flex; flex-direction: column; }
.mcp-specs { margin: 4px 0 0; padding-top: 0px; }
.mcp-specs dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 3px; }
.mcp-specs dd { margin: 0 0 16px; font-size: 14px; font-weight:400; line-height: 1.6; color: var(--black-txtcolor); }
.mcp-specs dd:last-child { margin-bottom: 0; }
.mcp-specs dd.is-none { color: rgba(0, 0, 0, .35); }
@media (max-width: 575px) {
.mcp-card .price { font-size: 26px; }
}
.success-section img { margin-bottom: 80px; width: 40%; }
.disclaimer-sec { padding: 70px 0;min-height: 505px; }
.text-points { list-style: none; padding: 0; margin: 0; }
.text-points li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 0; line-height: 1.7; }
.text-points .arrow-icon { width: 20px; height: 20px; min-width: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #f98225, #8a7ef9, #0eb5f6); color: #fff; font-size: 10px; margin-top: 2px; transition: 0.3s ease; }
.text-points li:hover .arrow-icon { transform: translateX(4px); }
.terms-condition { padding: 70px 0; }
.top-box a { color: #217eef; }
.privacy-policy b { font-weight: 600; }
.contact-ribbon { margin-bottom: 24px; padding: 22px; border-radius: 20px; border: 1px solid var(--white-txtcolor); background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .05); margin: 30px auto 68px; }
.contact-chip { height: 100%; display: flex; align-items: start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg-lightgradient); border: 1px solid #edf1f4; }
.contact-chip .ico { width: 34px; height: 34px; min-width: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: #fff; background: var(--bg-gradient); }
.icon-sec { display: flex; gap: 10px; margin-bottom: 0px; }
.contact-chip small { display: block; color: var(--black-txtlight); font-size: .8rem; font-weight: 500; }
.contact-chip a { display: inline-flex; font-weight: 600; color: #20242b; text-decoration: none; font-size: 1rem; word-break: break-word; outline: none; }
.address-panel { margin-top: 22px; overflow: hidden; border: 1px solid #fff; border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(17, 24, 39, .05); }
.address-header { display: flex; align-items: center; gap: 12px; }
.address-line { width: 4px; height: 28px; border-radius: 999px; background: var(--bg-gradient); }
.address-header h3 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.address-body { padding: 26px 24px; }
.address-body .row > [class*="col-"] { display: flex; flex-direction: column; }
.address-block { flex: 1 1 auto; border-radius: 14px; padding: 18px; background: var(--bg-lightgradient); border: 1px solid #edf1f4; }
.address-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; background:var(--seopage-title); -webkit-background-clip: text; background-clip: text; color: transparent; }
.address-text { color:var(--black-txtlight); line-height: 1.45; font-size: 17px; margin: 0; }
.contactus-sec .enquiry-form { box-shadow: 0 12px 28px rgba(17, 24, 39, .05); max-width: 820px; padding: 25px; border: 1px solid #fff; border-radius: 20px; background: #fff; }
.contact-frm .txt-area { height: 100px; }
.contactus-sec .lets_talk { font-size: 30px; }
.enough_talk p { margin: auto;width: 48%; }
.contact_bookdemo .letstalk-btn { width: 360px; max-width: 100%; padding: 14px; border: none; border-radius: 10px; margin-top: 10px; background: var(--bg-gradient); color: var(--black-txtcolor); font-size: 22px; font-weight: 500; transition: .3s; outline: none; display: inline-block; }
@media (max-width: 991px) {
.unlock-plan, .disclaimer-sec, .terms-condition { padding: 30px 0; }
.pricing-section .tab_sec { box-shadow: 0 2px 16px rgba(0, 0, 0, .10);border-radius: 20px; }
}
@media (max-width: 767px) {
.contactus-sec .lets_talk { font-size: 22px; }
.contactus-sec .enquiry-form { padding: 18px; }
.contact-ribbon { padding: 16px;margin: 26px auto 35px; }
.address-body { padding: 18px 14px; }
.address-header h3 { font-size: 1.1rem; }
.card-content { padding: 18px 14px; }
.success-section img { width: 65%;margin-bottom: 45px; }
.contact-chip a { font-size: 0.95rem; }
}
@media (max-width: 575px) {
.price-card { padding: 18px;border-radius: 20px; }
.price { font-size: 28px; }
.plan-desc { height: auto;margin-bottom: 16px; }
.choose-btn { padding: 14px; }
.trade-row { grid-template-columns: minmax(0, 1fr) 54px auto;gap: 8px;padding: 7px 12px; }
.value { width: auto;font-size: 11px; }
.name { font-size: 11px; }
.contact-chip { padding: 10px 12px; }
.contact-chip a { font-size: .91rem; }
}
.pc-card { position: relative; display: flex; flex-direction: column; }
.pc-card .badge-popular { position: absolute; top: 22px; right: 22px; float: none; }
.pc-head { display: flex; flex-direction: column; }
.pc-head .plan-name { /*padding-right: 80px;*/ padding-right: 35px; margin-bottom: 6px;}
.pc-head .price { white-space: nowrap; }
.pc-card .feature-list { margin-top: 10px; }
.pc-group { margin: 10px 0 0; padding-top: 18px; border-top: 1px solid var(--divider-color); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8a7ef9; }
.pc-full > .feature-list:first-child { margin-top: 0; }
.pc-foot-btn { margin-bottom: 0; }
.pc-card-more-wrap { display: flex; justify-content: center; margin-top: 5px; }
.pc-card-more { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--divider-color); border-radius: 999px; background: var(--table-alt); color: var(--black-txtlight); font-size: 12px; font-weight: 600; transition: .2s ease; }
.pc-card-more:hover { background: var(--bg-gradient); color: var(--white-txtcolor); }
.pc-card-more i { font-size: 10px; transition: transform .2s ease; }
.pc-card-more.is-open i { transform: rotate(180deg); }
.pc-more { display: inline-flex; align-items: center; gap: 10px; padding: 13px 30px; border: 1px solid var(--cardborder); border-radius: 999px; background: var(--white-cardbg); color: var(--black-txtcolor); font-size: 15px; font-weight: 500; transition: .2s ease; }
.pc-more:hover { border-color: var(--purple-clr); transform: translateY(-1px); }
.pc-more i { font-size: 12px; transition: transform .2s ease; }
.pc-more.is-open i { transform: rotate(180deg); }
@media (max-width: 1199px) {
.pc-head { min-height: 0; }
.pc-card .feature-list li { min-height: 0; margin-bottom: 12px; }
.pc-group { height: auto; padding-bottom: 2px; }
}
@media (max-width: 575px) {
.pc-more { padding: 11px 22px; font-size: 14px; }
.pc-group { font-size: 12px; }
}
@media (min-width:360px) and (max-width: 767px) {
.section-title { margin-bottom: 15px; }
.inpagepara { font-size: 15px;line-height: 1.6; }
.address-panel { margin: 30px auto 40px; }
.lets_talk.mb-4 { margin-bottom: 15px !important; }
.address-text { font-size: 15px;line-height: 1.6; }
.pricing-section .pricing-row .col { margin-bottom: 20px; }
.enough_talk p { width: 90%; }
.contact_bookdemo .letstalk-btn { width: 300px;padding: 12px;font-size: 20px; }
.contact-chip .ico { width: 30px;height: 30px;min-width: 30px;font-size: 14px;border-radius: 8px; }
}
@media (min-width:768px) and (max-width: 991px) {
.contact-chip a { font-size: 0.9rem; }
.address-text { font-size: 16px; }
.address-block { height: 110px; }
.enough_talk p { width: 60%; }
.book-demo-page .section-subtitle { font-size: 16px; }
.dark-card .aboutus-para { font-size: 16px !important; }
}
@media (min-width:1200px) and (max-width: 1299px) {
.feature-list li { font-size: 13px; }
}
@media (min-width:1200px) and (max-width: 1366px) {
.price { font-size: 28px; }
.price-card { padding: 16px;border-radius: 12px; }
.choose-btn { padding: 14px; }
.feature-list li { height: 45px; }
}
@media (min-width:1200px) and (max-width: 1399px) {
.enough_talk p { width: 52%; }
}
.nf-page { display: flex; align-items: center; min-height: 58vh; }
.nf-wrap { max-width: 620px; margin: 0 auto; text-align: center; }
.nf-code { margin: 0; font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -.02em; background: var(--bg-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nf-title { margin: 10px 0 0; font-size: 32px; }
.nf-lead { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.nf-url { padding: 2px 7px; border-radius: 5px; background: rgba(0, 0, 0, .05); color: var(--black-txtcolor); font-size: 13px; white-space: nowrap; }
.nf-suggest { margin: 12px 0 0; font-size: 15px; }
.nf-suggest a { font-weight: 600; text-decoration: underline; }
.nf-actions { margin-top: 26px; }
a.nf-btn { display: inline-block; width: auto; padding: 14px 34px; text-decoration: none; }
.nf-links { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--divider-color); }
.nf-links-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.nf-links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 14px 0 0; padding: 0; list-style: none; }
.nf-links a { font-size: 15px; text-decoration: none; }
.nf-links a:hover { text-decoration: underline; }
@media (max-width: 575px) {
.nf-code { font-size: 68px; }
.nf-title { font-size: 25px; }
.nf-links ul { gap: 8px 18px; }
}


/* ---- from hscode-search.css ---- */
.search-wrapper { position: relative; }
.search-inner input.is-invalid { border-radius: inherit; }
.hscode-suggest-list { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: var(--input-whitebg, #fff); border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .15); z-index: 20; text-align: left; padding: 6px 0; }
.hscode-suggest-list.is-open { display: block; }
.hscode-suggest-list .hscode-suggest-item { padding: 10px 20px; cursor: pointer; color: #333; font-size: 15px; }
.hscode-suggest-list .hscode-suggest-item:hover, .hscode-suggest-list .hscode-suggest-item.is-active { background: rgba(0, 0, 0, .05); }
.hscode-suggest-list .hscode-suggest-item.is-message { cursor: default; color: #888; font-size: 13px; font-style: italic; }
.hscode-suggest-list .hscode-suggest-item.is-message:hover { background: none; }
/* the logo and its line side by side, centred as one. The line changes length stage to stage; it sits in a box
   sized for the longest stage ("Ranking top markets and partners..."), left-aligned, so the pair never changes width
   and the logo never moves */
.trade-loading { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 240px; padding: 24px 0; }
.trade-loading .trade-loading-text { width: 18.5em; max-width: calc(100vw - 110px); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trade-loading-text { margin: 0; font-size: 15px; font-weight: 500; color: var(--black-txtlight, #6b7280); animation: tradeLoadingTextIn .35s ease-out; }
@keyframes tradeLoadingTextIn {
	from { opacity: 0; transform: translateY(2px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.trade-loading-text { animation: none; }
}
.trade-loading-logo { width: 56px; height: 40px; flex-shrink: 0; }
.trade-loading-card { background: rgba(255, 255, 255, .95); border: 1px solid var(--cardborder, #e5e5e5); border-radius: 20px; box-shadow: 0 14px 36px rgba(55, 76, 113, .06); padding: 48px 24px; text-align: center; }
.skeleton-bar { display: inline-block; height: 12px; width: 140px; max-width: 100%; border-radius: 2px; background: #e1e1e1; }
#tradeResults .custom-table .skeleton-bar { width: 70px; }
#tradeResults .custom-table tbody td { white-space: normal; word-break: break-word; }
#tradeResults .custom-table thead th { text-align: left; white-space: nowrap; }
#tradeResults .custom-table { table-layout: auto; width: 100%; background: var(--white-cardbg); }
#tradeResults .custom-table th:nth-child(4), #tradeResults .custom-table td:nth-child(4) { max-width: 440px; }
#tradeResults .custom-table td:nth-child(1), #tradeResults .custom-table td:nth-child(9) { white-space: nowrap; }
#tradeResults .custom-table td:nth-child(8) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tradeResults .custom-table td:nth-child(7) { white-space: nowrap; }
#tradeResults .selling-lock-text, #tradeResults .selling-lock-text:hover, #companyProfile .selling-lock-text, #companyProfile .selling-lock-text:hover { color: inherit; text-decoration: none; cursor: pointer; }
#tradeResults .trade-row { grid-template-columns: minmax(8ch, 1fr) 100px; }
/*#tradeResults .trade-row .name { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }*/
.kpi-card { background: #fff; border: 1px solid var(--cardborder); border-radius: 20px; padding: 16px 20px; height: 100%; }
.kpi-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #6b7a99; margin-bottom: 8px; }
.kpi-value { font-size: 20px; font-weight: 700; color: #f98225; }
.row-blur { filter: blur(4px); pointer-events: none; }
.cell-lock { opacity: .45; filter: grayscale(1); }
.custom-table tbody tr:nth-child(even) { background: var(--table-alt); }

/* Product Attributes column (Trade_search_model::format_prod_attr()) -
   eximcloud.com's own look: bold product name, a pill per attribute, and
   any extra products behind a "N Products" expand toggle. */
.product-attr-cell { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.product-type { font-weight: 700; color: var(--black-txtcolor, #1b2430); }
.attr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.attr-chip { display: inline-block; background: #eaf2fd; color: #2f6fed; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.attr-chip-more { background: transparent; border: 1px dashed #2f6fed; cursor: pointer; }
.attr-chip-more:hover { background: #eaf2fd; }
.product-more-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0; margin-top: 2px; font-size: 12px; font-weight: 600; color: #2f6fed; cursor: pointer; }
.product-more-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--cardborder, #e5e5e5); }
.product-more-item { display: flex; flex-direction: column; gap: 4px; }
.product-more-name { font-weight: 600; font-size: 13px; color: var(--black-txtcolor, #1b2430); }

/* Date-range line above the KPI cards ("Oct 13, 2025 TO Oct 13, 2026") */
.trade-date-range { font-size: 13px; font-weight: 600; color: var(--black-txtlight, #6b7a99); text-align: right; }


/* ==============================================================================================================
   NEW DESIGN
   The rules above are the inner pages' original layout. This layer re-skins them in the homepage's language:
   black page, dark glass cards with a hairline rim, white type, and the orange → lavender → cyan gradient
   reserved for titles and the one main button per block. Bootstrap's own dark mode (data-bs-theme="dark" on
   <html>, set by templates/header.php) takes care of form controls, tables, modals and accordions.
   ============================================================================================================== */
:root {
  --grad: linear-gradient(90deg, #FFBA6A, #D8D3FF 55%, #6FE2FF);
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --rim: rgba(255, 255, 255, .09);
  --rim-strong: rgba(255, 255, 255, .16);
  --ink: #F3F4F6;
  --ink-2: rgba(255, 255, 255, .72);
  --ink-3: rgba(255, 255, 255, .5);
  --on-grad: #0A0B0E;

  /* the old palette, pointed at the new surfaces */
  --white-cardbg: #0d0e12;
  --price-card-bg: #0d0e12;
  --input-whitebg: #15161b;
  --cardborder: var(--rim);
  --divider-color: var(--rim);
  --black-txtcolor: var(--ink);
  --black-txtlight: var(--ink-2);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --bg-gradient: var(--grad);
  --cmp-badge-color: var(--grad);
  --title-color: var(--grad);
  --seopage-title: var(--grad);
  --tradesub-color: var(--grad);
  --table-alt: rgba(255, 255, 255, .025);
  --table-hover: rgba(255, 255, 255, .05);
  --progress-bg: rgba(255, 255, 255, .08);
  --track: rgba(255, 255, 255, .08);
  --bg-lightgradient: var(--surface);

  --bs-body-bg: #000;
  --bs-body-color: var(--ink-2);
  --bs-heading-color: var(--ink);
  --bs-border-color: var(--rim);
  --bs-link-color-rgb: 111, 226, 255;
  --bs-link-hover-color-rgb: 216, 211, 255;
}
body { background: #000; color: var(--ink-2); }
::selection { background: rgba(111, 226, 255, .3); color: #fff; }

/* page titles: the homepage's section heading ("One search. Five answers.", js/sections/one-search.js .os__title):
   semibold, tight tracking, the whole line in the orange → lavender → cyan gradient. One rule for every inner page's
   main heading, so they all read the same. */
.section-title, .company-header .section-title, .enquiry-section h1, .success-title, .page-head__title, .nf-title {
  font-size: clamp(36px, 5vw, 64px); line-height: 1.18; font-weight: 600; letter-spacing: -2px; text-wrap: balance;
  background: linear-gradient(90deg, #FFBA6A, #D8D3FF 50%, #6FE2FF); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; }
.page-head__title span { background: none; -webkit-text-fill-color: inherit; color: inherit; }@media (max-width: 767.98px) {
  .section-title, .company-header .section-title, .enquiry-section h1, .success-title, .page-head__title, .nf-title { font-size: 42px; letter-spacing: -1.6px; }
}
@media (max-width: 374.98px) {
  .section-title, .company-header .section-title, .enquiry-section h1, .success-title, .page-head__title, .nf-title { font-size: 36px; }
}
/* the other gradient headings keep their own sizes */
.h-title, .nf-code { font-weight: 600; letter-spacing: -.03em; line-height: 1.08;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.card-title, .address-title, .secondery-title, .plan-name, .pm-flag { background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.subh-title { color: #6FE2FF; }
.inpagepara, .success-text, .nf-lead { color: var(--ink-2); }
.nf-title, .address-header h3, .company-name-highlight { color: var(--ink); }

/* cards: dark glass with a hairline rim */
.price-card, .price-card.featured, .analytics-card, .dark-card, .top_cardbox, .chart-box, .map-box, .kpi-card, .trade-loading-card,
.contact-ribbon, .address-panel, .white_bgfrm, .contactus-sec .enquiry-form, .locked-area, .tab_sec .tab-content, .selling-partners-table {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)) , #08090c;
  border: 1px solid var(--rim); border-radius: 20px; color: var(--ink-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px -30px rgba(0, 0, 0, .9); }
.price-card.featured { border-color: transparent;
  background: linear-gradient(#0b0c10, #0b0c10) padding-box, var(--grad) border-box; border: 1px solid transparent;
  box-shadow: 0 0 60px -20px rgba(111, 226, 255, .35); }
.analytics-card::after { opacity: .6; }
.contact-chip, .address-block { background: var(--surface); border: 1px solid var(--rim); }
.contact-chip a { color: var(--ink); }
.contact-chip small, .address-text { color: var(--ink-2); }
.contact-chip .ico, .icon-block, .text-points .arrow-icon { background: var(--grad); color: var(--on-grad); }
.trade-row { background: var(--surface); border-color: var(--rim); }
.value { color: #5BE49B; }
.kpi-label { color: var(--ink-3); }
.kpi-value { color: #FFBA6A; }
.menu-icon { color: var(--ink-3); }
.selling-lock { background: linear-gradient(to bottom, transparent 0%, #08090c 60%); color: var(--ink-2); }
.unlock-card { background: #0d0e12; border-color: var(--rim-strong); box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.unlock-card p { color: var(--ink-3); }
.donut::after { background: #08090c; }
.skeleton-bar { background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, .4) 100%);}
.nf-url { background: var(--surface-2); color: var(--ink); }
.top-box a, .page-body a { color: #6FE2FF; }
.product-type, .product-more-name { color: var(--ink); }
.attr-chip { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rim); }
.attr-chip-more { background: transparent; border: 1px dashed #6FE2FF; color: #6FE2FF; }
.attr-chip-more:hover { background: var(--surface-2); }
.product-more-toggle { color: #6FE2FF; }
.product-more-list { border-top-color: var(--rim); }
.trade-date-range { color: var(--ink-3); }

/* pricing lists */
.feature-list li.disabled, .featured .feature-list li.disabled, .mcp-specs dd.is-none { color: var(--ink-3); }
.feature-list li::before, .featured .feature-list li::before { background: var(--grad); color: var(--on-grad); }
.feature-list li.disabled::before, .featured .feature-list li.disabled::before { background: rgba(255, 255, 255, .1); color: var(--ink-3); }
.featured .pm-hash { color: var(--ink-3); }
.price { color: var(--ink); letter-spacing: -.02em; }
.pm-tag, .badge-popular { background: var(--grad); color: var(--on-grad); }
.pc-group { color: #D8D3FF; }
.pc-card-more, .pc-more { background: var(--surface); border-color: var(--rim-strong); color: var(--ink); }
.pc-card-more:hover, .pc-more:hover { background: var(--surface-2); border-color: rgba(111, 226, 255, .5); color: #fff; }

/* buttons: one gradient pill per block, dark text on it (as Book a Demo in the menu bar) */
.choose-btn, .featured .choose-btn, .submit-btn, .btn-gradient, .btn_submit, .btn-unlock, .contact_bookdemo .letstalk-btn, .search-btn {
  background: var(--grad); color: var(--on-grad) !important; border: 0; font-weight: 600; letter-spacing: -.01em;
  transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease; }
.choose-btn, .submit-btn, .btn-gradient, .btn_submit, .contact_bookdemo .letstalk-btn { border-radius: 999px; }
.choose-btn:hover, .submit-btn:hover, .btn-gradient:hover, .btn_submit:hover, .btn-unlock:hover, .contact_bookdemo .letstalk-btn:hover,
a.choose-btn:hover, a.choose-btn:focus { transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(111, 226, 255, .6); opacity: 1; }
.choose-btn:focus-visible, .submit-btn:focus-visible, .btn-gradient:focus-visible, .btn_submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.featured .choose-btn { box-shadow: 0 0 0 0 rgba(111, 226, 255, .45), 0 8px 24px -8px rgba(111, 226, 255, .6); }
.type-btn { background: var(--surface); border: 1px solid var(--rim-strong); color: var(--ink-2); border-radius: 999px; }
.type-btn:hover, .type-btn.active { background: var(--grad); border-color: transparent; color: var(--on-grad) !important; }
.company-badge { color: var(--on-grad); }
.tab_sec .nav-tabs { background: var(--surface); border: 1px solid var(--rim); border-radius: 999px; width: fit-content; margin: 0 auto; }
.tab_sec .nav-link { background: transparent; color: var(--ink-2); border-radius: 999px; font-weight: 600; }
.tab_sec .nav-link:hover { color: #fff; background: var(--surface-2); }
.tab_sec .nav-link.active { background: var(--grad); color: var(--on-grad); box-shadow: none; }

/* forms: dark fields, the gradient rim on focus */
.enquiry-form .form-label, .form-check-label { color: var(--ink-2); }
/* the field frame is a real 1px border (padding-box fill, border-box colour), not a 1px gap between two boxes: browsers
   keep a border at least one device pixel wide at any zoom, while a 1px gap can round to nothing on one edge, which
   cut the frame at some zoom levels. The field inside fills the frame, and the frame clips it to the rounded corners. */
.gradient-input { padding: 0; border: 1px solid transparent; border-radius: 12px; overflow: hidden;
  background: linear-gradient(#0d0e12, #0d0e12) padding-box, linear-gradient(var(--rim-strong), var(--rim-strong)) border-box; }
.gradient-input:focus-within { background: linear-gradient(#0d0e12, #0d0e12) padding-box, var(--grad) border-box; }
.gradient-input.is-invalid { background: linear-gradient(#0d0e12, #0d0e12) padding-box, linear-gradient(#e0685f, #e0685f) border-box; }
.gradient-input .form-control, .gradient-input .form-select, .gradient-input .form-control:focus, .gradient-input .form-select:focus,
.phone-input-group .phone-code-addon { background: transparent; color: var(--ink); border: 0; border-radius: 0; box-shadow: none; }
.form-control:focus, .form-select:focus { background-color: #0d0e12; color: var(--ink); }
.form-control::placeholder, .details-modal .form-control::placeholder { color: var(--ink-3); }
.select-wrapper i { color: var(--ink-3); }
.form-select option { background: #0d0e12; color: var(--ink); }
.form-check-input { background-color: #0d0e12; border-color: var(--rim-strong); }
.form-check-input:checked { background-color: #6FE2FF; border-color: #6FE2FF; }
.payment-method-option { border-color: var(--rim-strong); background: var(--surface); }
.payment-method-option:has(input:checked) { border-color: #6FE2FF; }
.payment-method-option input[type="radio"] { accent-color: #6FE2FF; }

/* tables */
.custom-table { --bs-table-bg: transparent; --bs-table-color: var(--ink-2); --bs-table-hover-bg: var(--table-hover); }
.custom-table thead { background: rgba(255, 255, 255, .06); }
.custom-table thead th { color: var(--ink); font-weight: 600; }
.custom-table tbody td { color: var(--ink-2); }
#tradeResults .custom-table { background: transparent; }

/* accordions and the request-details modal */
.accordion { --bs-accordion-bg: #0d0e12; --bs-accordion-border-color: var(--rim); --bs-accordion-active-bg: var(--surface-2); --bs-accordion-active-color: var(--ink); --bs-accordion-btn-color: var(--ink); --bs-accordion-color: var(--ink-2); }
.accordion-item, .accordion-button, .accordion-body { background: #0d0e12; color: var(--ink-2); }
.accordion-button:not(.collapsed) { background: var(--surface-2); color: var(--ink); }
#faq .accordion-button, #faq .accordion-button:not(.collapsed) { color: var(--ink); }
.accordion-button::after { filter: invert(1) brightness(1.4); }
.details-modal .modal-content { background: #0d0e12; border: 1px solid var(--rim-strong); }
.details-modal .modal-header, .details-modal .modal-body { background: #0d0e12; }
.details-modal .modal-title { color: var(--ink); }
.details-modal .btn-close { color: var(--ink-2); filter: invert(1); }
.details-modal .form-control, .details-modal .form-select { background-color: #15161b; color: var(--ink); border-color: var(--rim-strong); }
.details-modal .form-control:focus, .details-modal .form-select:focus { background: linear-gradient(#15161b, #15161b) padding-box, var(--grad) border-box; color: var(--ink); }
.phone-code { background: var(--surface-2); color: var(--ink-2); border-color: var(--rim-strong); }
.modal-backdrop.show { opacity: .7; }

/* the hero search on the results page, and its suggestions */
.hscode-suggest-list { background: #0d0e12; border: 1px solid var(--rim-strong); box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.hscode-suggest-list .hscode-suggest-item { color: var(--ink); }
.hscode-suggest-list .hscode-suggest-item:hover, .hscode-suggest-list .hscode-suggest-item.is-active { background: var(--surface-2); }
.hscode-suggest-list .hscode-suggest-item.is-message { color: var(--ink-3); }
.search-icon img { width: 20px; height: 20px; }

/* ==============================================================================================================
   GRID
   site.css carries a trimmed copy of Bootstrap whose ".row > * { width: 100% }" loads after the full Bootstrap and
   overrides its column widths. These are Bootstrap's own column rules for the classes the inner pages use, restated
   after it so col-md-10, offset-md-1 and the rest size as written. Add a rule here when a page uses a new one.
   ============================================================================================================== */
.col { flex:1 0 0 }
.row-cols-1>* { flex:0 0 auto;width:100% }
.col-6 { flex:0 0 auto;width:50% }
.col-12 { flex:0 0 auto;width:100% }
@media (min-width:576px) {
.col-sm-6 { flex:0 0 auto;width:50% }
}
@media (min-width:768px) {
.row-cols-md-2>* { flex:0 0 auto;width:50% }
.col-md-3 { flex:0 0 auto;width:25% }
.col-md-5 { flex:0 0 auto;width:41.66666667% }
.col-md-6 { flex:0 0 auto;width:50% }
.col-md-7 { flex:0 0 auto;width:58.33333333% }
.col-md-8 { flex:0 0 auto;width:66.66666667% }
.col-md-9 { flex:0 0 auto;width:75% }
.col-md-10 { flex:0 0 auto;width:83.33333333% }
.col-md-12 { flex:0 0 auto;width:100% }
.offset-md-1 { margin-left:8.33333333% }
.offset-md-2 { margin-left:16.66666667% }
}
@media (min-width:992px) {
.row-cols-lg-3>* { flex:0 0 auto;width:33.33333333% }
.col-lg-3 { flex:0 0 auto;width:25% }
.col-lg-4 { flex:0 0 auto;width:33.33333333% }
.col-lg-5 { flex:0 0 auto;width:41.66666667% }
.col-lg-6 { flex:0 0 auto;width:50% }
.col-lg-7 { flex:0 0 auto;width:58.33333333% }
.col-lg-8 { flex:0 0 auto;width:66.66666667% }
.col-lg-12 { flex:0 0 auto;width:100% }
}
@media (min-width:1200px) {
.row-cols-xl-4>* { flex:0 0 auto;width:25% }
.row-cols-xl-5>* { flex:0 0 auto;width:20% }
.col-xl-3 { flex:0 0 auto;width:25% }
.col-xl-12 { flex:0 0 auto;width:100% }
}
@media (min-width:1400px) {
.col-xxl-12 { flex:0 0 auto;width:100% }
}

/* DISPLAY UTILITIES
   The same problem for display classes: site.css restates ".d-none { display: none !important }" after the full
   Bootstrap, so "d-none d-lg-flex" stayed hidden on desktop (the pricing page's Price / MCP tabs). site.css already
   restates d-lg-block and d-lg-none; these are the other responsive display classes the inner pages use. */
@media (min-width:992px) {
.d-lg-flex { display:flex!important }
}

/* GUTTERS
   The same again for row gutters: site.css restates ".row { --bs-gutter-y: 0 }" after the full Bootstrap, which
   undoes Bootstrap's g-3 (site.css restates g-4 itself). These are the gutter classes the inner pages use. */
.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }

/* ==============================================================================================================
   SEARCH RESULTS (pages/search_result.php · #tradeResults)
   The results in the homepage's language: the totals as the Foundation's big numbers (white fading down, a hairline
   above), the four top-five lists as clean dark cards with a gradient line on hover (no coloured corner blobs),
   white figures instead of green, and the lock footer with the site's gradient pill.
   ============================================================================================================== */
#tradeResults .kpi-card { padding: 20px 22px 22px; border-radius: 20px; border: 1px solid var(--rim);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)), #08090c; }
#tradeResults .kpi-label { margin-bottom: 12px; font: 500 10.5px/1.4 Inter, system-ui, sans-serif; letter-spacing: .16em; color: var(--ink-3); }
#tradeResults .kpi-value { font-size: clamp(26px, 2.4vw, 25px); line-height: 1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, .6) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

#tradeResults .analytics-card { overflow: hidden; transition: border-color .3s ease, transform .3s ease; }
#tradeResults .analytics-card::after { display: none; }
#tradeResults .analytics-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: var(--grad); opacity: 0; transition: opacity .3s ease; }
#tradeResults .analytics-card:hover { border-color: var(--rim-strong); transform: translateY(-2px); }
#tradeResults .analytics-card:hover::before { opacity: 1; }
#tradeResults .card-header-custom { margin-bottom: 18px; }
#tradeResults .icon-block { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; font-size: 15px; box-shadow: none; }
#tradeResults .card-title-custom { margin: 7px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
#tradeResults .trade-row { min-height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
#tradeResults .trade-row .name { color: var(--ink-2); font-weight: 500; }
#tradeResults .value { color: #5BE49B; font-weight: 600; }

/*#tradeResults .custom-table thead th { font: 600 11px/1.3 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }*/
#tradeResults .custom-table td.text-end { color: var(--ink); font-weight: 600; }
#tradeResults .selling-lock { color: var(--ink-2); }
#tradeResults .btn-unlock { padding: 0 22px; height: 40px; display: inline-flex; align-items: center; border-radius: 999px; font-weight: 600;
  box-shadow: 0 8px 24px -8px rgba(111, 226, 255, .6); }
#tradeResults .btn-unlock:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(111, 226, 255, .8); }

/* masked company names: "Only for paid plans" (js/pages/trade-results.js places .lock-tip above the bar) */
#tradeResults .skeleton-bar.is-locked:focus-visible { outline: 2px solid #6FE2FF; outline-offset: 2px; }
.lock-tip { position: fixed; z-index: 2000; padding: 7px 12px; border-radius: 10px; pointer-events: none; white-space: nowrap;
  font: 600 12.5px/1.2 Inter, system-ui, sans-serif; color: #0A0B0E; background: linear-gradient(90deg, #FFBA6A, #D8D3FF 55%, #6FE2FF);
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.lock-tip.is-on { opacity: 1; transform: none; }
.lock-tip::after { content: ""; position: absolute; left: var(--arrow, 50%); top: 100%; width: 10px; height: 10px; margin-left: -5px; margin-top: -5px;
  background: #D8D3FF; transform: rotate(45deg); }
.lock-tip.is-below::after { top: auto; bottom: 100%; margin-top: 0; margin-bottom: -5px; }
@media (prefers-reduced-motion: reduce) { .lock-tip { transition: none; } }

/* the site's loader (partials/loader.php): the animated ex-im icon - its bars rise and fall - centred in its box,
   with the line beside it. Same look as the search results loader (.trade-loading). */
.exim-loader { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 96px; padding: 18px 0; text-align: center; }
.exim-loader__icon { width: 46px; height: 33px; flex: none; }
.exim-loader__text { font-size: 14px; font-weight: 500; color: var(--ink-2, rgba(255, 255, 255, .72)); }
td > .exim-loader { min-height: 120px; }
#portPieChart > .exim-loader, #nexusD3Chart > .exim-loader { min-height: 0; }
#nexusD3Chart .exim-loader__text { color: #6b7a99; }   /* the Nexus box is light */

/* FORM CARDS
   Every form sits in the same frame as Book a Demo's (css/book-demo.css .bookdemo_box): a 1px border in the brand
   gradient with a soft cyan glow. Trial signup, license and MCP checkout, MCP guest signup (.white_bgfrm), and the
   "request details" popup on search results and company profiles. (The Contact form, .ct-form, has it already.) */
.white_bgfrm, .details-modal .modal-content {
  border: 1px solid transparent; border-radius: 24px;
  background: linear-gradient(#0b0c10, #0b0c10) padding-box, linear-gradient(90deg, #FFBA6A, #D8D3FF 55%, #6FE2FF) border-box;
  box-shadow: 0 0 60px -20px rgba(111, 226, 255, .35); }
.details-modal .modal-header, .details-modal .modal-body { background: transparent; }

/* search results: a long attribute pill ("Description: Waters including mineral waters and aerated waters...") was
   held on one line, which stretched the Product Attributes column and pushed Quantity and Value off the table's right
   edge. Pills now wrap inside a capped column, so every column fits; short pills look as before. */
#tradeResults .custom-table th:nth-child(4), #tradeResults .custom-table td:nth-child(4) { width: 34%; min-width: 260px; max-width: 420px; }
#tradeResults .product-attr-cell { min-width: 0; max-width: 420px; }
#tradeResults .attr-chip { white-space: normal; max-width: 100%; overflow-wrap: anywhere; line-height: 1.45; border-radius: 12px; }
/* the Route may break at its arrow on narrower screens (the country names hold together - trade-results.js joins
   their words with non-breaking spaces), so the table still fits on a laptop */
#tradeResults .custom-table td:nth-child(7) { white-space: normal; min-width: 150px; }