/* CSS for all pages */
/* ===== Reset & Base ===== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	color: #172033;
	background: #f7f9fc;
	line-height: 1.7;
}
a {
	color: inherit;
	text-decoration: none;
}
.container {
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
}
/* ===== Header ===== */
header {
	background: #0f172a;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav {
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}
.logo {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.4px;
}
.logo span {
	color: #38bdf8;
}
nav {
	display: flex;
	gap: 25px;
	font-size: 14px;
	color: #dbe5f2;
}
nav a:hover {
	color: #38bdf8;
}
/* ===== Hero / Trading Panel ===== */
.hero-trading {
	background: radial-gradient(circle at 15% 30%, rgba(14, 165, 233, .15), transparent 35%), linear-gradient(135deg, #07111f 0%, #0f172a 55%, #111c38 100%);
	color: #fff;
}
.hero-trading-grid {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(420px, 470px);
	align-items: center;
	gap: 55px;
}
.eyebrow {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	color: #bae6fd;
	font-size: 13px;
	margin-bottom: 22px;
}
.hero-promo h1 {
	max-width: 700px;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1.08;
	letter-spacing: -2px;
	margin-bottom: 24px;
}
.hero-promo h1 span {
	color: #38bdf8;
}
.hero-description {
	max-width: 650px;
	color: #cbd5e1;
	font-size: 17px;
	line-height: 1.75;
	margin-bottom: 34px;
}
.hero-benefits {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 25px;
	max-width: 680px;
}
.benefit-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.benefit-icon {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(56, 189, 248, .12);
	color: #38bdf8;
	font-weight: 800;
	font-size: 14px;
}
.benefit-item strong {
	display: block;
	color: #f8fafc;
	font-size: 14px;
	margin-bottom: 3px;
}
.benefit-item span {
	display: block;
	color: #94a3b8;
	font-size: 12px;
	line-height: 1.55;
}
.hero-promo-links {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 36px;
}
.hero-promo-links a {
	color: #bae6fd;
	font-size: 13px;
	font-weight: 700;
}
.hero-promo-links a:hover {
	color: #fff;
}
/* Trading Panel */
.trading-panel {
	background: #fff;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 18px;
	padding: 25px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.trading-panel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 22px;
}
.trading-panel-header h2 {
	color: #101828;
	font-size: 22px;
	line-height: 1.2;
	margin-top: 5px;
}
.panel-status {
	color: #059669;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .5px;
}
.network {
	color: #667085;
	background: #f2f4f7;
	padding: 6px 10px;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 700;
}
.trade-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
	padding: 4px;
	background: #f2f4f7;
	border-radius: 9px;
	margin-bottom: 25px;
}
.trade-tab {
	border: 0;
	background: transparent;
	color: #667085;
	padding: 11px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}
.trade-tab.active {
	background: #fff;
	color: #0284c7;
	box-shadow: 0 1px 4px rgba(16, 24, 40, .08);
}
.trade-form {
	display: none;
}
.trade-form.active {
	display: block;
}
.trade-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 22px;
}
.trade-heading h3 {
	font-size: 20px;
	color: #101828;
	margin-bottom: 4px;
}
.trade-heading p {
	color: #667085;
	font-size: 12px;
}
.trade-badge {
	padding: 5px 9px;
	border-radius: 6px;
	background: #e0f2fe;
	color: #0369a1;
	font-size: 10px;
	font-weight: 800;
}
.sell-badge {
	background: #ecfdf3;
	color: #047857;
}
.rent-badge {
	background: #fef3c7;
	color: #b45309;
}
.trade-form label {
	display: block;
	color: #344054;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 7px;
}
.input-box {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	padding: 0 13px;
	height: 50px;
	background: #fff;
	margin-bottom: 10px;
}
.input-box:focus-within {
border-color: #38bdf8;
box-shadow: 0 0 0 3px rgba(56, 189, 248, .12);
}
.input-box input {
	width: 100%;
	border: 0;
	outline: 0;
	font-size: 16px;
	color: #101828;
	font-weight: 700;
}
.input-box span {
	color: #667085;
	font-size: 10px;
	font-weight: 800;
	white-space: nowrap;
}
.quick-values {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 7px;
	margin-bottom: 22px;
}
.quick-values button {
	border: 1px solid #e4e7ec;
	background: #fff;
	border-radius: 6px;
	padding: 7px 5px;
	color: #667085;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
}
.quick-values button:hover {
	border-color: #38bdf8;
	color: #0284c7;
	background: #f0f9ff;
}
.rent-duration-label {
	margin-top: 15px;
}
#rentDuration {
	width: 100%;
	height: 48px;
	padding: 0 12px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	color: #101828;
	font-size: 13px;
	margin-bottom: 22px;
	outline: none;
}
#rentDuration:focus {
	border-color: #38bdf8;
}
.trade-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	background: #f8fafc;
	border: 1px solid #edf0f5;
	border-radius: 9px;
	padding: 14px;
	margin-bottom: 16px;
}
.trade-summary span {
	display: block;
	color: #667085;
	font-size: 10px;
	margin-bottom: 4px;
}
.trade-summary strong {
	display: block;
	color: #101828;
	font-size: 13px;
	white-space: nowrap;
}
.trade-action {
	width: 100%;
	height: 50px;
	border: 0;
	border-radius: 8px;
	background: #0284c7;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
transition: .2s;
}
.trade-action:hover {
	background: #0369a1;
}
.sell-action {
	background: #059669;
}
.sell-action:hover {
	background: #047857;
}
.rent-action {
	background: #d97706;
}
.rent-action:hover {
	background: #b45309;
}
.trade-note {
	color: #98a2b3;
	font-size: 10px;
	line-height: 1.5;
	margin-top: 11px;
	text-align: center;
}
.secure-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-top: 1px solid #edf0f5;
	padding-top: 17px;
	margin-top: 20px;
	color: #667085;
	font-size: 10px;
}
.secure-line span {
	color: #059669;
	font-weight: 800;
}
#buy, #sell, #rent {
	scroll-margin-top: 90px;
}
/* ===== Section Headings ===== */
.section-heading {
	margin-bottom: 35px;
}
.section-heading h2 {
	font-size: 34px;
	line-height: 1.2;
	letter-spacing: -.8px;
	margin-bottom: 12px;
}
.section-heading p {
	color: #667085;
}
.section-title {
	margin-bottom: 28px;
}
.section-title h2 {
	margin: 0 0 10px;
}
.section-title p {
	margin: 0;
	color: #667085;
	line-height: 1.8;
}
.section-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: #0284c7;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.process-eyebrow {
	display: inline-block;
	color: #0284c7;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	margin-bottom: 9px;
}
/* ===== Resource Sections ===== */
.resource-section-alt {
	background: #f7f9fc;
}
.resource-section {
	padding: 72px 0;
	background: #fff;
}
.info-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.info-card {
	padding: 24px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #f8fafc;
}
.info-card h3 {
	margin: 0 0 10px;
}
.info-card p {
	margin: 0;
	color: #667085;
	line-height: 1.75;
}
.steps-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.step-card {
	padding: 22px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}
.step-no {
	font-size: 12px;
	font-weight: 800;
	color: #0284c7;
	margin-bottom: 8px;
}
.step-card h3 {
	margin: 0 0 7px;
	font-size: 17px;
}
.step-card p {
	margin: 0;
	color: #667085;
	font-size: 13px;
}
/* ===== Tables ===== */
.table-section {
	padding: 30px 0 80px;
}
.table-wrapper {
	overflow-x: auto;
	background: #fff;
	border: 1px solid #e4e9f0;
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(15, 23, 42, .04);
}
table {
	width: 100%;
	min-width: 800px;
	border-collapse: collapse;
}
th, td {
	padding: 18px 20px;
	text-align: left;
	border-bottom: 1px solid #edf0f5;
	font-size: 14px;
}
th {
	background: #f8fafc;
	font-size: 13px;
	color: #344054;
}
td:first-child {
	font-weight: 700;
	color: #172033;
}
tr:last-child td {
	border-bottom: none;
}
.check {
	color: #059669;
	font-weight: 700;
}
.medium {
	color: #d97706;
	font-weight: 700;
}
.resource-table-wrap {
	overflow-x: auto;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}
.resource-table {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
	background: #fff;
}
.resource-table th, .resource-table td {
	padding: 15px 18px;
	text-align: left;
	border-bottom: 1px solid #edf0f3;
	font-size: 13px;
}
.resource-table th {
	background: #f8fafc;
}
.resource-table td:first-child {
	font-weight: 700;
}
.resource-table tr:last-child td {
	border-bottom: 0;
}
/* ===== Use Cases ===== */
.use-cases {
	padding: 80px 0;
	background: #fff;
}
.use-case-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.use-case {
	padding: 28px;
	background: #f8fafc;
	border: 1px solid #e7ebf1;
	border-radius: 12px;
}
.use-case-number {
	font-size: 13px;
	font-weight: 800;
	color: #0284c7;
	margin-bottom: 12px;
}
.use-case h3 {
	font-size: 21px;
	margin-bottom: 10px;
}
.use-case p {
	color: #667085;
	font-size: 14px;
}
/* ===== SEO Trust ===== */
.seo-trust {
	padding: 30px 0 10px;
	background: #f7f9fc;
}
.seo-trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 20px;
}
.seo-trust-card {
	background: #fff;
	border: 1px solid #e4e9f0;
	border-radius: 10px;
	padding: 18px;
}
.seo-trust-card strong {
	display: block;
	color: #172033;
	font-size: 14px;
	margin-bottom: 5px;
}
.seo-trust-card span {
	display: block;
	color: #667085;
	font-size: 11.5px;
	line-height: 1.65;
}
/* ===== FAQ ===== */
.faq {
	padding: 80px 0;
	background: #fff;
}
.faq-list {
	margin: 0 auto;
}
details {
	border-bottom: 1px solid #e5e7eb;
	padding: 20px 0;
}
summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 16px;
	padding-right: 20px;
}
details p {
	color: #667085;
	margin-top: 12px;
	font-size: 14px;
}
/* ===== Footer ===== */
footer {
	background: #080f1e;
	color: #94a3b8;
	padding: 35px 0;
	font-size: 13px;
}
.footer-inner {
	display: flex;
	justify-content: space-between;
	gap: 25px;
	flex-wrap: wrap;
}
.footer-brand {
	color: #fff;
	font-weight: 800;
}
.footer-description {
	text-align: center;
	margin-top: 15px;
	font-size: 12px;
}

