/* =========================================================
   USDTP2P — Design tokens v2 (white theme, USDT/BNB only)
   ========================================================= */
:root {
 --bg:          #ffffff;
 --surface:     #f7f8fb;
 --surface-2:   #f0f2f7;
 --elevated:    #ffffff;
 --hair:        #e7e9f0;
 --hair-soft:   #eef0f5;
 --gold:        #f2b90f;
 --gold-deep:   #c6960a;
 --gold-ink:    #a97c00;
 --gold-dim:    #fdf3d8;
 --gold-glow:   rgba(242, 185, 15, .28);
 --buy:         #0fa872;
 --buy-dim:     #e5f8f0;
 --sell:        #e2394f;
 --sell-dim:    #fdeaed;
 --text:        #14151c;
 --text-soft:   #52566a;
 --text-mute:   #8b8fa3;
 --text-faint:  #c3c6d4;
 --radius-sm:   8px;
 --radius:      14px;
 --radius-lg:   22px;
 --shadow-sm:   0 1px 2px rgba(20, 21, 30, .05);
 --shadow-md:   0 10px 28px rgba(20, 21, 30, .07);
 --font-display: 'Space Grotesk', sans-serif;
 --font-body:    'Inter', sans-serif;
 --font-mono:    'JetBrains Mono', monospace;
}
* {
	box-sizing:border-box;
}
html, body {
	margin:0;
	padding:0;
}
body {
	background:var(--bg);
	color:var(--text);
	font-family:var(--font-body);
	min-height:100vh;
	-webkit-font-smoothing:antialiased;
}
a {
	color:inherit;
	text-decoration:none;
}
button {
	font-family:inherit;
	cursor:pointer;
}
input, select, textarea {
	font-family:inherit;
}
::selection {
background:var(--gold-dim);
color:var(--gold-ink);
}
::-webkit-scrollbar {
width:10px;
height:10px;
}
::-webkit-scrollbar-thumb {
background:var(--hair);
border-radius:10px;
}
::-webkit-scrollbar-track {
background:transparent;
}
.shell {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 28px;
	width: 100%;
}
/* ---------- diamond mark (signature element) ---------- */
.diamond-mark {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
.diamond-mark svg {
	display:block;
}
.diamond {
 --d-size:10px;
	width:var(--d-size);
	height:var(--d-size);
	transform:rotate(45deg);
	border:2px solid var(--text-faint);
	flex-shrink:0;
}
.diamond.is-on {
	border-color:var(--gold);
	background:var(--gold);
	box-shadow:0 0 0 4px var(--gold-dim);
}
.diamond.is-pulse {
	animation:pulse-d 1.8s ease-in-out infinite;
}
@keyframes pulse-d {
 0%, 100% {
box-shadow:0 0 0 0 var(--gold-glow);
}
 50% {
box-shadow:0 0 0 5px transparent;
}
}
/* ---------- navbar ---------- */
.navbar {
	border-bottom:1px solid var(--hair-soft);
	background:rgba(255, 255, 255, .86);
	backdrop-filter:blur(10px);
	position:sticky;
	top:0;
	z-index:40;
}
.navbar .shell {
	display:flex;
	align-items:center;
	gap:36px;
	height:68px;
}
.brand {
	display:flex;
	align-items:center;
	gap:10px;
	font-family:var(--font-display);
	font-weight:700;
	font-size:19px;
	letter-spacing:.01em;
	color:var(--text);
}
.brand b {
	color:var(--gold-ink);
}
.navlinks {
	display:flex;
	align-items:center;
	gap:28px;
	flex:1;
}
.navlinks a {
	font-size:14px;
	color:var(--text-mute);
	font-weight:500;
	padding:8px 2px;
	position:relative;
transition:color .15s;
}
.navlinks a:hover {
	color:var(--text);
}
.navlinks a.active {
	color:var(--gold-ink);
}
.navlinks a.active::after {
content:'';
position:absolute;
left:0;
right:0;
bottom:-13px;
height:2px;
background:var(--gold);
}
.nav-right {
	display:flex;
	align-items:center;
	gap:14px;
	margin-left:auto;
}
/* ---------- buttons ---------- */
.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	border:1px solid var(--hair);
	background:var(--surface);
	color:var(--text);
	font-weight:600;
	font-size:14px;
	padding:10px 18px;
	border-radius:var(--radius-sm);
 transition:transform .12s, border-color .15s, background .15s;
}
.btn:hover {
	border-color:var(--text-faint);
}
.btn:active {
	transform:scale(.97);
}
.btn-gold {
	background:var(--gold);
	border-color:var(--gold);
	color:#241a00;
}
.btn-gold:hover {
	background:#ffc933;
	border-color:#ffc933;
}
.btn-ghost {
	background:transparent;
	border-color:var(--hair);
	color:var(--text-soft);
}
.btn-dark {
	background:var(--text);
	border-color:var(--text);
	color:#fff;
}
.btn-dark:hover {
	background:#2b2d38;
}
.btn-buy {
	background:var(--buy);
	border-color:var(--buy);
	color:#fff;
}
.btn-buy:hover {
	background:#0d9a67;
}
.btn-sell {
	background:var(--sell);
	border-color:var(--sell);
	color:#fff;
}
.btn-sell:hover {
	background:#cf2f43;
}
.btn-sm {
	padding:7px 14px;
	font-size:13px;
}
.btn-lg {
	padding:14px 26px;
	font-size:15px;
}
.btn-block {
	width:100%;
}
.btn[disabled] {
	opacity:.4;
	cursor:not-allowed;
}
/* ---------- chips / toggle pill ---------- */
.pill-toggle {
	display:inline-flex;
	background:var(--surface-2);
	border:1px solid var(--hair);
	border-radius:999px;
}
.pill-toggle button {
	border:none;
	background:transparent;
	color:var(--text-mute);
	font-weight:700;
	font-size:13.5px;
	padding:9px 22px;
	border-radius:999px;
transition:all .18s;
	font-family:var(--font-display);
	letter-spacing:.02em;
}
.pill-toggle button.on.buy {
	background:var(--buy);
	color:#fff;
}
.pill-toggle button.on.sell {
	background:var(--sell);
	color:#fff;
}
.chip {
	display:inline-flex;
	align-items:center;
	gap:6px;
	border:1px solid var(--hair);
	background:var(--surface);
	color:var(--text-soft);
	font-size:12.5px;
	font-weight:600;
	padding:7px 13px;
	border-radius:999px;
 transition:border-color .15s, color .15s, background .15s;
}
.chip:hover {
	border-color:var(--text-faint);
}
.chip.on {
	border-color:var(--gold);
	color:var(--gold-ink);
	background:var(--gold-dim);
}
/* ---------- cards / surfaces ---------- */
.card {
	background:var(--elevated);
	border:1px solid var(--hair);
	border-radius:var(--radius);
	box-shadow:var(--shadow-sm);
}
.card-pad {
	padding:22px;
}
/* ---------- badges ---------- */
.badge-verified {
	display:inline-flex;
	align-items:center;
	gap:5px;
	font-size:11px;
	font-weight:700;
	color:var(--gold-ink);
	background:var(--gold-dim);
	border:1px solid #f0dd9c;
	border-radius:999px;
	padding:3px 8px 3px 6px;
	letter-spacing:.02em;
	text-transform:uppercase;
}
.badge-status {
	font-size:11px;
	font-weight:700;
	padding:4px 10px;
	border-radius:999px;
	letter-spacing:.02em;
	text-transform:uppercase;
}
.badge-status.progress {
	background:var(--gold-dim);
	color:var(--gold-ink);
}
.badge-status.done {
	background:var(--buy-dim);
	color:var(--buy);
}
.badge-status.cancel {
	background:var(--surface-2);
	color:var(--text-mute);
}
.badge-status.appeal {
	background:var(--sell-dim);
	color:var(--sell);
}
/* ---------- typography helpers ---------- */
.mono {
	font-family:var(--font-mono);
}
.h-display {
	font-family:var(--font-display);
	font-weight:700;
	letter-spacing:-.01em;
}
.text-mute {
	color:var(--text-mute);
}
.text-soft {
	color:var(--text-soft);
}
.text-buy {
	color:var(--buy);
}
.text-sell {
	color:var(--sell);
}
.text-gold {
	color:var(--gold-ink);
}
/* ---------- footer note ---------- */
.escrow-note {
	display:flex;
	align-items:center;
	gap:10px;
	justify-content:center;
	color:var(--text-mute);
	font-size:12.5px;
	padding:22px 0 34px;
}
/* ---------- coin tag ---------- */
.coin-tag {
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-weight:700;
	font-size:12.5px;
}
.coin-dot {
	width:16px;
	height:16px;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:8px;
	font-weight:800;
	color:#fff;
	flex-shrink:0;
}
.coin-dot.usdt {
	background:#1a9b76;
}
.coin-dot.bnb {
	background:var(--gold);
	color:#241a00;
}
/* ---------- footer ---------- */
.site-footer {
	border-top:1px solid var(--hair-soft);
	margin-top:40px;
	padding:34px 0;
	color:var(--text-mute);
	font-size:13px;
}
.site-footer .shell {
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	gap:14px;
}
/* =========================================================
   MOBILE RESPONSIVE
   ========================================================= */