/* ===== Responsive ===== */
@media (max-width: 1000px) {
 .hero-trading-grid {
grid-template-columns: 1fr;
gap: 50px;
}
 .hero-promo {
text-align: center;
}
 .hero-description {
margin-left: auto;
margin-right: auto;
}
 .hero-benefits {
margin-left: auto;
margin-right: auto;
text-align: left;
}
 .hero-promo-links {
justify-content: center;
}
 .trading-panel {
width: min(100%, 560px);
margin: 0 auto;
}
 .use-case-grid {
grid-template-columns: 1fr;
}
 .info-grid {
grid-template-columns: 1fr;
}
 .steps-grid {
grid-template-columns: repeat(2, 1fr);
}
 .seo-trust-grid {
grid-template-columns: 1fr 1fr;
}
 .resource-table {
min-width: 620px;
}
}
@media (max-width: 800px) {
 #what-is-tron-energy > .container > div:nth-child(2), #how-tron-energy-works > .container > div:nth-child(2) {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 600px) {
 .container {
width: min(100% - 28px, 1180px);
}
 nav {
display: none;
}
 .hero-trading {
padding: 55px 0 65px;
}
 .hero-promo h1 {
font-size: 39px;
letter-spacing: -1.2px;
}
 .hero-benefits {
grid-template-columns: 1fr;
}
 .trading-panel {
padding: 18px;
}
 .trade-summary {
grid-template-columns: 1fr 1fr;
}
 .trade-summary div:last-child {
grid-column: 1/-1;
padding-top: 8px;
border-top: 1px solid #edf0f5;
}
 .section-heading h2 {
font-size: 28px;
}
 .info-grid, .steps-grid, .seo-trust-grid {
grid-template-columns: 1fr;
}
 .seo-trust {
padding: 22px 0 5px;
}
 .resource-table {
min-width: 620px;
}
}
/* ===== Shared site navigation ===== */
.navbar {
	position:sticky;
	top:0;
	z-index:2000;
	background:rgba(15, 23, 42, .97);
	color:#fff;
	border-bottom:1px solid rgba(255, 255, 255, .08);
	box-shadow:0 2px 12px rgba(15, 23, 42, .08);
	backdrop-filter:blur(12px)
}
.navbar-inner {
	width:min(1180px, calc(100% - 40px));
	min-height:72px;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:28px
}
.site-logo {
	display:flex;
	align-items:center;
	gap:8px;
	font-size:21px;
	font-weight:800;
	letter-spacing:-.4px;
	color:#fff!important;
	text-decoration:none!important;
	white-space:nowrap
}
.logo-icon {
	color:#38bdf8
}
.logo-text {
	color:#fff
}
.nav-links {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:24px;
	overflow-x:auto;
	white-space:nowrap;
	scrollbar-width:none
}
.nav-links::-webkit-scrollbar {
display:none
}
.nav-links a {
	color:#dbe5f2!important;
	text-decoration:none!important;
	font-size:14px;
	font-weight:600;
	padding:8px 0;
transition:color .2s, transform .2s
}
.nav-links a:hover, .nav-links a.active {
	color:#38bdf8!important
}
.nav-links a.active {
	font-weight:800
}
/* ===== Shared site footer ===== */
footer {
	background:#080f1e;
	color:#94a3b8;
	padding:35px 0;
	font-size:13px
}
.footer-inner {
	display:flex;
	justify-content:space-between;
	gap:25px;
	flex-wrap:wrap
}
.footer-brand {
	color:#fff;
	font-weight:800
}
footer a {
	color:#cbd5e1;
	text-decoration:none
}
footer a:hover {
	color:#38bdf8
}
.footer-description {
	text-align:center;
	margin:15px 0 0;
	font-size:12px
}
 @media(max-width:900px) {
.navbar-inner {
width:min(100% - 24px, 1180px);
gap:14px
}
.nav-links {
gap:16px
}
.site-logo {
font-size:18px
}
.nav-links a {
font-size:13px
}
}
@media(max-width:650px) {
.navbar-inner {
display:block;
padding:10px 0
}
.site-logo {
display:block;
margin-bottom:7px
}
.nav-links {
justify-content:flex-start;
gap:18px;
padding-bottom:2px
}
}
/* Page-specific theme variable alignment */
:root {
 --primary:#0284c7;
--primary-dark:#0369a1;
--primary-light:#38bdf8;
 --bg-dark:#f7f9fc;
--bg-card:#fff;
--bg-card-hover:#f8fafc;
 --text-primary:#172033;
--text-secondary:#667085;
--text-muted:#98a2b3;
 --border:#e4e7ec;
--border-color:#e4e7ec;
 --gradient-primary:linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
 --gradient-red:linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
 --gradient-dark:linear-gradient(135deg, #07111f 0%, #0f172a 55%, #111c38 100%);
}
/* ===== ABOUT PAGE ===== */
body.page-about {
 --bg:#f5f7fb;
 --bg-2:#eef2f7;
 --card:#ffffff;
 --card-2:#f3f6fa;
 --border:rgba(15, 23, 42, .12);
 --text:#172033;
 --muted:#667085;
 --accent:#7c5cff;
 --accent-2:#00e0c6;
 --green:#3ddc97;
 --orange:#ffb547;
 --red:#ff6b6b;
 --radius:14px;
 --shadow:0 10px 30px rgba(15, 23, 42, .10);
 --max:1100px;
 --t:#0b0e17;
}
:where(body.page-about), :where(body.page-about) * {
box-sizing:border-box
}
body.page-about {
	margin:0;
	padding:0;
	background:var(--bg);
	color:var(--text);
	font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
	line-height:1.7;
	-webkit-font-smoothing:antialiased
}
:where(body.page-about) a {
color:var(--accent-2);
text-decoration:none
}
:where(body.page-about) a:hover {
text-decoration:underline
}
:where(body.page-about) img {
max-width:100%;
height:auto;
display:block
}
:where(body.page-about) h1, :where(body.page-about) h2, :where(body.page-about) h3, :where(body.page-about) h4 {
line-height:1.25;
font-weight:700;
letter-spacing:-.01em
}
:where(body.page-about) h1 {
font-size:clamp(1.9rem, 3.5vw, 2.8rem);
margin:0 0 .4em
}
:where(body.page-about) h2 {
font-size:clamp(1.4rem, 2.4vw, 1.9rem);
margin:2.2em 0 .6em;
border-left:4px solid var(--accent);
padding-left:.6em
}
:where(body.page-about) h3 {
font-size:1.15rem;
margin:1.4em 0 .4em;
color:#344054
}
:where(body.page-about) p {
margin:0 0 1em;
color:#475467
}
:where(body.page-about) .wrap {
max-width:var(--max);
margin:0 auto;
padding:0 20px
}
:where(body.page-about) header.site {
padding:18px 0;
position:sticky;
top:0;
z-index:50;
background:rgba(255, 255, 255, .92);
backdrop-filter:blur(8px);
border-bottom:1px solid var(--border)
}
:where(body.page-about) header.site .row {
display:flex;
align-items:center;
justify-content:space-between;
gap:16px
}
:where(body.page-about) .logo {
display:flex;
align-items:center;
gap:10px;
font-weight:800;
font-size:1.1rem;
color:#172033
}
:where(body.page-about) .logo .dot {
width:28px;
height:28px;
border-radius:8px;
background:linear-gradient(135deg, var(--accent), var(--accent-2));
box-shadow:0 0 18px rgba(104, 71, 232, .18)
}
:where(body.page-about) nav.primary {
display:flex;
gap:6px;
flex-wrap:wrap
}
:where(body.page-about) nav.primary a {
color:var(--muted);
padding:8px 12px;
border-radius:8px;
font-size:.95rem;
font-weight:500
}
:where(body.page-about) nav.primary a:hover, :where(body.page-about) nav.primary a.active {
color:#172033;
background:rgba(104, 71, 232, .10);
text-decoration:none
}
:where(body.page-about) .cta-top {
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 16px;
border-radius:10px;
background:linear-gradient(135deg, var(--accent), #5b8bff);
color:#fff;
font-weight:700;
font-size:.92rem;
border:none;
cursor:pointer
}
:where(body.page-about) .cta-top:hover {
filter:brightness(1.08);
text-decoration:none
}
:where(body.page-about) .hero {
padding:70px 0 50px;
background:radial-gradient(1200px 400px at 80% -10%, rgba(104, 71, 232, .10), transparent), radial-gradient(900px 300px at 0% 0%, rgba(0, 143, 130, .06), transparent)
}
:where(body.page-about) .hero .pill {
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 14px;
border-radius:999px;
background:rgba(22, 138, 90, .10);
color:var(--green);
font-size:.85rem;
font-weight:600;
border:1px solid rgba(22, 138, 90, .25);
margin-bottom:18px
}
:where(body.page-about) .hero .pill .pdot {
width:8px;
height:8px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 10px var(--green)
}
:where(body.page-about) .hero p.lede {
font-size:1.15rem;
color:#475467;
max-width:780px;
margin:0 0 1.4em
}
:where(body.page-about) .hero .stats {
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:14px;
margin-top:30px
}
:where(body.page-about) .stat {
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
padding:18px;
text-align:center
}
:where(body.page-about) .stat .v {
font-size:1.6rem;
font-weight:800;
color:#172033
}
:where(body.page-about) .stat .l {
font-size:.82rem;
color:var(--muted);
margin-top:4px
}
:where(body.page-about) section {
padding:50px 0
}
:where(body.page-about) .grid-2 {
display:grid;
grid-template-columns:1fr 1fr;
gap:20px
}
:where(body.page-about) .grid-3 {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:18px
}
:where(body.page-about) .card {
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
padding:22px;
box-shadow:var(--shadow)
}
:where(body.page-about) .card h3 {
margin-top:0
}
:where(body.page-about) .card .tag {
display:inline-block;
padding:3px 10px;
border-radius:6px;
font-size:.75rem;
font-weight:700;
background:rgba(104, 71, 232, .10);
color:#6847e8;
margin-bottom:10px
}
:where(body.page-about) .steps {
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:16px;
counter-reset:step
}
:where(body.page-about) .step {
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
padding:20px;
position:relative;
counter-increment:step
}
:where(body.page-about) .step::before {
content:counter(step);
position:absolute;
top:14px;
right:16px;
font-size:.8rem;
font-weight:700;
color:var(--accent);
background:rgba(104, 71, 232, .10);
padding:3px 9px;
border-radius:6px
}
:where(body.page-about) .step h3 {
margin:0 0 .4em;
font-size:1rem
}
:where(body.page-about) .step p {
font-size:.92rem;
margin:0;
color:#475467
}
:where(body.page-about) .table-wrap {
overflow-x:auto;
margin-top:14px;
border:1px solid var(--border);
border-radius:var(--radius)
}
:where(body.page-about) table {
width:100%;
border-collapse:collapse;
min-width:640px
}
:where(body.page-about) th, :where(body.page-about) td {
padding:12px 14px;
text-align:left;
border-bottom:1px solid var(--border);
font-size:.92rem
}
:where(body.page-about) th {
background:var(--card-2);
color:#344054;
font-weight:700
}
:where(body.page-about) td {
color:#475467
}
:where(body.page-about) tr:last-child td {
border-bottom:none
}
:where(body.page-about) .badge {
display:inline-block;
padding:2px 9px;
border-radius:6px;
font-size:.78rem;
font-weight:700
}
:where(body.page-about) .b-green {
background:rgba(61, 220, 151, .15);
color:var(--green)
}
:where(body.page-about) .b-red {
background:rgba(196, 61, 61, .10);
color:var(--red)
}
:where(body.page-about) .b-blue {
background:rgba(37, 99, 235, .10);
color:#2563eb
}
:where(body.page-about) details {
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
padding:16px 20px;
margin-bottom:12px
}
:where(body.page-about) details summary {
cursor:pointer;
font-weight:700;
color:#172033;
list-style:none;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px
}
:where(body.page-about) details summary::-webkit-details-marker {
display:none
}
:where(body.page-about) details summary::after {
content:"+";
font-size:1.3rem;
color:var(--accent);
transition:transform .2s
}
:where(body.page-about) details[open] summary::after {
content: "+";
}
:where(body.page-about) details p {
margin:.6em 0 0;
color:#475467;
font-size:.95rem
}
:where(body.page-about) .trust-grid {
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:16px
}
:where(body.page-about) .trust {
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
padding:18px;
text-align:center
}
:where(body.page-about) .trust .ico {
font-size:1.8rem;
margin-bottom:8px
}
:where(body.page-about) .trust .t {
font-weight:700;
color:#172033;
margin-bottom:4px
}
:where(body.page-about) .trust .d {
font-size:.85rem;
color:var(--muted)
}
:where(body.page-about) .team {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:18px
}
:where(body.page-about) .person {
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
padding:20px;
text-align:center
}
:where(body.page-about) .avatar {
width:72px;
height:72px;
border-radius:50%;
margin:0 auto 12px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.6rem;
font-weight:800;
color:#fff;
background:linear-gradient(135deg, var(--accent), var(--accent-2))
}
:where(body.page-about) .person .name {
font-weight:700;
color:#172033
}
:where(body.page-about) .person .role {
font-size:.85rem;
color:var(--accent-2);
margin-bottom:6px
}
:where(body.page-about) .person .bio {
font-size:.88rem;
color:#475467;
margin:0
}
:where(body.page-about) .cta-section {
background:linear-gradient(135deg, rgba(104, 71, 232, .08), rgba(0, 143, 130, .06));
border:1px solid var(--border);
border-radius:18px;
padding:40px;
text-align:center;
margin:30px 0
}
:where(body.page-about) .cta-section h2 {
border:none;
padding:0;
margin:0 0 .4em;
font-size:1.6rem
}
:where(body.page-about) .cta-section p {
color:#475467;
max-width:640px;
margin:0 auto 1.2em
}
:where(body.page-about) .btn {
display:inline-flex;
align-items:center;
gap:8px;
padding:13px 24px;
border-radius:12px;
font-weight:700;
font-size:1rem;
border:none;
cursor:pointer;
color:#fff;
background:linear-gradient(135deg, var(--accent), #5b8bff)
}
:where(body.page-about) .btn:hover {
filter:brightness(1.08);
text-decoration:none
}
:where(body.page-about) .btn-ghost {
background:transparent;
border:1px solid var(--border);
color:#344054;
margin-left:10px
}
:where(body.page-about) footer.site {
padding:40px 0 60px;
border-top:1px solid var(--border);
color:var(--muted);
font-size:.88rem
}
:where(body.page-about) footer .row {
display:flex;
justify-content:space-between;
gap:20px;
flex-wrap:wrap
}
:where(body.page-about) footer a {
color:#667085
}
:where(body.page-about) footer a:hover {
color:#172033
}
:where(body.page-about) .meta-line {
margin-top:14px;
color:#667085;
font-size:.82rem
}
@media (max-width:900px) {
:where(body.page-about) .hero .stats {
grid-template-columns:repeat(2, 1fr)
}
:where(body.page-about) .grid-2 {
grid-template-columns:1fr
}
:where(body.page-about) .grid-3 {
grid-template-columns:1fr
}
:where(body.page-about) .steps {
grid-template-columns:repeat(2, 1fr)
}
:where(body.page-about) .trust-grid {
grid-template-columns:repeat(2, 1fr)
}
:where(body.page-about) .team {
grid-template-columns:1fr
}
:where(body.page-about) nav.primary {
display:none
}
}
@media (max-width:560px) {
:where(body.page-about) .hero .stats {
grid-template-columns:1fr
}
:where(body.page-about) .steps {
grid-template-columns:1fr
}
:where(body.page-about) .trust-grid {
grid-template-columns:1fr
}
:where(body.page-about) .cta-section {
padding:28px 20px
}
}
:where(body.page-about) .skip {
position:absolute;
left:-9999px
}
:where(body.page-about) .skip:focus {
left:12px;
top:12px;
background:#fff;
color:#000;
padding:8px 12px;
border-radius:6px;
z-index:100
}
:where(body.page-about) .updated {
display:inline-flex;
align-items:center;
gap:6px;
font-size:.82rem;
color:#667085;
margin-top:6px
}
:where(body.page-about) .updated .udot {
width:6px;
height:6px;
border-radius:50%;
background:var(--accent-2)
}
body.page-about {
 --primary:#0284c7;
--primary-dark:#0369a1;
--primary-light:#38bdf8;
 --bg-dark:#f7f9fc;
--bg-card:#fff;
--bg-card-hover:#f8fafc;
 --text-primary:#172033;
--text-secondary:#667085;
--text-muted:#98a2b3;
 --border:#e4e7ec;
--border-color:#e4e7ec;
 --gradient-primary:linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
 --gradient-red:linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
 --gradient-dark:linear-gradient(135deg, #07111f 0%, #0f172a 55%, #111c38 100%);
}
:where(body.page-about) .navbar {
position:sticky;
top:0;
z-index:2000;
background:rgba(15, 23, 42, .97);
color:#fff;
border-bottom:1px solid rgba(255, 255, 255, .08);
box-shadow:0 2px 12px rgba(15, 23, 42, .08);
backdrop-filter:blur(12px)
}
:where(body.page-about) .navbar-inner {
width:min(1180px, calc(100% - 40px));
min-height:72px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:28px
}
:where(body.page-about) .site-logo {
display:flex;
align-items:center;
gap:8px;
font-size:21px;
font-weight:800;
letter-spacing:-.4px;
color:#fff!important;
text-decoration:none!important;
white-space:nowrap
}
:where(body.page-about) .logo-icon {
color:#38bdf8
}
:where(body.page-about) .logo-text {
color:#fff
}
:where(body.page-about) .nav-links {
display:flex;
align-items:center;
justify-content:flex-end;
gap:24px;
overflow-x:auto;
white-space:nowrap;
scrollbar-width:none
}
:where(body.page-about) .nav-links::-webkit-scrollbar {
display:none
}
:where(body.page-about) .nav-links a {
color:#dbe5f2!important;
text-decoration:none!important;
font-size:14px;
font-weight:600;
padding:8px 0;
transition:color .2s, transform .2s
}
:where(body.page-about) .nav-links a:hover, :where(body.page-about) .nav-links a.active {
color:#38bdf8!important
}
:where(body.page-about) .nav-links a.active {
font-weight:800
}
:where(body.page-about) footer {
background:#080f1e;
color:#94a3b8;
padding:35px 0;
font-size:13px
}
:where(body.page-about) .footer-inner {
display:flex;
justify-content:space-between;
gap:25px;
flex-wrap:wrap
}
:where(body.page-about) .footer-brand {
color:#fff;
font-weight:800
}
:where(body.page-about) footer a {
color:#cbd5e1;
text-decoration:none
}
:where(body.page-about) footer a:hover {
color:#38bdf8
}
:where(body.page-about) .footer-description {
text-align:center;
margin:15px 0 0;
font-size:12px
}
@media (max-width:900px) {
:where(body.page-about) .navbar-inner {
width:min(100% - 24px, 1180px);
gap:14px
}
:where(body.page-about) .nav-links {
gap:16px
}
:where(body.page-about) .site-logo {
font-size:18px
}
:where(body.page-about) .nav-links a {
font-size:13px
}
}
@media (max-width:650px) {
:where(body.page-about) .navbar-inner {
display:block;
padding:10px 0
}
:where(body.page-about) .site-logo {
display:block;
margin-bottom:7px
}
:where(body.page-about) .nav-links {
justify-content:flex-start;
gap:18px;
padding-bottom:2px
}
}

/* ===== BLOG PAGE ===== */
:where(body.page-blog) .hero, :where(body.page-blog) .hero-section {
background:radial-gradient(circle at 15% 30%, rgba(14, 165, 233, .15), transparent 35%), linear-gradient(135deg, #07111f 0%, #0f172a 55%, #111c38 100%)!important;
color:#fff!important
}
:where(body.page-blog) .section, :where(body.page-blog) .resource-section, :where(body.page-blog) .why-buy-section, :where(body.page-blog) .why-sell-section, :where(body.page-blog) .faq-section, :where(body.page-blog) .steps-section, :where(body.page-blog) .compare-section {
background:#f7f9fc!important;
color:#172033!important
}
:where(body.page-blog) .section:nth-of-type(even), :where(body.page-blog) .section-alt, :where(body.page-blog) .compare-section, :where(body.page-blog) .steps-section {
background:#fff!important
}
:where(body.page-blog) .section-title, :where(body.page-blog) .section-header h2, :where(body.page-blog) .section h2 {
color:#172033!important
}
:where(body.page-blog) .section-description, :where(body.page-blog) .section-desc, :where(body.page-blog) .section-header p {
color:#667085!important
}
:where(body.page-blog) .section-tag, :where(body.page-blog) .section-eyebrow {
background:rgba(56, 189, 248, .10)!important;
color:#0284c7!important;
border-color:rgba(56, 189, 248, .18)!important
}
:where(body.page-blog) .card, :where(body.page-blog) .step-card, :where(body.page-blog) .why-card, :where(body.page-blog) .feature-card, :where(body.page-blog) .comparison-card, :where(body.page-blog) .faq-item, :where(body.page-blog) .article-card, :where(body.page-blog) .sidebar-widget, :where(body.page-blog) .service-card, :where(body.page-blog) .sell-tool, :where(body.page-blog) .rental-widget {
background:#fff!important;
color:#172033!important;
border-color:#e4e7ec!important;
box-shadow:0 8px 28px rgba(16, 24, 40, .07)!important
}
:where(body.page-blog) .step-card h3, :where(body.page-blog) .why-card h3, :where(body.page-blog) .why-title, :where(body.page-blog) .feature-card h3, :where(body.page-blog) .card h3, :where(body.page-blog) .article-card h3, :where(body.page-blog) .service-card h3 {
color:#172033!important
}
:where(body.page-blog) .step-card p, :where(body.page-blog) .why-card p, :where(body.page-blog) .why-desc, :where(body.page-blog) .feature-card p, :where(body.page-blog) .card p, :where(body.page-blog) .article-card p, :where(body.page-blog) .service-card p, :where(body.page-blog) .faq-answer p {
color:#667085!important
}
:where(body.page-blog) .form-input, :where(body.page-blog) .input-box input, :where(body.page-blog) .sell-tool input, :where(body.page-blog) .rental-widget input, :where(body.page-blog) .rental-widget select {
background:#fff!important;
color:#172033!important;
border-color:#d0d5dd!important
}
:where(body.page-blog) .footer {
background:#0f172a!important;
color:#fff!important;
border-top-color:rgba(255, 255, 255, .08)!important
}
:where(body.page-blog) .footer a, :where(body.page-blog) .footer-links a, :where(body.page-blog) .footer-col a {
color:#cbd5e1!important
}
:where(body.page-blog) .footer a:hover, :where(body.page-blog) .footer-links a:hover, :where(body.page-blog) .footer-col a:hover {
color:#38bdf8!important
}
:where(body.page-blog) .breadcrumb {
color:#667085!important
}
:where(body.page-blog) .breadcrumb a {
color:#667085!important
}
body.page-blog {
 --primary: #0284c7;
 --primary-dark: #0369a1;
 --secondary: #38bdf8;
 --bg-dark: #f7f9fc;
 --bg-card: #ffffff;
 --bg-card-hover: #f8fafc;
 --text-main: #172033;
 --text-muted: #667085;
 --text-light: #475467;
 --border: #e4e7ec;
 --success: #059669;
 --gradient-1: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
 --gradient-2: linear-gradient(135deg, #07111f 0%, #0f172a 55%, #111c38 100%);
 --shadow-glow: 0 0 40px rgba(2, 132, 199, .12);
 --shadow-card: 0 8px 32px rgba(16, 24, 40, .08);
}
:where(body.page-blog) .hero {
 padding: 120px 24px 80px;
 background: var(--gradient-2);
 position: relative;
 overflow: hidden;
}
:where(body.page-blog) .hero::before {
 content: "";
 position: absolute;
 top: -200px;
 right: -200px;
 width: 600px;
 height: 600px;
 background: radial-gradient(circle, rgba(255, 59, 59, 0.08) 0%, transparent 70%);
 border-radius: 50%;
}
:where(body.page-blog) .hero::after {
 content: "";
 position: absolute;
 bottom: -200px;
 left: -200px;
 width: 500px;
 height: 500px;
 background: radial-gradient(circle, rgba(255, 140, 0, 0.06) 0%, transparent 70%);
 border-radius: 50%;
}
:where(body.page-blog) .hero-inner {
 max-width: 1200px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr 420px;
 gap: 60px;
 align-items: center;
 position: relative;
 z-index: 1;
}
:where(body.page-blog) .hero-content h1 {
 font-size: 48px;
 font-weight: 900;
 line-height: 1.15;
 margin-bottom: 20px;
 letter-spacing: -0.5px;
}
:where(body.page-blog) .hero-content h1 .highlight {
 background: var(--gradient-1);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
:where(body.page-blog) .hero-subtitle {
 font-size: 18px;
 color: var(--text-muted);
 margin-bottom: 32px;
 line-height: 1.7;
 max-width: 520px;
}
:where(body.page-blog) .hero-trust {
 display: flex;
 gap: 28px;
 margin-bottom: 36px;
 flex-wrap: wrap;
}
:where(body.page-blog) .trust-item {
 display: flex;
 align-items: center;
 gap: 8px;
 color: var(--text-muted);
 font-size: 14px;
}
:where(body.page-blog) .trust-icon {
 width: 20px;
 height: 20px;
 background: var(--success);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 color: #fff;
 flex-shrink: 0;
}
:where(body.page-blog) .hero-stats {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 max-width: 480px;
}
:where(body.page-blog) .stat-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 18px 16px;
 text-align: center;
}
:where(body.page-blog) .stat-value {
 font-size: 24px;
 font-weight: 800;
 color: var(--text-main);
}
:where(body.page-blog) .stat-label {
 font-size: 12px;
 color: var(--text-muted);
 margin-top: 4px;
}
:where(body.page-blog) .rental-widget {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 20px;
 padding: 32px 28px;
 box-shadow: var(--shadow-card), var(--shadow-glow);
 position: relative;
}
:where(body.page-blog) .widget-header {
 text-align: center;

}
:where(body.page-blog) .widget-title {
 font-size: 20px;
 font-weight: 700;
 margin-bottom: 6px;
}
:where(body.page-blog) .widget-subtitle {
 font-size: 13px;
 color: var(--text-muted);
}
:where(body.page-blog) .widget-form {
 display: flex;
 flex-direction: column;
 gap: 18px;
}
:where(body.page-blog) .form-group {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
:where(body.page-blog) .form-label {
 font-size: 13px;
 font-weight: 600;
 color: var(--text-light);
}
:where(body.page-blog) .form-input {
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 14px 16px;
 color: var(--text-main);
 font-size: 14px;
 transition: border-color 0.2s, box-shadow 0.2s;
 font-family: inherit;
}
:where(body.page-blog) .form-input:focus {
 outline: none;
 border-color: var(--primary);
 box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.1);
}
:where(body.page-blog) .form-input::placeholder {
 color: #555a7a;
}
:where(body.page-blog) .quick-amounts {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 8px;
}
:where(body.page-blog) .quick-amount {
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 10px 4px;
 text-align: center;
 font-size: 13px;
 font-weight: 600;
 color: var(--text-light);
 cursor: pointer;
 transition: all 0.2s;
}
:where(body.page-blog) .quick-amount:hover, :where(body.page-blog) .quick-amount.active {
 background: rgba(255, 59, 59, 0.1);
 border-color: var(--primary);
 color: var(--primary);
}
:where(body.page-blog) .duration-options {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 8px;
}
:where(body.page-blog) .duration-option {
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 12px 8px;
 text-align: center;
 cursor: pointer;
 transition: all 0.2s;
}
:where(body.page-blog) .duration-option.active {
 background: rgba(255, 59, 59, 0.1);
 border-color: var(--primary);
}
:where(body.page-blog) .duration-value {
 font-size: 14px;
 font-weight: 700;
 color: var(--text-main);
}
:where(body.page-blog) .duration-option.active .duration-value {
 color: var(--primary);
}
:where(body.page-blog) .duration-label {
 font-size: 11px;
 color: var(--text-muted);
 margin-top: 2px;
}
:where(body.page-blog) .price-display {
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 16px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
:where(body.page-blog) .price-label {
 font-size: 14px;
 color: var(--text-muted);
}
:where(body.page-blog) .price-value {
 font-size: 28px;
 font-weight: 900;
 color: var(--primary);
}
:where(body.page-blog) .price-unit {
 font-size: 14px;
 color: var(--text-muted);
 font-weight: 400;
}
:where(body.page-blog) .widget-cta {
 background: var(--gradient-1);
 color: #fff;
 border: none;
 border-radius: 12px;
 padding: 16px;
 font-size: 16px;
 font-weight: 700;
 cursor: pointer;
 transition: transform 0.2s, box-shadow 0.2s;
 font-family: inherit;
}
:where(body.page-blog) .widget-cta:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 30px rgba(255, 59, 59, 0.4);
}
:where(body.page-blog) .widget-footer {
 text-align: center;
 margin-top: 16px;
 font-size: 12px;
 color: var(--text-muted);
}
:where(body.page-blog) .section {
 padding: 80px 24px;
 max-width: 1200px;
 margin: 0 auto;
}
:where(body.page-blog) .section-header {
 text-align: center;
 margin-bottom: 56px;
}
:where(body.page-blog) .section-tag {
 display: inline-block;
 background: rgba(255, 59, 59, 0.1);
 color: var(--primary);
 font-size: 12px;
 font-weight: 700;
 padding: 6px 16px;
 border-radius: 20px;
 margin-bottom: 16px;
 text-transform: uppercase;
 letter-spacing: 1px;
}
:where(body.page-blog) .section-title {
 font-size: 36px;
 font-weight: 800;
 margin-bottom: 14px;
 line-height: 1.2;
}
:where(body.page-blog) .section-desc {
 font-size: 16px;
 color: var(--text-muted);
 max-width: 600px;
 margin: 0 auto;
 line-height: 1.7;
}
:where(body.page-blog) .steps-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 28px;
}
:where(body.page-blog) .step-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 36px 28px;
 text-align: center;
 transition: transform 0.3s, box-shadow 0.3s;
 position: relative;
}
:where(body.page-blog) .step-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-card);
}
:where(body.page-blog) .step-number {
 width: 56px;
 height: 56px;
 background: var(--gradient-1);
 border-radius: 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 22px;
 font-weight: 900;
 color: #fff;
 margin: 0 auto 20px;
}
:where(body.page-blog) .step-title {
 font-size: 18px;
 font-weight: 700;
 margin-bottom: 10px;
}
:where(body.page-blog) .step-desc {
 font-size: 14px;
 color: var(--text-muted);
 line-height: 1.7;
}
:where(body.page-blog) .step-card::after {
 content: "+";
 position: absolute;
 right: -20px;
 top: 50%;
 transform: translateY(-50%);
 font-size: 24px;
 color: var(--primary);
 opacity: 0.5;
}
:where(body.page-blog) .step-card:last-child::after {
 display: none;
}
:where(body.page-blog) .why-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
}
:where(body.page-blog) .why-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 32px 26px;
 transition: transform 0.3s, box-shadow 0.3s;
}
:where(body.page-blog) .why-card:hover {
 transform: translateY(-3px);
 box-shadow: var(--shadow-card);
}
:where(body.page-blog) .why-icon {
 width: 48px;
 height: 48px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 22px;
 margin-bottom: 18px;
}
:where(body.page-blog) .why-icon.red {
background: rgba(255, 59, 59, 0.12);
}
:where(body.page-blog) .why-icon.orange {
background: rgba(255, 140, 0, 0.12);
}
:where(body.page-blog) .why-icon.green {
background: rgba(0, 212, 170, 0.12);
}
:where(body.page-blog) .why-icon.blue {
background: rgba(59, 130, 246, 0.12);
}
:where(body.page-blog) .why-icon.purple {
background: rgba(139, 92, 246, 0.12);
}
:where(body.page-blog) .why-icon.yellow {
background: rgba(234, 179, 8, 0.12);
}
:where(body.page-blog) .why-title {
 font-size: 17px;
 font-weight: 700;
 margin-bottom: 10px;
}
:where(body.page-blog) .why-desc {
 font-size: 14px;
 color: var(--text-muted);
 line-height: 1.7;
}
:where(body.page-blog) .compare-wrapper {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 20px;
 overflow: hidden;
}
:where(body.page-blog) .compare-table {
 width: 100%;
 border-collapse: collapse;
}
:where(body.page-blog) .compare-table thead {
 background: rgba(255, 59, 59, 0.06);
}
:where(body.page-blog) .compare-table th {
 padding: 20px 24px;
 text-align: center;
 font-size: 15px;
 font-weight: 700;
 color: var(--text-main);
 border-bottom: 1px solid var(--border);
}
:where(body.page-blog) .compare-table th:first-child {
 text-align: left;
}
:where(body.page-blog) .compare-table th.highlight-col {
 background: rgba(255, 59, 59, 0.08);
 color: var(--primary);
}
:where(body.page-blog) .compare-table td {
 padding: 18px 24px;
 text-align: center;
 font-size: 14px;
 color: var(--text-light);
 border-bottom: 1px solid var(--border);
}
:where(body.page-blog) .compare-table td:first-child {
 text-align: left;
 font-weight: 600;
 color: var(--text-main);
}
:where(body.page-blog) .compare-table tr:last-child td {
 border-bottom: none;
}
:where(body.page-blog) .compare-table tbody tr:hover {
 background: rgba(255, 255, 255, 0.02);
}
:where(body.page-blog) .check {
color: var(--success);
font-weight: 700;
font-size: 16px;
}
:where(body.page-blog) .cross {
color: #666;
font-size: 16px;
}
:where(body.page-blog) .highlight-cell {
 background: rgba(255, 59, 59, 0.04);
 font-weight: 600;
}
:where(body.page-blog) .faq-list {
 max-width: 800px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 12px;
}
:where(body.page-blog) .faq-item {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 14px;
 overflow: hidden;
 transition: box-shadow 0.3s;
}
:where(body.page-blog) .faq-item:hover {
 box-shadow: var(--shadow-card);
}
:where(body.page-blog) .faq-question {
 padding: 22px 28px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 cursor: pointer;
 font-size: 16px;
 font-weight: 600;
 user-select: none;
}
:where(body.page-blog) .faq-toggle {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 background: rgba(255, 59, 59, 0.1);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 color: var(--primary);
 transition: transform 0.3s;
 flex-shrink: 0;
}
:where(body.page-blog) .faq-item.open .faq-toggle {
 transform: rotate(45deg);
}
:where(body.page-blog) .faq-answer {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.4s ease, padding 0.4s ease;
 padding: 0 28px;
}
:where(body.page-blog) .faq-item.open .faq-answer {
 max-height: 300px;
 padding: 0 28px 22px;
}
:where(body.page-blog) .faq-answer p {
 font-size: 14px;
 color: var(--text-muted);
 line-height: 1.8;
}
:where(body.page-blog) .cta-section {
 padding: 80px 24px;
 text-align: center;
 background: var(--gradient-2);
 position: relative;
 overflow: hidden;
}
:where(body.page-blog) .cta-inner {
 max-width: 700px;
 margin: 0 auto;
 position: relative;
 z-index: 1;
}
:where(body.page-blog) .cta-title {
 font-size: 36px;
 font-weight: 800;
 margin-bottom: 16px;
}
:where(body.page-blog) .cta-desc {
 font-size: 17px;
 color: var(--text-muted);
 margin-bottom: 32px;
 line-height: 1.7;
}
:where(body.page-blog) .cta-button {
 display: inline-block;
 background: var(--gradient-1);
 color: #fff;
 font-size: 17px;
 font-weight: 700;
 padding: 18px 48px;
 border-radius: 14px;
 text-decoration: none;
 transition: transform 0.2s, box-shadow 0.2s;
}
:where(body.page-blog) .cta-button:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 40px rgba(255, 59, 59, 0.4);
}
@media (max-width: 900px) {
:where(body.page-blog) .hero-inner {
 grid-template-columns: 1fr;
 gap: 40px;
}
:where(body.page-blog) .hero-content h1 {
 font-size: 34px;
}
:where(body.page-blog) .steps-grid, :where(body.page-blog) .why-grid {
 grid-template-columns: 1fr;
}
:where(body.page-blog) .step-card::after {
 display: none;
}
:where(body.page-blog) .compare-table {
 font-size: 12px;
}
:where(body.page-blog) .compare-table th, :where(body.page-blog) .compare-table td {
 padding: 12px 10px;
}
:where(body.page-blog) .nav-links {
 display: none;
}
:where(body.page-blog) .section-title {
 font-size: 26px;
}
}
@keyframes page-blog-fadeInUp {
 from {
 opacity: 0;
 transform: translateY(30px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}
:where(body.page-blog) .animate-in {
 animation: page-blog-fadeInUp 0.6s ease forwards;
}
:where(body.page-blog) .rent-page, :where(body.page-blog) .hero, :where(body.page-blog) .section {
width: 100%;
}
:where(body.page-blog) .hero {
 background: 
 radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 6, 10, 0.15), transparent),  radial-gradient(ellipse 60% 40% at 80% 0%, rgba(88, 166, 255, 0.08), transparent);
 padding: 5rem 2rem 4rem;
 text-align: center;
 border-bottom: 1px solid var(--border-light);
}
:where(body.page-blog) .hero-inner {
 max-width: 900px;
 margin: 0 auto;
}
:where(body.page-blog) .hero-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: rgba(255, 6, 10, 0.1);
 border: 1px solid rgba(255, 6, 10, 0.3);
 color: var(--primary-light);
 padding: 6px 16px;
 border-radius: 20px;
 font-size: 0.8rem;
 font-weight: 600;
 margin-bottom: 1.5rem;
}
:where(body.page-blog) .hero-badge .dot {
 width: 6px;
 height: 6px;
 background: var(--accent-green);
 border-radius: 50%;
 animation: page-blog-pulse 2s infinite;
}
@keyframes page-blog-pulse {
 0%, 100% {
opacity: 1;
}
 50% {
opacity: 0.4;
}
}
:where(body.page-blog) .hero h1 {
 font-size: 3rem;
 font-weight: 800;
 line-height: 1.2;
 margin-bottom: 1.5rem;
 background: linear-gradient(135deg, #fff 30%, var(--text-secondary) 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
:where(body.page-blog) .hero h1 span {
 background: linear-gradient(135deg, var(--primary), var(--primary-light));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
:where(body.page-blog) .hero p {
 font-size: 1.15rem;
 color: var(--text-secondary);
 max-width: 700px;
 margin: 0 auto 2.5rem;
 line-height: 1.8;
}
:where(body.page-blog) .hero-stats {
 display: flex;
 justify-content: center;
 gap: 3rem;
 flex-wrap: wrap;
}
:where(body.page-blog) .stat-item {
 text-align: center;
}
:where(body.page-blog) .stat-value {
 font-size: 2rem;
 font-weight: 800;
 color: var(--text-primary);
}
:where(body.page-blog) .stat-value.accent {
 color: var(--primary-light);
}
:where(body.page-blog) .stat-label {
 font-size: 0.85rem;
 color: var(--text-muted);
 margin-top: 4px;
}
:where(body.page-blog) .main-content {
 max-width: 1400px;
 margin: 0 auto;
 padding: 3rem 2rem;
 display: grid;
 grid-template-columns: 1fr 340px;
 gap: 2.5rem;
}
:where(body.page-blog) .section-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 2rem;
 padding-bottom: 1rem;
 border-bottom: 1px solid var(--border-light);
}
:where(body.page-blog) .section-title {
 font-size: 1.5rem;
 font-weight: 700;
 display: flex;
 align-items: center;
 gap: 10px;
}
:where(body.page-blog) .section-title .icon {
 width: 32px;
 height: 32px;
 background: linear-gradient(135deg, var(--primary), var(--primary-light));
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
}
:where(body.page-blog) .section-filter {
 display: flex;
 gap: 8px;
}
:where(body.page-blog) .filter-btn {
 background: var(--bg-card);
 border: 1px solid var(--border);
 color: var(--text-secondary);
 padding: 6px 14px;
 border-radius: var(--radius-sm);
 font-size: 0.8rem;
 cursor: pointer;
 transition: var(--transition);
}
:where(body.page-blog) .filter-btn.active, :where(body.page-blog) .filter-btn:hover {
 background: rgba(255, 6, 10, 0.1);
 border-color: var(--primary);
 color: var(--primary-light);
}
:where(body.page-blog) .article-list {
 display: flex;
 flex-direction: column;
 gap: 1.25rem;
}
:where(body.page-blog) .article-card {
 background: var(--bg-card);
 border: 1px solid var(--border-light);
 border-radius: var(--radius);
 padding: 1.75rem;
 transition: var(--transition);
 position: relative;
 overflow: hidden;
}
:where(body.page-blog) .article-card::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 4px;
 height: 100%;
 background: linear-gradient(180deg, var(--primary), var(--primary-light));
 opacity: 0;
 transition: var(--transition);
}
:where(body.page-blog) .article-card:hover {
 background: var(--bg-card-hover);
 border-color: var(--border);
 transform: translateY(-2px);
 box-shadow: var(--shadow);
}
:where(body.page-blog) .article-card:hover::before {
 opacity: 1;
}
:where(body.page-blog) .article-meta {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 12px;
 flex-wrap: wrap;
}
:where(body.page-blog) .article-category {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 3px 10px;
 border-radius: 4px;
 font-size: 0.72rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}
:where(body.page-blog) .cat-guide {
 background: rgba(88, 166, 255, 0.12);
 color: var(--accent-blue);
 border: 1px solid rgba(88, 166, 255, 0.25);
}
:where(body.page-blog) .cat-tutorial {
 background: rgba(63, 185, 80, 0.12);
 color: var(--accent-green);
 border: 1px solid rgba(63, 185, 80, 0.25);
}
:where(body.page-blog) .cat-tips {
 background: rgba(240, 136, 62, 0.12);
 color: var(--accent-orange);
 border: 1px solid rgba(240, 136, 62, 0.25);
}
:where(body.page-blog) .cat-api {
 background: rgba(163, 113, 247, 0.12);
 color: var(--accent-purple);
 border: 1px solid rgba(163, 113, 247, 0.25);
}
:where(body.page-blog) .cat-news {
 background: rgba(255, 6, 10, 0.12);
 color: var(--primary-light);
 border: 1px solid rgba(255, 6, 10, 0.25);
}
:where(body.page-blog) .article-date {
 font-size: 0.78rem;
 color: var(--text-muted);
 display: flex;
 align-items: center;
 gap: 4px;
}
:where(body.page-blog) .article-reading {
 font-size: 0.78rem;
 color: var(--text-muted);
}
:where(body.page-blog) .article-card h3 {
 font-size: 1.2rem;
 font-weight: 700;
 margin-bottom: 10px;
 line-height: 1.4;
 color: var(--text-primary);
 transition: var(--transition);
}
:where(body.page-blog) .article-card:hover h3 {
 color: var(--primary-light);
}
:where(body.page-blog) .article-card p {
 font-size: 0.9rem;
 color: var(--text-secondary);
 line-height: 1.7;
 margin-bottom: 14px;
}
:where(body.page-blog) .article-footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
}
:where(body.page-blog) .article-tags {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
}
:where(body.page-blog) .article-tag {
 font-size: 0.72rem;
 color: var(--text-muted);
 background: rgba(110, 118, 129, 0.1);
 padding: 2px 8px;
 border-radius: 4px;
}
:where(body.page-blog) .article-link {
 font-size: 0.82rem;
 color: var(--primary-light);
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 4px;
 transition: var(--transition);
}
:where(body.page-blog) .article-link:hover {
 gap: 8px;
}
:where(body.page-blog) .sidebar {
 display: flex;
 flex-direction: column;
 gap: 2rem;
}
:where(body.page-blog) .sidebar-widget {
 background: var(--bg-card);
 border: 1px solid var(--border-light);
 border-radius: var(--radius);
 overflow: hidden;
}
:where(body.page-blog) .widget-header {
 padding: 1rem 1rem;
 border-bottom: 1px solid var(--border-light);
 display: flex;
 align-items: center;
 gap: 10px;
}
:where(body.page-blog) .widget-header .widget-icon {
 width: 28px;
 height: 28px;
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 14px;
}
:where(body.page-blog) .widget-icon.latest {
 background: rgba(88, 166, 255, 0.15);
 color: var(--accent-blue);
}
:where(body.page-blog) .widget-icon.popular {
 background: rgba(240, 136, 62, 0.15);
 color: var(--accent-orange);
}
:where(body.page-blog) .widget-header h4 {
 font-size: 1rem;
 font-weight: 700;
}
:where(body.page-blog) .widget-body {
 padding: 0.75rem;
}
:where(body.page-blog) .latest-list {
 display: flex;
 flex-direction: column;
}
:where(body.page-blog) .latest-item {
 display: flex;
 gap: 12px;
 padding: 12px;
 border-radius: var(--radius-sm);
 transition: var(--transition);
 cursor: pointer;
}
:where(body.page-blog) .latest-item:hover {
 background: var(--bg-card-hover);
}
:where(body.page-blog) .latest-number {
 flex-shrink: 0;
 width: 28px;
 height: 28px;
 border-radius: 6px;
 background: rgba(88, 166, 255, 0.1);
 color: var(--accent-blue);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.78rem;
 font-weight: 700;
}
:where(body.page-blog) .latest-content h5 {
font-size: 0.8rem;
    font-weight: 60;
    line-height: 1;
    margin-bottom: 4px;
 color: var(--text-primary);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
:where(body.page-blog) .latest-content .latest-date {
 font-size: 0.72rem;
 color: var(--text-muted);
}
:where(body.page-blog) .popular-item {
 display: flex;
 gap: 12px;
 padding: 12px;
 border-radius: var(--radius-sm);
 transition: var(--transition);
 cursor: pointer;
}
:where(body.page-blog) .popular-item:hover {
 background: var(--bg-card-hover);
}
:where(body.page-blog) .popular-rank {
 flex-shrink: 0;
 width: 28px;
 height: 28px;
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.78rem;
 font-weight: 800;
}
:where(body.page-blog) .popular-rank.rank-1 {
 background: linear-gradient(135deg, #ffd700, #ffaa00);
 color: #000;
}
:where(body.page-blog) .popular-rank.rank-2 {
 background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
 color: #000;
}
:where(body.page-blog) .popular-rank.rank-3 {
 background: linear-gradient(135deg, #cd7f32, #a0522d);
 color: #fff;
}
:where(body.page-blog) .popular-rank.rank-normal {
 background: rgba(240, 136, 62, 0.1);
 color: var(--accent-orange);
}
:where(body.page-blog) .popular-content h5 {
 font-size: 0.8rem;
    font-weight: 60;
    line-height: 1;
    margin-bottom: 4px;
 color: var(--text-primary);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
:where(body.page-blog) .popular-stats {
 display: flex;
 gap: 12px;
 font-size: 0.72rem;
 color: var(--text-muted);
}
:where(body.page-blog) .popular-stats span {
 display: flex;
 align-items: center;
 gap: 3px;
}
:where(body.page-blog) .newsletter-widget {
 background: linear-gradient(135deg, rgba(255, 6, 10, 0.08), rgba(88, 166, 255, 0.05));
 border: 1px solid rgba(255, 6, 10, 0.2);
}
:where(body.page-blog) .newsletter-body {
 padding: 1.5rem;
 text-align: center;
}
:where(body.page-blog) .newsletter-body p {
 font-size: 0.85rem;
 color: var(--text-secondary);
 margin-bottom: 1rem;
}
:where(body.page-blog) .newsletter-form {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
:where(body.page-blog) .newsletter-form input {
 background: var(--bg-dark);
 border: 1px solid var(--border);
 color: var(--text-primary);
 padding: 10px 14px;
 border-radius: var(--radius-sm);
 font-size: 0.85rem;
 outline: none;
 transition: var(--transition);
}
:where(body.page-blog) .newsletter-form input:focus {
 border-color: var(--primary);
}
:where(body.page-blog) .newsletter-form button {
 background: linear-gradient(135deg, var(--primary), var(--primary-light));
 color: #fff;
 border: none;
 padding: 10px;
 border-radius: var(--radius-sm);
 font-size: 0.85rem;
 font-weight: 600;
 cursor: pointer;
 transition: var(--transition);
}
:where(body.page-blog) .newsletter-form button:hover {
 box-shadow: 0 4px 16px rgba(255, 6, 10, 0.4);
}
:where(body.page-blog) .footer {
 background: var(--bg-sidebar);
 border-top: 1px solid var(--border-light);
 padding: 3rem 2rem 2rem;
 margin-top: 3rem;
}
:where(body.page-blog) .footer-brand p {
 font-size: 0.85rem;
 color: var(--text-muted);
 margin-top: 1rem;
 line-height: 1.7;
}
:where(body.page-blog) .footer-col h5 {
 font-size: 0.9rem;
 font-weight: 700;
 margin-bottom: 1rem;
 color: var(--text-primary);
}
:where(body.page-blog) .footer-col ul {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
:where(body.page-blog) .footer-col a {
 font-size: 0.82rem;
 color: var(--text-muted);
 transition: var(--transition);
}
:where(body.page-blog) .footer-col a:hover {
 color: var(--primary-light);
}
:where(body.page-blog) .footer-bottom {
 max-width: 1400px;
 margin: 2rem auto 0;
 padding-top: 1.5rem;
 border-top: 1px solid var(--border-light);
 text-align: center;
 font-size: 0.78rem;
 color: var(--text-muted);
}
@media (max-width: 1024px) {
:where(body.page-blog) .main-content {
 grid-template-columns: 1fr;
}
:where(body.page-blog) .sidebar {
 order: -1;
}
}
@media (max-width: 640px) {
:where(body.page-blog) .hero h1 {
 font-size: 2rem;
}
:where(body.page-blog) .hero-stats {
 gap: 1.5rem;
}
:where(body.page-blog) .main-content {
 padding: 2rem 1rem;
}
}
:where(body.page-blog) ::-webkit-scrollbar {
 width: 8px;
}
:where(body.page-blog) ::-webkit-scrollbar-track {
 background: var(--bg-dark);
}
:where(body.page-blog) ::-webkit-scrollbar-thumb {
 background: var(--border);
 border-radius: 4px;
}
:where(body.page-blog) ::-webkit-scrollbar-thumb:hover {
 background: var(--text-muted);
}

/* ===== BUY PAGE ===== */
:where(body.page-buy) .hero, :where(body.page-buy) .hero-section {
background:radial-gradient(circle at 15% 30%, rgba(14, 165, 233, .15), transparent 35%), linear-gradient(135deg, #07111f 0%, #0f172a 55%, #111c38 100%)!important;
color:#fff!important
}
:where(body.page-buy) .section, :where(body.page-buy) .resource-section, :where(body.page-buy) .why-buy-section, :where(body.page-buy) .why-sell-section, :where(body.page-buy) .faq-section, :where(body.page-buy) .steps-section, :where(body.page-buy) .compare-section {
background:#f7f9fc!important;
color:#172033!important
}
:where(body.page-buy) .section:nth-of-type(even), :where(body.page-buy) .section-alt, :where(body.page-buy) .compare-section, :where(body.page-buy) .steps-section {
background:#fff!important
}
:where(body.page-buy) .section-title, :where(body.page-buy) .section-header h2, :where(body.page-buy) .section h2 {
color:#172033!important
}
:where(body.page-buy) .section-description, :where(body.page-buy) .section-desc, :where(body.page-buy) .section-header p {
color:#667085!important
}
:where(body.page-buy) .section-tag, :where(body.page-buy) .section-eyebrow {
background:rgba(56, 189, 248, .10)!important;
color:#0284c7!important;
border-color:rgba(56, 189, 248, .18)!important
}
:where(body.page-buy) .card, :where(body.page-buy) .step-card, :where(body.page-buy) .why-card, :where(body.page-buy) .feature-card, :where(body.page-buy) .comparison-card, :where(body.page-buy) .faq-item, :where(body.page-buy) .article-card, :where(body.page-buy) .sidebar-widget, :where(body.page-buy) .service-card, :where(body.page-buy) .sell-tool, :where(body.page-buy) .rental-widget {
background:#fff!important;
color:#172033!important;
border-color:#e4e7ec!important;
box-shadow:0 8px 28px rgba(16, 24, 40, .07)!important
}
:where(body.page-buy) .step-card h3, :where(body.page-buy) .why-card h3, :where(body.page-buy) .why-title, :where(body.page-buy) .feature-card h3, :where(body.page-buy) .card h3, :where(body.page-buy) .article-card h3, :where(body.page-buy) .service-card h3 {
color:#172033!important
}
:where(body.page-buy) .step-card p, :where(body.page-buy) .why-card p, :where(body.page-buy) .why-desc, :where(body.page-buy) .feature-card p, :where(body.page-buy) .card p, :where(body.page-buy) .article-card p, :where(body.page-buy) .service-card p, :where(body.page-buy) .faq-answer p {
color:#667085!important
}
:where(body.page-buy) .form-input, :where(body.page-buy) .input-box input, :where(body.page-buy) .sell-tool input, :where(body.page-buy) .rental-widget input, :where(body.page-buy) .rental-widget select {
background:#fff!important;
color:#172033!important;
border-color:#d0d5dd!important
}
:where(body.page-buy) .footer {
background:#0f172a!important;
color:#fff!important;
border-top-color:rgba(255, 255, 255, .08)!important
}
:where(body.page-buy) .footer a, :where(body.page-buy) .footer-links a, :where(body.page-buy) .footer-col a {
color:#cbd5e1!important
}
:where(body.page-buy) .footer a:hover, :where(body.page-buy) .footer-links a:hover, :where(body.page-buy) .footer-col a:hover {
color:#38bdf8!important
}
:where(body.page-buy) .breadcrumb {
color:#667085!important
}
:where(body.page-buy) .breadcrumb a {
color:#667085!important
}
.page-buy .hero-section {
	position: relative;
	overflow: hidden;
}
.page-buy .hero-section::before {
 content: "";
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: radial-gradient(circle at 30% 70%, rgba(255, 107, 0, 0.08) 0%, transparent 50%),  radial-gradient(circle at 70% 30%, rgba(255, 149, 0, 0.06) 0%, transparent 50%);
 animation: page-buy-pulse 15s ease-in-out infinite;
}
@keyframes page-buy-pulse {
 0%, 100% {
transform: scale(1);
}
 50% {
transform: scale(1.1);
}
}
.page-buy .hero-container {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.page-buy .hero-left {
	max-width: 600px;
}
.page-buy .hero-badge {
	display: inline-block;
	background: rgba(255, 107, 0, 0.15);
	border: 1px solid rgba(255, 107, 0, 0.3);
	color: var(--primary);
	padding: 8px 20px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 24px;
}
.page-buy .hero-left h1 {
	font-size: clamp(36px, 4.5vw, 56px);
	font-weight: 900;
	line-height: 1.15;
	margin-bottom: 20px;
	letter-spacing: -0.02em;
}
.page-buy .hero-left h1 .highlight {
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.page-buy .hero-description {
	font-size: 19px;
	color: var(--text-secondary);
	margin-bottom: 32px;
	line-height: 1.7;
}
.page-buy .hero-trust-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 36px;
}
.page-buy .hero-trust-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text-secondary);
	font-size: 15px;
}
.page-buy .hero-trust-list li svg {
	width: 20px;
	height: 20px;
	fill: var(--success);
	flex-shrink: 0;
}
.page-buy .hero-cta-group {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.page-buy .btn-primary {
	background: var(--gradient-primary);
	color: #fff;
	border: none;
	padding: 16px 40px;
	border-radius: var(--border-radius-sm);
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition: var(--transition);
	text-decoration: none;
	display: inline-block;
}
.page-buy .btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-glow);
}
.page-buy .btn-outline {
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-primary);
	border: 1px solid rgba(255, 255, 255, 0.15);
	padding: 16px 36px;
	border-radius: var(--border-radius-sm);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
	text-decoration: none;
	display: inline-block;
}
.page-buy .btn-outline:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.3);
}
.page-buy .buy-widget {
	background: var(--gradient-card);
	border: 1px solid rgba(255, 107, 0, 0.2);
	border-radius: var(--border-radius);
	padding: 36px 32px;
	box-shadow: var(--shadow-card);
	position: relative;
}
.page-buy .widget-header {
	text-align: center;
	margin-bottom: 28px;
}
.page-buy .widget-header h3 {
	font-size: 22px;
	font-weight: 800;
	margin-bottom: 6px;
   color: #0284c7;
}
.page-buy .widget-header p {
	font-size: 14px;
	color: var(--text-muted);
}
.page-buy .widget-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.page-buy .form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.page-buy .form-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-secondary);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.page-buy .form-label .balance {
	font-size: 12px;
	color: var(--text-muted);
}
.page-buy .form-input-wrapper {
	position: relative;
}
.page-buy .form-input {
	width: 100%;
	background: var(--bg-input);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--border-radius-sm);
	padding: 14px 16px;
	font-size: 16px;
	color: var(--text-primary);
	transition: var(--transition);
	font-family: inherit;
}
.page-buy .form-input:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}
.page-buy .form-input::placeholder {
 color: var(--text-muted);
}
.page-buy .input-suffix {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: var(--text-muted);
	font-weight: 600;
}
.page-buy .quick-amounts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.page-buy .quick-amount-btn {
	background: rgba(255, 107, 0, 0.08);
	border: 1px solid rgba(255, 107, 0, 0.2);
	color: var(--primary);
	padding: 10px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
	text-align: center;
}
.page-buy .quick-amount-btn:hover {
	background: rgba(255, 107, 0, 0.15);
	border-color: var(--primary);
}
.page-buy .widget-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
	margin: 4px 0;
}
.page-buy .price-summary {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.page-buy .price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}
.page-buy .price-row .label {
	color: var(--text-muted);
}
.page-buy .price-row .value {
	color: var(--text-primary);
	font-weight: 600;
}
.page-buy .price-row.highlight-row {
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	margin: 4px 0;
}
.page-buy .price-row.highlight-row .label {
	font-size: 16px;
	color: var(--text-secondary);
	font-weight: 600;
}
.page-buy .price-row.highlight-row .value {
	font-size: 20px;
	color: var(--primary);
	font-weight: 800;
}
.page-buy .save-badge {
	display: inline-block;
	background: rgba(0, 200, 83, 0.12);
	color: var(--success);
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
}
.page-buy .widget-btn {
	width: 100%;
	background: var(--gradient-primary);
	color: #fff;
	border: none;
	padding: 16px;
	border-radius: var(--border-radius-sm);
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition: var(--transition);
	margin-top: 8px;
}
.page-buy .widget-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-glow);
}
.page-buy .widget-btn.connect {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: var(--gradient-red);
}
.page-buy .widget-  .widget-footer a {
	color: var(--primary);
	text-decoration: none;
}
.page-buy .stats-bar {
	background: var(--bg-card);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	padding: 28px 20px;
}
.page-buy .stats-container {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	text-align: center;
}
.page-buy .stat-item .stat-number {
	font-size: 34px;
	font-weight: 800;
	color: var(--primary);
	display: block;
}
.page-buy .stat-item .stat-label {
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 4px;
}
.page-buy .section {
	padding: 100px 20px;
	max-width: 1280px;
	margin: 0 auto;
}
.page-buy .section-header {
	text-align: center;
	margin-bottom: 60px;
}
.page-buy .section-tag {
	display: inline-block;
	background: rgba(255, 107, 0, 0.1);
	color: var(--primary);
	padding: 6px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 16px;
}
.page-buy .section-title {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	margin-bottom: 16px;
	line-height: 1.3;
}
.page-buy .section-description {
	font-size: 18px;
	color: var(--text-secondary);
	max-width: 650px;
	margin: 0 auto;
	line-height: 1.7;
}
.page-buy .steps-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	position: relative;
}
.page-buy .step-card {
	background: var(--bg-card);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: var(--border-radius);
	padding: 36px 28px;
	text-align: center;
	transition: var(--transition);
	position: relative;
}
.page-buy .step-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-card);
	border-color: rgba(255, 107, 0, 0.3);
}
.page-buy .step-number {
	width: 60px;
	height: 60px;
	background: var(--gradient-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	margin: 0 auto 20px;
	box-shadow: var(--shadow-glow);
}
.page-buy .step-card h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
}
.page-buy .step-card p {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.6;
}
.page-buy .step-arrow {
	position: absolute;
	top: 50%;
	right: -18px;
	transform: translateY(-50%);
	color: var(--primary);
	font-size: 24px;
	z-index: 2;
}
.page-buy .why-buy-section {
	background: linear-gradient(180deg, var(--bg-dark) 0%, rgba(26, 26, 46, 0.5) 50%, var(--bg-dark) 100%);
}
.page-buy .features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.page-buy .feature-card {
	background: var(--bg-card);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: var(--border-radius);
	padding: 36px 32px;
	transition: var(--transition);
}
.page-buy .feature-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-card);
	border-color: rgba(255, 107, 0, 0.3);
}
.page-buy .feature-icon {
	width: 56px;
	height: 56px;
	background: rgba(255, 107, 0, 0.1);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: 20px;
}
.page-buy .feature-card h3 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 12px;
}
.page-buy .feature-card p {
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.7;
}
.page-buy .feature-highlight {
	margin-top: 16px;
	padding: 10px 14px;
	background: rgba(0, 200, 83, 0.08);
	border-left: 3px solid var(--success);
	border-radius: 6px;
	font-size: 13px;
	color: var(--success);
	font-weight: 600;
}
.page-buy .comparison-section {
	background: var(--bg-card);
	border-radius: 24px;
	padding: 60px 40px;
}
.page-buy .comparison-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 40px;
}
.page-buy .comparison-table thead th {
	padding: 18px 20px;
	font-size: 16px;
	font-weight: 800;
	text-align: center;
	border-bottom: 2px solid rgba(255, 107, 0, 0.3);
}
.page-buy .comparison-table thead th:first-child {
	text-align: left;
	color: var(--text-muted);
	font-size: 14px;
	font-weight: 600;
}
.page-buy .comparison-table thead th.buy-col {
	color: var(--primary);
}
.page-buy .comparison-table thead th.sell-col {
	color: var(--accent);
}
.page-buy .comparison-table thead th.rent-col {
	color: var(--success);
}
.page-buy .comparison-table tbody td {
	padding: 16px 20px;
	font-size: 14px;
	color: var(--text-secondary);
	text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.page-buy .comparison-table tbody td:first-child {
	text-align: left;
	font-weight: 600;
	color: var(--text-primary);
}
.page-buy .comparison-table tbody tr:hover td {
	background: rgba(255, 255, 255, 0.02);
}
.page-buy .check {
	color: var(--success);
	font-weight: 700;
	font-size: 16px;
}
.page-buy .cross {
	color: var(--danger);
	font-size: 16px;
}
.page-buy .partial {
	color: var(--warning);
	font-weight: 600;
}
.page-buy .best-tag {
	display: inline-block;
	background: rgba(0, 200, 83, 0.15);
	color: var(--success);
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 4px;
}
.page-buy .comparison-cards {
	display: none;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}
.page-buy .comparison-card {
	background: var(--bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--border-radius);
	padding: 28px 24px;
	text-align: center;
}
.page-buy .comparison-card.buy-card {
	border-color: rgba(255, 107, 0, 0.3);
}
.page-buy .comparison-card.sell-card {
	border-color: rgba(255, 215, 0, 0.2);
}
.page-buy .comparison-card.rent-card {
	border-color: rgba(0, 200, 83, 0.3);
}
.page-buy .comparison-card h4 {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 6px;
}
.page-buy .buy-card h4 {
	color: var(--primary);
}
.page-buy .sell-card h4 {
	color: var(--accent);
}
.page-buy .rent-card h4 {
	color: var(--success);
}
.page-buy .comparison-card .card-subtitle {
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 20px;
}
.page-buy .comparison-card ul {
	list-style: none;
	text-align: left;
}
.page-buy .comparison-card ul li {
	padding: 8px 0;
	font-size: 13px;
	color: var(--text-secondary);
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.page-buy .comparison-card ul li:last-child {
	border-bottom: none;
}
.page-buy .comparison-card ul li::before {
 margin-right: 8px;
}
.page-buy .buy-card ul li::before {
content: "+";
}
.page-buy .sell-card ul li::before {
content: "+";
}
.page-buy .rent-card ul li::before {
content: "+";
}
.page-buy .faq-section {
	background: var(--bg-dark);
}
.page-buy .faq-container {
	max-width: 800px;
	margin: 0 auto;
}
.page-buy .faq-item {
	background: var(--bg-card);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	margin-bottom: 16px;
	overflow: hidden;
}
.page-buy .faq-question {
	padding: 20px 24px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 17px;
	font-weight: 600;
	user-select: none;
	transition: background 0.3s;
}
.page-buy .faq-question:hover {
	background: rgba(255, 255, 255, 0.02);
}
.page-buy .faq-toggle {
	font-size: 24px;
	color: var(--primary);
	transition: transform 0.3s;
	flex-shrink: 0;
	margin-left: 16px;
}
.page-buy .faq-answer {
	padding: 0 24px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}
.page-buy .faq-item.active .faq-answer {
	padding: 0 24px 20px;
	max-height: 500px;
}
.page-buy .faq-item.active .faq-toggle {
	transform: rotate(45deg);
}
.page-buy .faq-answer p {
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.7;
}
.page-buy .cta-section {
	text-align: center;
	padding: 100px 20px;
	background: var(--gradient-dark);
	position: relative;
	overflow: hidden;
}
.page-buy .cta-section::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 600px;
 height: 600px;
 background: radial-gradient(circle, rgba(255, 107, 0, 0.12) 0%, transparent 70%);
}
.page-buy .cta-content {
	position: relative;
	z-index: 1;
	max-width: 700px;
	margin: 0 auto;
}
.page-buy .cta-content h2 {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	margin-bottom: 20px;
}
.page-buy .cta-content p {
	font-size: 18px;
	color: var(--text-secondary);
	margin-bottom: 40px;
}
.page-buy .footer {
	background: var(--bg-card);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding: 60px 20px 30px;
}
.page-buy .footer-container {
	max-width: 1280px;
	margin: 0 auto;
}
.page-buy .footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}
.page-buy .footer-brand h3 {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 12px;
}
.page-buy .footer-brand p {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.7;
}
.page-buy .footer-column h4 {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 16px;
	color: var(--text-primary);
}
.page-buy .footer-column ul {
	list-style: none;
}
.page-buy .footer-column ul li {
	margin-bottom: 10px;
}
.page-buy .footer-column ul li a {
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s;
}
.page-buy .footer-column ul li a:hover {
	color: var(--primary);
}
.page-buy .footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding-top: 24px;
	text-align: center;
	color: var(--text-muted);
	font-size: 13px;
}
.page-buy .footer-bottom a {
	color: var(--text-muted);
	text-decoration: none;
}
.page-buy .footer-bottom a:hover {
	color: var(--primary);
}
@media (max-width: 1024px) {
.page-buy .hero-container {
 grid-template-columns: 1fr;
 gap: 50px;
}
.page-buy .hero-left {
 max-width: 100%;
 text-align: center;
}
.page-buy .hero-trust-list {
 align-items: center;
}
.page-buy .hero-cta-group {
 justify-content: center;
}
.page-buy .buy-widget {
 max-width: 500px;
 margin: 0 auto;
}
.page-buy .step-arrow {
 display: none;
}
}
@media (max-width: 768px) {
.page-buy .features-grid {
 grid-template-columns: repeat(2, 1fr);
}
.page-buy .steps-container {
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
}
.page-buy .stats-container {
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
}
.page-buy .footer-grid {
 grid-template-columns: repeat(2, 1fr);
}
.page-buy .comparison-table {
 display: none;
}
.page-buy .comparison-cards {
 display: grid;
}
.page-buy .comparison-section {
 padding: 40px 20px;
}
}
@media (max-width: 640px) {
.page-buy .features-grid {
 grid-template-columns: 1fr;
}
.page-buy .steps-container {
 grid-template-columns: 1fr;
}
.page-buy .hero-section {
 padding: 120px 16px 60px;
}
.page-buy .section {
 padding: 60px 16px;
}
.page-buy .comparison-cards {
 grid-template-columns: 1fr;
}
.page-buy .quick-amounts {
 grid-template-columns: repeat(3, 1fr);
}
}
@keyframes page-buy-fadeInUp {
 from {
 opacity: 0;
 transform: translateY(30px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}
.page-buy .fade-in-up {
	animation: page-buy-fadeInUp 0.6s ease forwards;
}
.page-buy .loading {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: page-buy-spin 1s ease-in-out infinite;
}
@keyframes page-buy-spin {
 to {
transform: rotate(360deg);
}
}
body.page-buy {
 --accent:#38bdf8;
 --bg-input:#fff;
 --border-radius:16px;
 --border-radius-sm:10px;
 --success:#059669;
 --danger:#dc2626;
 --warning:#d97706;
 --gradient-card:linear-gradient(145deg, #fff 0%, #f8fafc 100%);
 --shadow-glow:0 0 28px rgba(56, 189, 248, .18);
 --shadow-card:0 8px 28px rgba(16, 24, 40, .07);
 --transition:all .3s ease;
}
:where(body.page-buy) .navbar {
position:sticky;
top:0;
z-index:2000;
background:rgba(15, 23, 42, .97);
color:#fff;
border-bottom:1px solid rgba(255, 255, 255, .08);
box-shadow:0 2px 12px rgba(15, 23, 42, .08);
backdrop-filter:blur(12px)
}
:where(body.page-buy) .navbar-inner {
width:min(1180px, calc(100% - 40px));
min-height:72px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:28px
}
:where(body.page-buy) .navbar .site-logo {
font-size:21px;
font-weight:800;
letter-spacing:-.4px;
color:#fff!important;
text-decoration:none!important;
white-space:nowrap
}
:where(body.page-buy) .navbar .site-logo span {
color: #fff;
}
:where(body.page-buy) .navbar .nav-links {
display:flex;
align-items:center;
justify-content:flex-end;
gap:24px;
overflow-x:auto;
white-space:nowrap;
scrollbar-width:none
}
:where(body.page-buy) .navbar .nav-links::-webkit-scrollbar {
display:none
}
:where(body.page-buy) .navbar .nav-links a {
color:#dbe5f2!important;
text-decoration:none!important;
font-size:14px;
font-weight:600;
padding:8px 0;
transition:color .2s, transform .2s
}
:where(body.page-buy) .navbar .nav-links a:hover, :where(body.page-buy) .navbar .nav-links a.active {
color:#38bdf8!important
}
:where(body.page-buy) .navbar .nav-links a.active {
font-weight:800
}
@media (max-width:900px) {
:where(body.page-buy) .navbar-inner {
width:min(100% - 24px, 1180px);
gap:14px
}
:where(body.page-buy) .navbar .nav-links {
gap:16px
}
:where(body.page-buy) .navbar .site-logo {
font-size:18px
}
:where(body.page-buy) .navbar .nav-links a {
font-size:13px
}
}
@media (max-width:650px) {
:where(body.page-buy) .navbar-inner {
display:block;
padding:10px 0
}
:where(body.page-buy) .navbar .site-logo {
display:block;
margin-bottom:7px
}
:where(body.page-buy) .navbar .nav-links {
justify-content:flex-start;
gap:18px;
padding-bottom:2px
}
}
/* ===== CONTACT PAGE ===== */
body.page-contact {
 --primary-color: #0284c7;
 --primary-dark: #0369a1;
 --secondary-color: #172033;
 --accent-color: #38bdf8;
 --text-primary: #172033;
 --text-secondary: #667085;
 --text-light: #98a2b3;
 --bg-white: #ffffff;
 --bg-light: #f7f9fc;
 --bg-dark: #0f172a;
 --border-color: #e4e7ec;
 --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08);
 --shadow-md: 0 4px 12px rgba(16, 24, 40, .10);
 --shadow-lg: 0 8px 30px rgba(16, 24, 40, .12);
 --radius-sm: 6px;
 --radius-md: 12px;
 --radius-lg: 20px;
 --transition: all .3s ease;
}
:where(body.page-contact) .hero {
 padding: 80px 0 60px;
 background: linear-gradient(135deg, #0F0F23 0%, #1A1A2E 50%, #16213E 100%);
 color: white;
 text-align: center;
 position: relative;
 overflow: hidden;
}
:where(body.page-contact) .hero::before {
 content: "";
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: radial-gradient(circle at 30% 70%, rgba(255, 77, 77, 0.1) 0%, transparent 50%),  radial-gradient(circle at 70% 30%, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
 animation: page-contact-pulse 15s ease-in-out infinite;
}
@keyframes page-contact-pulse {
 0%, 100% {
transform: scale(1);
}
 50% {
transform: scale(1.1);
}
}
:where(body.page-contact) .hero .container {
 position: relative;
 z-index: 1;
}
:where(body.page-contact) .hero h1 {
 color: white;
 margin-bottom: 20px;
 animation: page-contact-fadeInUp 0.8s ease;
}
:where(body.page-contact) .hero h1 .highlight {
 color: var(--accent-color);
}
:where(body.page-contact) .hero p {
 font-size: 1.2rem;
 color: rgba(255, 255, 255, 0.85);
 max-width: 800px;
 margin: 0 auto 30px;
 animation: page-contact-fadeInUp 0.8s ease 0.2s both;
}
:where(body.page-contact) .hero-badge {
 display: inline-block;
 background: rgba(255, 77, 77, 0.2);
 border: 1px solid rgba(255, 77, 77, 0.4);
 padding: 8px 20px;
 border-radius: 50px;
 font-size: 0.9rem;
 color: var(--accent-color);
 margin-bottom: 20px;
 animation: page-contact-fadeInUp 0.8s ease 0.1s both;
}
@keyframes page-contact-fadeInUp {
 from {
opacity: 0;
transform: translateY(30px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}
:where(body.page-contact) .quick-contact {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 20px;
 margin-top: 40px;
 animation: page-contact-fadeInUp 0.8s ease 0.3s both;
}
:where(body.page-contact) .quick-contact-item {
 background: rgba(255, 255, 255, 0.08);
 backdrop-filter: blur(10px);
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: var(--radius-md);
 padding: 20px;
 text-align: center;
 transition: var(--transition);
}
:where(body.page-contact) .quick-contact-item:hover {
 background: rgba(255, 255, 255, 0.12);
 transform: translateY(-3px);
}
:where(body.page-contact) .quick-contact-item .icon {
 font-size: 2rem;
 margin-bottom: 10px;
}
:where(body.page-contact) .quick-contact-item h4 {
 color: white;
 font-size: 1rem;
 margin-bottom: 5px;
}
:where(body.page-contact) .quick-contact-item a, :where(body.page-contact) .quick-contact-item span {
 color: rgba(255, 255, 255, 0.8);
 font-size: 0.9rem;
}
:where(body.page-contact) .section {
 padding: 40px 0;
}
:where(body.page-contact) .section-header {
 text-align: center;
 margin-bottom: 50px;
}
:where(body.page-contact) .section-header h2 {
 margin-bottom: 15px;
}
:where(body.page-contact) .section-header p {
 color: var(--text-light);
 max-width: 700px;
 margin: 0 auto;
 font-size: 1.1rem;
}
:where(body.page-contact) .section-alt {
 background: var(--bg-light);
}
:where(body.page-contact) .services-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 30px;
}
:where(body.page-contact) .service-card {
 background: var(--bg-white);
 border-radius: var(--radius-md);
 padding: 35px 30px;
 box-shadow: var(--shadow-sm);
 border: 1px solid var(--border-color);
 transition: var(--transition);
 text-align: left;
}
:where(body.page-contact) .service-card:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-lg);
 border-color: var(--primary-color);
}
:where(body.page-contact) .service-card .service-icon {
 width: 60px;
 height: 60px;
 background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 border-radius: var(--radius-sm);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.5rem;
 color: white;
 margin-bottom: 20px;
}
:where(body.page-contact) .service-card h3 {
 margin-bottom: 12px;
 font-size: 1.3rem;
}
:where(body.page-contact) .service-card p {
 color: var(--text-light);
 font-size: 0.95rem;
 margin-bottom: 15px;
}
:where(body.page-contact) .service-card ul {
 list-style: none;
 padding: 0;
}
:where(body.page-contact) .service-card ul li {
 padding: 5px 0;
 color: var(--text-secondary);
 font-size: 0.9rem;
 padding-left: 20px;
 position: relative;
}
:where(body.page-contact) .service-card ul li::before {
 content: "+";
 position: absolute;
 left: 0;
 color: var(--primary-color);
 font-weight: bold;
}
:where(body.page-contact) .contact-wrapper {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 50px;
 align-items: start;
}
:where(body.page-contact) .contact-info h3 {
 margin-bottom: 20px;
}
:where(body.page-contact) .contact-info p {
 color: var(--text-light);
 margin-bottom: 25px;
}
:where(body.page-contact) .contact-details {
 list-style: none;
 padding: 0;
}
:where(body.page-contact) .contact-details li {
 display: flex;
 align-items: flex-start;
 gap: 15px;
 margin-bottom: 20px;
 padding: 15px;
 background: var(--bg-light);
 border-radius: var(--radius-sm);
 transition: var(--transition);
}
:where(body.page-contact) .contact-details li:hover {
 background: #FFF3F3;
}
:where(body.page-contact) .contact-details .detail-icon {
 font-size: 1.3rem;
 color: var(--primary-color);
 min-width: 30px;
}
:where(body.page-contact) .contact-details .detail-content h4 {
 font-size: 0.95rem;
 margin-bottom: 3px;
}
:where(body.page-contact) .contact-details .detail-content span, :where(body.page-contact) .contact-details .detail-content a {
 font-size: 0.9rem;
 color: var(--text-light);
}
:where(body.page-contact) .contact-form {
 background: var(--bg-white);
 padding: 40px;
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-md);
 border: 1px solid var(--border-color);
}
:where(body.page-contact) .contact-form h3 {
 margin-bottom: 25px;
}
:where(body.page-contact) .form-group {
 margin-bottom: 20px;
}
:where(body.page-contact) .form-group label {
 display: block;
 font-weight: 600;
 margin-bottom: 8px;
 color: var(--text-primary);
 font-size: 0.9rem;
}
:where(body.page-contact) .form-group input, :where(body.page-contact) .form-group select, :where(body.page-contact) .form-group textarea {
 width: 100%;
 padding: 12px 16px;
 border: 1px solid var(--border-color);
 border-radius: var(--radius-sm);
 font-size: 1rem;
 font-family: inherit;
 transition: var(--transition);
 background: var(--bg-white);
}
:where(body.page-contact) .form-group input:focus, :where(body.page-contact) .form-group select:focus, :where(body.page-contact) .form-group textarea:focus {
 outline: none;
 border-color: var(--primary-color);
 box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.1);
}
:where(body.page-contact) .form-group textarea {
 resize: vertical;
 min-height: 120px;
}
:where(body.page-contact) .form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 15px;
}
:where(body.page-contact) .btn-submit {
 width: 100%;
 background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 color: white;
 padding: 14px 30px;
 border-radius: var(--radius-sm);
 font-weight: 600;
 font-size: 1rem;
 border: none;
 cursor: pointer;
 transition: var(--transition);
}
:where(body.page-contact) .btn-submit:hover {
 transform: translateY(-2px);
 box-shadow: var(--shadow-md);
}
:where(body.page-contact) .features-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 30px;
}
:where(body.page-contact) .feature-item {
 text-align: center;
 padding: 30px 20px;
}
:where(body.page-contact) .feature-item .feature-icon {
 width: 70px;
 height: 70px;
 background: linear-gradient(135deg, #FFF3F3, #FFE8E8);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.8rem;
 margin: 0 auto 20px;
}
:where(body.page-contact) .feature-item h3 {
 font-size: 1.2rem;
 margin-bottom: 12px;
}
:where(body.page-contact) .feature-item p {
 color: var(--text-light);
 font-size: 0.95rem;
}
:where(body.page-contact) .faq-list {
 max-width: 800px;
 margin: 0 auto;
}
:where(body.page-contact) .faq-item {
 background: var(--bg-white);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-sm);
 margin-bottom: 15px;
 overflow: hidden;
 transition: var(--transition);
}
:where(body.page-contact) .faq-item:hover {
 box-shadow: var(--shadow-sm);
}
:where(body.page-contact) .faq-question {
 padding: 20px 25px;
 cursor: pointer;
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-weight: 600;
 color: var(--text-primary);
 user-select: none;
}
:where(body.page-contact) .faq-question .toggle {
 font-size: 1.5rem;
 color: var(--primary-color);
 transition: var(--transition);
}
:where(body.page-contact) .faq-answer {
 padding: 0 25px;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.4s ease, padding 0.4s ease;
 color: var(--text-light);
 font-size: 0.95rem;
}
:where(body.page-contact) .faq-item.active .faq-answer {
 padding: 0 25px 20px;
 max-height: 500px;
}
:where(body.page-contact) .faq-item.active .toggle {
 transform: rotate(45deg);
}
:where(body.page-contact) .cta-section {
 background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 color: white;
 text-align: center;
 padding: 70px 0;
}
:where(body.page-contact) .cta-section h2 {
 color: white;
 margin-bottom: 15px;
}
:where(body.page-contact) .cta-section p {
 font-size: 1.1rem;
 opacity: 0.9;
 max-width: 600px;
 margin: 0 auto 30px;
}
:where(body.page-contact) .cta-buttons {
 display: flex;
 gap: 20px;
 justify-content: center;
 flex-wrap: wrap;
}
:where(body.page-contact) .btn-white {
 background: white;
 color: var(--primary-color);
 padding: 14px 35px;
 border-radius: var(--radius-sm);
 font-weight: 600;
 border: none;
 cursor: pointer;
 transition: var(--transition);
}
:where(body.page-contact) .btn-white:hover {
 transform: translateY(-2px);
 box-shadow: var(--shadow-md);
 color: var(--primary-dark);
}
:where(body.page-contact) .btn-outline-white {
 background: transparent;
 color: white;
 padding: 14px 35px;
 border-radius: var(--radius-sm);
 font-weight: 600;
 border: 2px solid white;
 cursor: pointer;
 transition: var(--transition);
}
:where(body.page-contact) .btn-outline-white:hover {
 background: white;
 color: var(--primary-color);
}
:where(body.page-contact) .footer {
 background: var(--bg-dark);
 color: rgba(255, 255, 255, 0.7);
 padding: 60px 0 30px;
}
:where(body.page-contact) .footer-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 40px;
 margin-bottom: 40px;
}
:where(body.page-contact) .footer-col h4 {
 color: white;
 font-size: 1.1rem;
 margin-bottom: 20px;
}
:where(body.page-contact) .footer-col ul {
 list-style: none;
 padding: 0;
}
:where(body.page-contact) .footer-col ul li {
 margin-bottom: 10px;
}
:where(body.page-contact) .footer-col ul li a {
 color: rgba(255, 255, 255, 0.6);
 font-size: 0.9rem;
}
:where(body.page-contact) .footer-col ul li a:hover {
 color: var(--accent-color);
}
:where(body.page-contact) .footer-bottom {
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 padding-top: 25px;
 text-align: center;
 font-size: 0.85rem;
 color: rgba(255, 255, 255, 0.5);
}
:where(body.page-contact) .footer-bottom a {
 color: rgba(255, 255, 255, 0.6);
}
:where(body.page-contact) .trust-badges {
 display: flex;
 justify-content: center;
 gap: 40px;
 flex-wrap: wrap;
 margin-top: 30px;
}
:where(body.page-contact) .trust-badge {
 display: flex;
 align-items: center;
 gap: 8px;
 color: rgba(255, 255, 255, 0.8);
 font-size: 0.9rem;
}
:where(body.page-contact) .trust-badge .badge-icon {
 color: var(--accent-color);
 font-size: 1.2rem;
}
@media (max-width: 768px) {
:where(body.page-contact) .nav-links {
display: none;
}
:where(body.page-contact) .contact-wrapper {
grid-template-columns: 1fr;
}
:where(body.page-contact) .form-row {
grid-template-columns: 1fr;
}
:where(body.page-contact) .hero {
padding: 60px 0 40px;
}
:where(body.page-contact) .section {
padding: 50px 0;
}
:where(body.page-contact) .quick-contact {
grid-template-columns: 1fr;
}
:where(body.page-contact) .cta-buttons {
flex-direction: column;
align-items: center;
}
}
:where(body.page-contact) .toc {
 background: var(--bg-light);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 25px 30px;
 margin: 40px 0;
}
:where(body.page-contact) .toc h3 {
 margin-bottom: 15px;
 font-size: 1.1rem;
}
:where(body.page-contact) .toc ol {
 padding-left: 20px;
}
:where(body.page-contact) .toc ol li {
 margin-bottom: 8px;
}
:where(body.page-contact) .toc ol li a {
 color: var(--text-secondary);
 font-size: 0.95rem;
}
:where(body.page-contact) .toc ol li a:hover {
 color: var(--primary-color);
}
:where(body.page-contact) .stats-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 30px;
 margin-top: 40px;
}
:where(body.page-contact) .stat-item {
 text-align: center;
 padding: 25px;
}
:where(body.page-contact) .stat-number {
 font-size: 2.5rem;
 font-weight: 800;
 color: var(--primary-color);
 display: block;
 margin-bottom: 5px;
}
:where(body.page-contact) .stat-label {
 color: var(--text-light);
 font-size: 0.95rem;
}