/* hamburger toggle button (hidden on desktop) */
.nav-toggle {
	display:none;
	align-items:center;
	justify-content:center;
	margin-left:auto;
	width:38px;
	height:38px;
	flex-shrink:0;
	background:transparent;
	border:1px solid var(--hair);
	border-radius:8px;
	color:var(--text);
}
.nav-toggle:active {
	transform:scale(.96);
}
 @media (max-width:860px) {
 .shell {
padding:0 18px;
}
 .navbar .shell {
gap:14px;
}
 .nav-toggle {
display:flex;
}

  /* collapse the nav links into a dropdown panel under the navbar */
  .navlinks {
 display:none;
position:fixed;
top:68px;
left:0;
right:0;
z-index:39;
 flex-direction:column;
align-items:stretch;
gap:2px;
 background:var(--bg);
border-bottom:1px solid var(--hair-soft);
 padding:8px 18px 18px;
max-height:calc(100vh - 68px);
overflow-y:auto;
 box-shadow:var(--shadow-md);
}
 .navlinks.open {
display:flex;
}
 .navlinks a {
padding:13px 4px;
font-size:15px;
border-top:1px solid var(--hair-soft);
}
 .navlinks a:first-child {
border-top:none;
}
 .navlinks a.active::after {
display:none;
}
 .navlinks a.active {
color:var(--gold-ink);
}
 .nav-right {
margin-left:0;
}
 .brand {
font-size:17px;
}
}
 @media (max-width:767px) {
	.hero-content {
			text-align: center;
		}
				.hero {
					padding: 40px 28px 20px !important;
					position: relative;
					overflow: hidden;
				}
 }
 @media (max-width:600px) {
 .shell {
padding:0 14px;
}
 .btn-lg {
padding:12px 20px;
font-size:14px;
}
 .site-footer .shell {
flex-direction:column;
align-items:flex-start;
gap:8px;
}
.layout {
	display: block !important;
}
.grid2 {
	display: block !important;
}
aside {
	margin: 30px 0px 0px 0px !important;
}
}

 @media (max-width:575px) {
 }

  @media (max-width:424px) {}
   @media (max-width:390px) {

	.btn-sm {
			padding: 7px 7px !important;
			font-size: 12px;
		}
   }
 @media (max-width:360px) {}