/* ===== RENT PAGE ===== */
:where(body.page-rent) .hero, :where(body.page-rent) .hero-section {
background:radial-gradient(circle at 15% 30%, rgba(14, 165, 233, .15), transparent 35%), linear-gradient(135deg, #07111f 0%, #0f172a 55%, #111c38 100%)!important;
color:#fff!important
}
:where(body.page-rent) .section, :where(body.page-rent) .resource-section, :where(body.page-rent) .why-buy-section, :where(body.page-rent) .why-sell-section, :where(body.page-rent) .faq-section, :where(body.page-rent) .steps-section, :where(body.page-rent) .compare-section {
background:#f7f9fc!important;
color:#172033!important
}
:where(body.page-rent) .section:nth-of-type(even), :where(body.page-rent) .section-alt, :where(body.page-rent) .compare-section, :where(body.page-rent) .steps-section {
background:#fff!important
}
:where(body.page-rent) .section-title, :where(body.page-rent) .section-header h2, :where(body.page-rent) .section h2 {
color:#172033!important
}
:where(body.page-rent) .section-description, :where(body.page-rent) .section-desc, :where(body.page-rent) .section-header p {
color:#667085!important
}
:where(body.page-rent) .section-tag, :where(body.page-rent) .section-eyebrow {
background:rgba(56, 189, 248, .10)!important;
color:#0284c7!important;
border-color:rgba(56, 189, 248, .18)!important
}
:where(body.page-rent) .card, :where(body.page-rent) .step-card, :where(body.page-rent) .why-card, :where(body.page-rent) .feature-card, :where(body.page-rent) .comparison-card, :where(body.page-rent) .faq-item, :where(body.page-rent) .article-card, :where(body.page-rent) .sidebar-widget, :where(body.page-rent) .service-card, :where(body.page-rent) .sell-tool, :where(body.page-rent) .rental-widget {
background:#fff!important;
color:#172033!important;
border-color:#e4e7ec!important;
box-shadow:0 8px 28px rgba(16, 24, 40, .07)!important
}
:where(body.page-rent) .step-card h3, :where(body.page-rent) .why-card h3, :where(body.page-rent) .why-title, :where(body.page-rent) .feature-card h3, :where(body.page-rent) .card h3, :where(body.page-rent) .article-card h3, :where(body.page-rent) .service-card h3 {
color:#172033!important
}
:where(body.page-rent) .step-card p, :where(body.page-rent) .why-card p, :where(body.page-rent) .why-desc, :where(body.page-rent) .feature-card p, :where(body.page-rent) .card p, :where(body.page-rent) .article-card p, :where(body.page-rent) .service-card p, :where(body.page-rent) .faq-answer p {
color:#667085!important
}
:where(body.page-rent) .form-input, :where(body.page-rent) .input-box input, :where(body.page-rent) .sell-tool input, :where(body.page-rent) .rental-widget input, :where(body.page-rent) .rental-widget select {
background:#fff!important;
color:#172033!important;
border-color:#d0d5dd!important
}
:where(body.page-rent) .footer {
background:#0f172a!important;
color:#fff!important;
border-top-color:rgba(255, 255, 255, .08)!important
}
:where(body.page-rent) .footer a, :where(body.page-rent) .footer-links a, :where(body.page-rent) .footer-col a {
color:#cbd5e1!important
}
:where(body.page-rent) .footer a:hover, :where(body.page-rent) .footer-links a:hover, :where(body.page-rent) .footer-col a:hover {
color:#38bdf8!important
}
:where(body.page-rent) .breadcrumb {
color:#667085!important
}
:where(body.page-rent) .breadcrumb a {
color:#667085!important
}
body.page-rent {
 --primary: #0284c7;
 --primary-dark: #0369a1;
 --secondary: #38bdf8;
 --bg-dark: #f7f9fc;
 --bg-card: #ffffff;
 --bg-card-hover: #f8fafc;
 --text-main: #172033;
 --text-muted: #667085;
 --text-light: #475467;
 --border: #e4e7ec;
 --success: #059669;
 --gradient-1: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
 --gradient-2: linear-gradient(135deg, #07111f 0%, #0f172a 55%, #111c38 100%);
 --shadow-glow: 0 0 40px rgba(2, 132, 199, .12);
 --shadow-card: 0 8px 32px rgba(16, 24, 40, .08);
}
:where(body.page-rent) .hero {
 position: relative;
 overflow: hidden;
}
:where(body.page-rent) .hero::before {
 content: "";
 position: absolute;
 top: -200px;
 right: -200px;
 width: 600px;
 height: 600px;
 background: radial-gradient(circle, rgba(255, 59, 59, 0.08) 0%, transparent 70%);
 border-radius: 50%;
}
:where(body.page-rent) .hero::after {
 content: "";
 position: absolute;
 bottom: -200px;
 left: -200px;
 width: 500px;
 height: 500px;
 background: radial-gradient(circle, rgba(255, 140, 0, 0.06) 0%, transparent 70%);
 border-radius: 50%;
}
:where(body.page-rent) .hero-inner {
 max-width: 1200px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr 420px;
 gap: 60px;
 align-items: center;
 position: relative;
 z-index: 1;
}
:where(body.page-rent) .hero-content h1 {
 font-size: 48px;
 font-weight: 900;
 line-height: 1.15;
 margin-bottom: 20px;
 letter-spacing: -0.5px;
}
:where(body.page-rent) .hero-content h1 .highlight {
 background: var(--gradient-1);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
:where(body.page-rent) .hero-subtitle {
 font-size: 18px;
 color: var(--text-muted);
 margin-bottom: 32px;
 line-height: 1.7;
 max-width: 520px;
}
:where(body.page-rent) .hero-trust {
 display: flex;
 gap: 28px;
 margin-bottom: 36px;
 flex-wrap: wrap;
}
:where(body.page-rent) .trust-item {
 display: flex;
 align-items: center;
 gap: 8px;
 color: var(--text-muted);
 font-size: 14px;
}
:where(body.page-rent) .trust-icon {
 width: 20px;
 height: 20px;
 background: var(--success);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 color: #fff;
 flex-shrink: 0;
}
:where(body.page-rent) .hero-stats {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 max-width: 480px;
}
:where(body.page-rent) .stat-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 18px 16px;
 text-align: center;
}
:where(body.page-rent) .stat-value {
 font-size: 24px;
 font-weight: 800;
 color: var(--text-main);
}
:where(body.page-rent) .stat-label {
 font-size: 12px;
 color: var(--text-muted);
 margin-top: 4px;
}
:where(body.page-rent) .rental-widget {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 20px;
 padding: 32px 28px;
 box-shadow: var(--shadow-card), var(--shadow-glow);
 position: relative;
}
:where(body.page-rent) .widget-header {
 text-align: center;
 margin-bottom: 24px;
}
:where(body.page-rent) .widget-title {
 font-size: 20px;
 font-weight: 700;
 margin-bottom: 6px;
}
:where(body.page-rent) .widget-subtitle {
 font-size: 13px;
 color: var(--text-muted);
}
:where(body.page-rent) .widget-form {
 display: flex;
 flex-direction: column;
 gap: 18px;
}
:where(body.page-rent) .form-group {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
:where(body.page-rent) .form-label {
 font-size: 13px;
 font-weight: 600;
 color: var(--text-light);
}
:where(body.page-rent) .form-input {
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 14px 16px;
 color: var(--text-main);
 font-size: 14px;
 transition: border-color 0.2s, box-shadow 0.2s;
 font-family: inherit;
}
:where(body.page-rent) .form-input:focus {
 outline: none;
 border-color: var(--primary);
 box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.1);
}
:where(body.page-rent) .form-input::placeholder {
 color: #555a7a;
}
:where(body.page-rent) .quick-amounts {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 8px;
}
:where(body.page-rent) .quick-amount {
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 10px 4px;
 text-align: center;
 font-size: 13px;
 font-weight: 600;
 color: var(--text-light);
 cursor: pointer;
 transition: all 0.2s;
}
:where(body.page-rent) .quick-amount:hover, :where(body.page-rent) .quick-amount.active {
 background: rgba(255, 59, 59, 0.1);
 border-color: var(--primary);
 color: var(--primary);
}
:where(body.page-rent) .duration-options {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 8px;
}
:where(body.page-rent) .duration-option {
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 12px 8px;
 text-align: center;
 cursor: pointer;
 transition: all 0.2s;
}
:where(body.page-rent) .duration-option.active {
 background: rgba(255, 59, 59, 0.1);
 border-color: var(--primary);
}
:where(body.page-rent) .duration-value {
 font-size: 14px;
 font-weight: 700;
 color: var(--text-main);
}
:where(body.page-rent) .duration-option.active .duration-value {
 color: var(--primary);
}
:where(body.page-rent) .duration-label {
 font-size: 11px;
 color: var(--text-muted);
 margin-top: 2px;
}
:where(body.page-rent) .price-display {
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 16px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
:where(body.page-rent) .price-label {
 font-size: 14px;
 color: var(--text-muted);
}
:where(body.page-rent) .price-value {
 font-size: 28px;
 font-weight: 900;
 color: var(--primary);
}
:where(body.page-rent) .price-unit {
 font-size: 14px;
 color: var(--text-muted);
 font-weight: 400;
}
:where(body.page-rent) .widget-cta {
 background: var(--gradient-1);
 color: #fff;
 border: none;
 border-radius: 12px;
 padding: 16px;
 font-size: 16px;
 font-weight: 700;
 cursor: pointer;
 transition: transform 0.2s, box-shadow 0.2s;
 font-family: inherit;
}
:where(body.page-rent) .widget-cta:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 30px rgba(255, 59, 59, 0.4);
}
:where(body.page-rent) .widget-footer {
 text-align: center;
 margin-top: 16px;
 font-size: 12px;
 color: var(--text-muted);
}
:where(body.page-rent) .section {
 padding: 80px 24px;
 max-width: 1200px;
 margin: 0 auto;
}
:where(body.page-rent) .section-header {
 text-align: center;
 margin-bottom: 56px;
}
:where(body.page-rent) .section-tag {
 display: inline-block;
 background: rgba(255, 59, 59, 0.1);
 color: var(--primary);
 font-size: 12px;
 font-weight: 700;
 padding: 6px 16px;
 border-radius: 20px;
 margin-bottom: 16px;
 text-transform: uppercase;
 letter-spacing: 1px;
}
:where(body.page-rent) .section-title {
 font-size: 36px;
 font-weight: 800;
 margin-bottom: 14px;
 line-height: 1.2;
}
:where(body.page-rent) .section-desc {
 font-size: 16px;
 color: var(--text-muted);
 max-width: 600px;
 margin: 0 auto;
 line-height: 1.7;
}
:where(body.page-rent) .steps-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 28px;
}
:where(body.page-rent) .step-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 36px 28px;
 text-align: center;
 transition: transform 0.3s, box-shadow 0.3s;
 position: relative;
}
:where(body.page-rent) .step-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-card);
}
:where(body.page-rent) .step-number {
 width: 56px;
 height: 56px;
 background: var(--gradient-1);
 border-radius: 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 22px;
 font-weight: 900;
 color: #fff;
 margin: 0 auto 20px;
}
:where(body.page-rent) .step-title {
 font-size: 18px;
 font-weight: 700;
 margin-bottom: 10px;
}
:where(body.page-rent) .step-desc {
 font-size: 14px;
 color: var(--text-muted);
 line-height: 1.7;
}
:where(body.page-rent) .step-card::after {
 content: "+";
 position: absolute;
 right: -20px;
 top: 50%;
 transform: translateY(-50%);
 font-size: 24px;
 color: var(--primary);
 opacity: 0.5;
}
:where(body.page-rent) .step-card:last-child::after {
 display: none;
}
:where(body.page-rent) .why-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
}
:where(body.page-rent) .why-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 16px;
 padding: 32px 26px;
 transition: transform 0.3s, box-shadow 0.3s;
}
:where(body.page-rent) .why-card:hover {
 transform: translateY(-3px);
 box-shadow: var(--shadow-card);
}
:where(body.page-rent) .why-icon {
 width: 48px;
 height: 48px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 22px;
 margin-bottom: 18px;
}
:where(body.page-rent) .why-icon.red {
background: rgba(255, 59, 59, 0.12);
}
:where(body.page-rent) .why-icon.orange {
background: rgba(255, 140, 0, 0.12);
}
:where(body.page-rent) .why-icon.green {
background: rgba(0, 212, 170, 0.12);
}
:where(body.page-rent) .why-icon.blue {
background: rgba(59, 130, 246, 0.12);
}
:where(body.page-rent) .why-icon.purple {
background: rgba(139, 92, 246, 0.12);
}
:where(body.page-rent) .why-icon.yellow {
background: rgba(234, 179, 8, 0.12);
}
:where(body.page-rent) .why-title {
 font-size: 17px;
 font-weight: 700;
 margin-bottom: 10px;
}
:where(body.page-rent) .why-desc {
 font-size: 14px;
 color: var(--text-muted);
 line-height: 1.7;
}
:where(body.page-rent) .compare-wrapper {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 20px;
 overflow: hidden;
}
:where(body.page-rent) .compare-table {
 width: 100%;
 border-collapse: collapse;
}
:where(body.page-rent) .compare-table thead {
 background: rgba(255, 59, 59, 0.06);
}
:where(body.page-rent) .compare-table th {
 padding: 20px 24px;
 text-align: center;
 font-size: 15px;
 font-weight: 700;
 color: var(--text-main);
 border-bottom: 1px solid var(--border);
}
:where(body.page-rent) .compare-table th:first-child {
 text-align: left;
}
:where(body.page-rent) .compare-table th.highlight-col {
 background: rgba(255, 59, 59, 0.08);
 color: var(--primary);
}
:where(body.page-rent) .compare-table td {
 padding: 18px 24px;
 text-align: center;
 font-size: 14px;
 color: var(--text-light);
 border-bottom: 1px solid var(--border);
}
:where(body.page-rent) .compare-table td:first-child {
 text-align: left;
 font-weight: 600;
 color: var(--text-main);
}
:where(body.page-rent) .compare-table tr:last-child td {
 border-bottom: none;
}
:where(body.page-rent) .compare-table tbody tr:hover {
 background: rgba(255, 255, 255, 0.02);
}
:where(body.page-rent) .check {
color: var(--success);
font-weight: 700;
font-size: 16px;
}
:where(body.page-rent) .cross {
color: #666;
font-size: 16px;
}
:where(body.page-rent) .highlight-cell {
 background: rgba(255, 59, 59, 0.04);
 font-weight: 600;
}
:where(body.page-rent) .faq-list {
 max-width: 800px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 12px;
}
:where(body.page-rent) .faq-item {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 14px;
 overflow: hidden;
 transition: box-shadow 0.3s;
}
:where(body.page-rent) .faq-item:hover {
 box-shadow: var(--shadow-card);
}
:where(body.page-rent) .faq-question {
 padding: 22px 28px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 cursor: pointer;
 font-size: 16px;
 font-weight: 600;
 user-select: none;
}
:where(body.page-rent) .faq-toggle {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 background: rgba(255, 59, 59, 0.1);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 color: var(--primary);
 transition: transform 0.3s;
 flex-shrink: 0;
}
:where(body.page-rent) .faq-item.open .faq-toggle {
 transform: rotate(45deg);
}
:where(body.page-rent) .faq-answer {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.4s ease, padding 0.4s ease;
 padding: 0 28px;
}
:where(body.page-rent) .faq-item.open .faq-answer {
 max-height: 300px;
 padding: 0 28px 22px;
}
:where(body.page-rent) .faq-answer p {
 font-size: 14px;
 color: var(--text-muted);
 line-height: 1.8;
}
:where(body.page-rent) .cta-section {
 padding: 80px 24px;
 text-align: center;
 background: var(--gradient-2);
 position: relative;
 overflow: hidden;
}
:where(body.page-rent) .cta-inner {
 max-width: 700px;
 margin: 0 auto;
 position: relative;
 z-index: 1;
}
:where(body.page-rent) .cta-title {
 font-size: 36px;
 font-weight: 800;
 margin-bottom: 16px;
}
:where(body.page-rent) .cta-desc {
 font-size: 17px;
 color: var(--text-muted);
 margin-bottom: 32px;
 line-height: 1.7;
}
:where(body.page-rent) .cta-button {
 display: inline-block;
 background: var(--gradient-1);
 color: #fff;
 font-size: 17px;
 font-weight: 700;
 padding: 18px 48px;
 border-radius: 14px;
 text-decoration: none;
 transition: transform 0.2s, box-shadow 0.2s;
}
:where(body.page-rent) .cta-button:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 40px rgba(255, 59, 59, 0.4);
}
@media (max-width: 900px) {
:where(body.page-rent) .hero-inner {
 grid-template-columns: 1fr;
 gap: 40px;
}
:where(body.page-rent) .hero-content h1 {
 font-size: 34px;
}
:where(body.page-rent) .steps-grid, :where(body.page-rent) .why-grid {
 grid-template-columns: 1fr;
}
:where(body.page-rent) .step-card::after {
 display: none;
}
:where(body.page-rent) .compare-table {
 font-size: 12px;
}
:where(body.page-rent) .compare-table th, :where(body.page-rent) .compare-table td {
 padding: 12px 10px;
}
:where(body.page-rent) .nav-links {
 display: none;
}
:where(body.page-rent) .section-title {
 font-size: 26px;
}
}
@keyframes page-rent-fadeInUp {
 from {
 opacity: 0;
 transform: translateY(30px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}
:where(body.page-rent) .animate-in {
 animation: page-rent-fadeInUp 0.6s ease forwards;
}
:where(body.page-rent) .rent-page, :where(body.page-rent) .hero, :where(body.page-rent) .section {
width: 100%;
}

/* ===== SELL PAGE ===== */
:where(body.page-sell) .hero, :where(body.page-sell) .hero-section {
background:radial-gradient(circle at 15% 30%, rgba(14, 165, 233, .15), transparent 35%), linear-gradient(135deg, #07111f 0%, #0f172a 55%, #111c38 100%)!important;
color:#fff!important
}
:where(body.page-sell) .section, :where(body.page-sell) .resource-section, :where(body.page-sell) .why-buy-section, :where(body.page-sell) .why-sell-section, :where(body.page-sell) .faq-section, :where(body.page-sell) .steps-section, :where(body.page-sell) .compare-section {
background:#f7f9fc!important;
color:#172033!important
}
:where(body.page-sell) .section:nth-of-type(even), :where(body.page-sell) .section-alt, :where(body.page-sell) .compare-section, :where(body.page-sell) .steps-section {
background:#fff!important
}
:where(body.page-sell) .section-title, :where(body.page-sell) .section-header h2, :where(body.page-sell) .section h2 {
color:#172033!important
}
:where(body.page-sell) .section-description, :where(body.page-sell) .section-desc, :where(body.page-sell) .section-header p {
color:#667085!important
}
:where(body.page-sell) .section-tag, :where(body.page-sell) .section-eyebrow {
background:rgba(56, 189, 248, .10)!important;
color:#0284c7!important;
border-color:rgba(56, 189, 248, .18)!important
}
:where(body.page-sell) .card, :where(body.page-sell) .step-card, :where(body.page-sell) .why-card, :where(body.page-sell) .feature-card, :where(body.page-sell) .comparison-card, :where(body.page-sell) .faq-item, :where(body.page-sell) .article-card, :where(body.page-sell) .sidebar-widget, :where(body.page-sell) .service-card, :where(body.page-sell) .sell-tool, :where(body.page-sell) .rental-widget {
background:#fff!important;
color:#172033!important;
border-color:#e4e7ec!important;
box-shadow:0 8px 28px rgba(16, 24, 40, .07)!important
}
:where(body.page-sell) .step-card h3, :where(body.page-sell) .why-card h3, :where(body.page-sell) .why-title, :where(body.page-sell) .feature-card h3, :where(body.page-sell) .card h3, :where(body.page-sell) .article-card h3, :where(body.page-sell) .service-card h3 {
color:#172033!important
}
:where(body.page-sell) .step-card p, :where(body.page-sell) .why-card p, :where(body.page-sell) .why-desc, :where(body.page-sell) .feature-card p, :where(body.page-sell) .card p, :where(body.page-sell) .article-card p, :where(body.page-sell) .service-card p, :where(body.page-sell) .faq-answer p {
color:#667085!important
}
:where(body.page-sell) .form-input, :where(body.page-sell) .input-box input, :where(body.page-sell) .sell-tool input, :where(body.page-sell) .rental-widget input, :where(body.page-sell) .rental-widget select {
background:#fff!important;
color:#172033!important;
border-color:#d0d5dd!important
}
:where(body.page-sell) .footer {
background:#0f172a!important;
color:#fff!important;
border-top-color:rgba(255, 255, 255, .08)!important
}
:where(body.page-sell) .footer a, :where(body.page-sell) .footer-links a, :where(body.page-sell) .footer-col a {
color:#cbd5e1!important
}
:where(body.page-sell) .footer a:hover, :where(body.page-sell) .footer-links a:hover, :where(body.page-sell) .footer-col a:hover {
color:#38bdf8!important
}
:where(body.page-sell) .breadcrumb {
color:#667085!important
}
:where(body.page-sell) .breadcrumb a {
color:#667085!important
}
body.page-sell .hero {
	position: relative;
	overflow: hidden;
}
body.page-sell .hero::before {
 content: "";
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: radial-gradient(circle at 30% 50%, rgba(255, 59, 59, 0.05) 0%, transparent 50%);
 animation: page-sell-pulse 15s ease-in-out infinite;
}
@keyframes page-sell-pulse {
 0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
body.page-sell .hero-container {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 1;
}
body.page-sell .hero-left h1 {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 20px;
}
body.page-sell .hero-left h1 .highlight {
	color: var(--primary);
}
body.page-sell .hero-left p {
	font-size: 1.2rem;
	color: var(--text-gray);
	margin-bottom: 30px;
	line-height: 1.8;
}
body.page-sell .hero-badges {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
body.page-sell .badge {
	background: rgba(255, 59, 59, 0.1);
	border: 1px solid rgba(255, 59, 59, 0.3);
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 0.85rem;
	color: var(--primary-light);
	display: flex;
	align-items: center;
	gap: 6px;
}
body.page-sell .hero-cta-group {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}
body.page-sell .btn-primary {
	background: var(--gradient-red);
	color: var(--text-white);
	padding: 14px 32px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 1rem;
	border: none;
	cursor: pointer;
	transition: transform 0.3s, box-shadow 0.3s;
}
body.page-sell .btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-glow);
	color: var(--text-white);
}
body.page-sell .btn-secondary {
	background: transparent;
	color: var(--text-white);
	padding: 14px 32px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 1rem;
	border: 1px solid var(--border-color);
	cursor: pointer;
	transition: border-color 0.3s, background 0.3s;
}
body.page-sell .btn-secondary:hover {
	border-color: var(--primary);
	background: rgba(255, 59, 59, 0.05);
	color: var(--text-white);
}
body.page-sell /* ===== Sell Tool (Right Side) ===== */
 .sell-tool {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	padding: 30px;
	box-shadow: var(--shadow-card);
	position: relative;
}
body.page-sell .sell-tool-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
}
body.page-sell .sell-tool-title {
	font-size: 1.3rem;
	font-weight: 700;
}
body.page-sell .sell-tool-live {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--success);
}
body.page-sell .live-dot {
	width: 8px;
	height: 8px;
	background: var(--success);
	border-radius: 50%;
	animation: page-sell-blink 2s infinite;
}
@keyframes page-sell-blink {
 0%, 100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
body.page-sell .form-group {
	margin-bottom: 20px;
}
body.page-sell .form-label {
	display: block;
	font-size: 0.9rem;
	color: var(--text-gray);
	margin-bottom: 8px;
	font-weight: 500;
}
body.page-sell .form-input {
	width: 100%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 12px 16px;
	color: var(--text-white);
	font-size: 1rem;
	transition: border-color 0.3s;
}
body.page-sell .form-input:focus {
	outline: none;
	border-color: var(--primary);
}
body.page-sell .form-input::placeholder {
 color: #555;
}
body.page-sell .input-with-unit {
	position: relative;
}
body.page-sell .input-with-unit .unit {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-gray);
	font-size: 0.9rem;
}
body.page-sell .price-display {
	background: rgba(255, 59, 59, 0.08);
	border: 1px solid rgba(255, 59, 59, 0.2);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 20px;
}
body.page-sell .price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
}
body.page-sell .price-row .label {
	color: var(--text-gray);
	font-size: 0.9rem;
}
body.page-sell .price-row .value {
	font-weight: 700;
	font-size: 1rem;
}
body.page-sell .price-row .value.highlight {
	color: var(--primary);
	font-size: 1.2rem;
}
body.page-sell .sell-btn {
	width: 100%;
	background: var(--gradient-red);
	color: var(--text-white);
	padding: 16px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 1.1rem;
	border: none;
	cursor: pointer;
	transition: transform 0.3s, box-shadow 0.3s;
}
body.page-sell .sell-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-glow);
}
body.page-sell .tool-footer {
	margin-top: 15px;
	text-align: center;
	font-size: 0.8rem;
	color: var(--text-gray);
}
body.page-sell /* ===== Section Common ===== */
 .section {
	padding: 80px 20px;
}
body.page-sell .section-container {
	max-width: 1200px;
	margin: 0 auto;
}
body.page-sell .section-header {
	text-align: center;
	margin-bottom: 60px;
}
body.page-sell .section-tag {
	display: inline-block;
	background: rgba(255, 59, 59, 0.1);
	color: var(--primary);
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 15px;
}
body.page-sell .section-title {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 15px;
}
body.page-sell .section-desc {
	font-size: 1.1rem;
	color: var(--text-gray);
	max-width: 700px;
	margin: 0 auto;
	line-height: 1.8;
}
body.page-sell /* ===== Steps Section ===== */
 .steps-section {
	background: #111;
}
body.page-sell .steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
}
body.page-sell .step-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 30px 24px;
	text-align: center;
	transition: transform 0.3s, border-color 0.3s;
	position: relative;
}
body.page-sell .step-card:hover {
	transform: translateY(-5px);
	border-color: var(--primary);
}
body.page-sell .step-number {
	width: 50px;
	height: 50px;
	background: var(--gradient-red);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	font-weight: 800;
	margin: 0 auto 20px;
}
body.page-sell .step-card h3 {
	font-size: 1.2rem;
	margin-bottom: 12px;
}
body.page-sell .step-card p {
	font-size: 0.9rem;
	color: var(--text-gray);
	line-height: 1.7;
}
body.page-sell .step-arrow {
	position: absolute;
	top: 50%;
	right: -15px;
	transform: translateY(-50%);
	color: var(--primary);
	font-size: 1.5rem;
	z-index: 2;
}
body.page-sell /* ===== Why Sell Section ===== */
 .why-sell-section {
	background: var(--bg-dark);
}
body.page-sell .why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}
body.page-sell .why-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 35px 28px;
	transition: transform 0.3s, box-shadow 0.3s;
}
body.page-sell .why-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-card);
}
body.page-sell .why-icon {
	font-size: 2.5rem;
	margin-bottom: 20px;
}
body.page-sell .why-card h3 {
	font-size: 1.2rem;
	margin-bottom: 12px;
	color: var(--text-white);
}
body.page-sell .why-card p {
	font-size: 0.92rem;
	color: var(--text-gray);
	line-height: 1.7;
}
body.page-sell .why-card .stat {
	font-size: 2rem;
	font-weight: 800;
	color: var(--primary);
	margin-bottom: 10px;
}
body.page-sell /* ===== Comparison Table ===== */
 .compare-section {
	background: #111;
}
body.page-sell .compare-table-wrapper {
	overflow-x: auto;
	border-radius: 12px;
	border: 1px solid var(--border-color);
}
body.page-sell .compare-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 800px;
}
body.page-sell .compare-table thead {
	background: var(--gradient-red);
}
body.page-sell .compare-table th {
	padding: 18px 20px;
	text-align: center;
	font-weight: 700;
	font-size: 1rem;
	color: var(--text-white);
}
body.page-sell .compare-table th:first-child {
	text-align: left;
}
body.page-sell .compare-table tbody tr {
	background: var(--bg-card);
	border-bottom: 1px solid var(--border-color);
	transition: background 0.3s;
}
body.page-sell .compare-table tbody tr:hover {
	background: var(--bg-card-hover);
}
body.page-sell .compare-table td {
	padding: 16px 20px;
	text-align: center;
	font-size: 0.95rem;
	color: var(--text-light-gray);
}
body.page-sell .compare-table td:first-child {
	text-align: left;
	font-weight: 600;
	color: var(--text-white);
}
body.page-sell .compare-table .best {
	color: var(--primary);
	font-weight: 700;
}
body.page-sell .compare-table .check {
	color: var(--success);
	font-size: 1.2rem;
}
body.page-sell .compare-table .cross {
	color: #555;
	font-size: 1.2rem;
}
body.page-sell /* ===== FAQ Section ===== */
 .faq-section {
	background: var(--bg-dark);
}
body.page-sell .faq-container {
	max-width: 800px;
	margin: 0 auto;
}
body.page-sell .faq-item {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	margin-bottom: 15px;
	overflow: hidden;
	transition: border-color 0.3s;
}
body.page-sell .faq-item:hover {
	border-color: rgba(255, 59, 59, 0.3);
}
body.page-sell .faq-question {
	padding: 20px 24px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	font-size: 1rem;
	user-select: none;
}
body.page-sell .faq-question .toggle {
	font-size: 1.5rem;
	color: var(--primary);
	transition: transform 0.3s;
}
body.page-sell .faq-item.active .toggle {
	transform: rotate(45deg);
}
body.page-sell .faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.4s ease;
	padding: 0 24px;
}
body.page-sell .faq-item.active .faq-answer {
	max-height: 300px;
	padding: 0 24px 20px;
}
body.page-sell .faq-answer p {
	color: var(--text-gray);
	font-size: 0.95rem;
	line-height: 1.8;
}
body.page-sell /* ===== Responsive ===== */
 @media (max-width: 968px) {
body.page-sell .hero-container {
 grid-template-columns: 1fr;
 gap: 40px;
}
body.page-sell .hero-left h1 {
 font-size: 2.2rem;
}
body.page-sell .steps-grid {
 grid-template-columns: repeat(2, 1fr);
}
body.page-sell .why-grid {
 grid-template-columns: repeat(2, 1fr);
}
body.page-sell .footer-top {
 grid-template-columns: 1fr 1fr;
}
body.page-sell .section-title {
 font-size: 2rem;
}
body.page-sell .nav-links {
 display: none;
}
}
@media (max-width: 600px) {
body.page-sell .hero {
 padding: 100px 15px 60px;
}
body.page-sell .hero-left h1 {
 font-size: 1.8rem;
}
body.page-sell .steps-grid {
 grid-template-columns: 1fr;
}
body.page-sell .why-grid {
 grid-template-columns: 1fr;
}
body.page-sell .footer-top {
 grid-template-columns: 1fr;
}
body.page-sell .hero-cta-group {
 flex-direction: column;
}
body.page-sell .btn-primary, body.page-sell .btn-secondary {
 width: 100%;
 text-align: center;
}
}
body.page-sell /* ===== Trust Bar ===== */
 .trust-bar {
	background: #0A0A0A;
	border-bottom: 1px solid var(--border-color);
	padding: 15px 20px;
}
body.page-sell .trust-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 50px;
	flex-wrap: wrap;
}
body.page-sell .trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-gray);
	font-size: 0.9rem;
}
body.page-sell .trust-item .trust-icon {
	font-size: 1.2rem;
}
body.page-sell /* ===== Breadcrumb ===== */
 .breadcrumb {
	max-width: 1200px;
	margin: 0 auto;
	padding: 90px 20px 0;
	font-size: 0.85rem;
	color: var(--text-gray);
}
body.page-sell .breadcrumb a {
	color: var(--text-gray);
}
body.page-sell .breadcrumb a:hover {
	color: var(--primary-light);
}
body.page-sell .breadcrumb .separator {
	margin: 0 8px;
	color: #555;
}
body.page-sell /* ===== Shared site navigation / index-inspired visual system ===== */
.site-nav {
	position:sticky;
	top:0;
	z-index:2000;
	background:rgba(15, 23, 42, .97);
	color:#fff;
	border-bottom:1px solid rgba(255, 255, 255, .08);
	box-shadow:0 2px 12px rgba(15, 23, 42, .08);
	backdrop-filter:blur(12px)
}
body.page-sell .site-nav-inner {
	width:min(1180px, calc(100% - 40px));
	min-height:72px;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:28px
}
body.page-sell .site-logo {
	font-size:21px;
	font-weight:800;
	letter-spacing:-.4px;
	color:#fff!important;
	text-decoration:none!important;
	white-space:nowrap
}
body.page-sell .site-logo span {
	color: #fff;
}
body.page-sell .site-nav-links {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:24px;
	overflow-x:auto;
	white-space:nowrap;
	scrollbar-width:none
}
body.page-sell .site-nav-links::-webkit-scrollbar {
display:none
}
body.page-sell .site-nav-links a {
	color:#dbe5f2!important;
	text-decoration:none!important;
	font-size:14px;
	font-weight:600;
	padding:8px 0;
transition:color .2s, transform .2s
}
body.page-sell .site-nav-links a:hover, body.page-sell .site-nav-links a.active {
	color:#38bdf8!important
}
body.page-sell .site-nav-links a.active {
	font-weight:800
}
@media (max-width:900px) {
body.page-sell .site-nav-inner {
width:min(100% - 24px, 1180px);
gap:14px
}
body.page-sell .site-nav-links {
gap:16px
}
body.page-sell .site-logo {
font-size:18px
}
body.page-sell .site-nav-links a {
font-size:13px
}
}
@media (max-width:650px) {
body.page-sell .site-nav-inner {
display:block;
padding:10px 0
}
body.page-sell .site-logo {
display:block;
margin-bottom:7px
}
body.page-sell .site-nav-links {
justify-content:flex-start;
gap:18px;
padding-bottom:2px
}
}
body.page-sell /* Keep non-home pages visually aligned with index.html */
body {
	background:#f7f9fc!important;
	color:#172033!important
}
body.page-sell .hero, body.page-sell .hero-section {
	background:radial-gradient(circle at 15% 30%, rgba(14, 165, 233, .15), transparent 35%), linear-gradient(135deg, #07111f 0%, #0f172a 55%, #111c38 100%)!important;
	color:#fff!important
}
body.page-sell .section, body.page-sell .resource-section, body.page-sell .why-buy-section, body.page-sell .why-sell-section, body.page-sell .faq-section, body.page-sell .steps-section, body.page-sell .compare-section {
	background:#f7f9fc!important;
	color:#172033!important
}
body.page-sell .section:nth-of-type(even), body.page-sell .section-alt, body.page-sell .compare-section, body.page-sell .steps-section {
background:#fff!important
}
body.page-sell .section-title, body.page-sell .section-header h2, body.page-sell .section h2 {
	color:#172033!important
}
body.page-sell .section-description, body.page-sell .section-desc, body.page-sell .section-header p {
	color:#667085!important
}
body.page-sell .section-tag, body.page-sell .section-eyebrow {
	background:rgba(56, 189, 248, .10)!important;
	color:#0284c7!important;
	border-color:rgba(56, 189, 248, .18)!important
}
body.page-sell .card, body.page-sell .step-card, body.page-sell .why-card, body.page-sell .feature-card, body.page-sell .comparison-card, body.page-sell .faq-item, body.page-sell .article-card, body.page-sell .sidebar-widget, body.page-sell .service-card, body.page-sell .sell-tool, body.page-sell .rental-widget {
	background:#fff!important;
	color:#172033!important;
	border-color:#e4e7ec!important;
	box-shadow:0 8px 28px rgba(16, 24, 40, .07)!important
}
body.page-sell .step-card h3, body.page-sell .why-card h3, body.page-sell .why-title, body.page-sell .feature-card h3, body.page-sell .card h3, body.page-sell .article-card h3, body.page-sell .service-card h3 {
	color:#172033!important
}
body.page-sell .step-card p, body.page-sell .why-card p, body.page-sell .why-desc, body.page-sell .feature-card p, body.page-sell .card p, body.page-sell .article-card p, body.page-sell .service-card p, body.page-sell .faq-answer p {
	color:#667085!important
}
body.page-sell .form-input, body.page-sell .input-box input, body.page-sell .sell-tool input, body.page-sell .rental-widget input, body.page-sell .rental-widget select {
	background:#fff!important;
	color:#172033!important;
	border-color:#d0d5dd!important
}
body.page-sell .footer {
	background:#0f172a!important;
	color:#fff!important;
	border-top-color:rgba(255, 255, 255, .08)!important
}
body.page-sell .footer a, body.page-sell .footer-links a, body.page-sell .footer-col a {
	color:#cbd5e1!important
}
body.page-sell .footer a:hover, body.page-sell .footer-links a:hover, body.page-sell .footer-col a:hover {
	color:#38bdf8!important
}
body.page-sell .breadcrumb {
	color:#667085!important
}
body.page-sell .breadcrumb a {
	color:#667085!important
}
/* Contact keeps the shared navbar visible on narrow screens, matching its original stylesheet. */
@media(max-width:600px) {
body.page-contact .navbar {
display:flex
}
}


/* ===== Article Detail Page ===== */
body.page-article { background:#f7f9fc; }
:where(body.page-article) .article-main{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:42px 0 70px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;align-items:start}
:where(body.page-article) .article-detail{min-width:0;background:#fff;border:1px solid #e4e7ec;border-radius:16px;box-shadow:0 8px 28px rgba(16,24,40,.07);padding:clamp(26px,4vw,48px)}
:where(body.page-article) .article-breadcrumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;color:#98a2b3;font-size:13px;margin-bottom:22px}
:where(body.page-article) .article-breadcrumb a{color:#667085}
:where(body.page-article) .article-breadcrumb a:hover{color:#0284c7}
:where(body.page-article) .detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
:where(body.page-article) .detail-category{display:inline-flex;padding:4px 11px;border-radius:5px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
:where(body.page-article) .detail-date,:where(body.page-article) .detail-reading{color:#667085;font-size:13px}
:where(body.page-article) .article-title{margin:0 0 20px;color:#172033;font-size:1.5rem;line-height:1.18;letter-spacing:-1.2px}
:where(body.page-article) .article-content{color:#344054;font-size:15px;line-height:1.9}
:where(body.page-article) .article-content h2{margin:38px 0 13px;color:#172033;font-size:25px;line-height:1.35}
:where(body.page-article) .article-content h3{margin:27px 0 9px;color:#172033;font-size:18px}
:where(body.page-article) .article-content p{margin:0 0 17px}
:where(body.page-article) .article-content ul,:where(body.page-article) .article-content ol{margin:0 0 20px 22px}
:where(body.page-article) .article-content li{margin-bottom:8px}
:where(body.page-article) .article-content strong{color:#172033}
:where(body.page-article) .article-content .info-box{margin:24px 0;padding:18px 20px;background:#eff8ff;border:1px solid #b9e6fe;border-radius:10px}
:where(body.page-article) .article-content .check-list{margin-left:0;padding-left:0;list-style:none}
:where(body.page-article) .article-content .check-list li{position:relative;padding-left:28px}
:where(body.page-article) .article-content .check-list li:before{content:"✓";position:absolute;left:0;top:0;color:#059669;font-weight:800}
:where(body.page-article) .detail-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:34px;padding-top:22px;border-top:1px solid #edf0f5}
:where(body.page-article) .detail-tag{padding:5px 10px;border-radius:5px;background:#f2f4f7;color:#667085;font-size:12px}
:where(body.page-article) .article-pagination{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
:where(body.page-article) .page-link{display:block;padding:16px 18px;background:#fff;border:1px solid #e4e7ec;border-radius:10px;transition:.2s ease}
:where(body.page-article) .page-link:hover{border-color:#38bdf8;transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,24,40,.06)}
:where(body.page-article) .page-link.next{text-align:right}
:where(body.page-article) .page-link-label{display:block;margin-bottom:5px;color:#98a2b3;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
:where(body.page-article) .page-link-title{display:block;color:#172033;font-size:13px;font-weight:700;line-height:1.45}
:where(body.page-article) .article-sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:92px}
:where(body.page-article) .article-side-card{background:#fff;border:1px solid #e4e7ec;border-radius:14px;box-shadow:0 8px 28px rgba(16,24,40,.06);overflow:hidden}
:where(body.page-article) .article-side-head{padding:15px 16px;border-bottom:1px solid #edf0f5;display:flex;align-items:center;gap:9px}
:where(body.page-article) .article-side-head strong{color:#172033;font-size:14px}
:where(body.page-article) .article-side-body{padding:10px}
:where(body.page-article) .article-side-item{display:block;padding:10px;border-radius:8px;color:#475467;font-size:12px;line-height:1.5}
:where(body.page-article) .article-side-item:hover{background:#f8fafc;color:#0284c7}
@media(max-width:900px){:where(body.page-article) .article-main{grid-template-columns:1fr}:where(body.page-article) .article-sidebar{position:static}}
@media(max-width:600px){:where(body.page-article) .article-main{width:min(100% - 28px,1180px);padding-top:24px}:where(body.page-article) .article-detail{padding:24px 18px;border-radius:12px}:where(body.page-article) .article-title{font-size:29px;letter-spacing:-.7px}:where(body.page-article) .article-pagination{grid-template-columns:1fr}:where(body.page-article) .page-link.next{text-align:left}}
/* ===== index-blog===== */
.blog-section {
	padding:72px 20px
}
.wrap {
	max-width:1180px;
	margin:auto
}
.blog-head {
	margin:0 auto 40px
}
h2 {
	font-size:36px;
	margin:0 0 12px
}
.head p {
	margin:0;
	color:#697586;
	line-height:1.7;
	font-size:15px
}
.grid {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:20px
}
.card {
	background:#fff;
	border:1px solid #e5e9ef;
	border-radius:15px;
	padding:25px;
	min-height:255px;
	display:flex;
	flex-direction:column;
transition:.2s
}
.card:hover {
	transform:translateY(-4px);
	box-shadow:0 12px 30px rgba(20, 35, 60, .08)
}

h3 {
	font-size:19px;
	line-height:1.4;
	margin:0 0 11px
}
h3 a {
	color:#172033;
	text-decoration:none
}
h3 a:hover {
	color:#e33434
}
.card p {
	font-size:13.5px;
	color:#6d7889;
	line-height:1.65;
	margin:0 0 20px
}
.utc {
	margin-top:auto;
	border-top:1px solid #edf0f4;
	padding-top:15px;
	display:flex;
	justify-content:space-between;
	font-size:12px;
	color:#8993a2
}
.more {
	color:#172033;
	font-weight:700;
	text-decoration:none
}
.more:hover {
	color:#e33434
}
.ftmore {
	text-align:center;
	margin-top:34px
}
.all {
	display:inline-flex;
	height:46px;
	padding:0 22px;
	align-items:center;
	border-radius:9px;
	background:#172033;
	color:#fff;
	text-decoration:none;
	font-size:14px;
	font-weight:700
}
@media(max-width:900px) {
.grid {
grid-template-columns:repeat(2, 1fr)
}
}
@media(max-width:600px) {
.blog-section {
padding:52px 16px
}
h2 {
font-size:29px
}
.grid {
grid-template-columns:1fr;
gap:15px
}
.card {
padding:22px;
min-height:auto
}
}

/* ===== index-tabs===== */
    .tabs-box {
      width: 1180px;
      margin: 0 auto;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    /* 分类按钮 */
    .tabs {
      display: flex;
      border-bottom: 1px solid #eee;
    }
    .tab {
      padding: 16px;
      text-align: center;
      cursor: pointer;
      color: #666;
      font-size: 16px;
      transition: all 0.3s;
      position: relative;
    }

    .tab:hover {
      color: #333;
    }

    /* 当前选中的分类 */
    .tab.active {
      color: #1677ff;
      font-weight: bold;
    }

    .tab.active::after {
      content: "";
      position: absolute;
      left: 30%;
      right: 30%;
      bottom: 0;
      height: 3px;
      background: #1677ff;
      border-radius: 3px 3px 0 0;
    }

    /* 内容区域 */
    .sylabel {
      display: none;
    }
    .sylabel.active {
      display: block;
    }
    .sylabel p {
      color: #666;
      line-height: 1.8;
      margin: 10px;
    }