/* De'Exchange Network — final UI/UX system pass, 2026-09-03 */
@font-face{font-family:"Dekatron SemiBold";src:url("../assets/fonts/dekatron-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Rabelo";src:url("../assets/fonts/rabelo-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --den-orange:#FF8F00;--den-black:#050300;--den-charcoal:#303030;--den-white:#FFFFFF;--den-cream:#FDFBF7;--den-stone:#E8E3DC;
  --surface:#FFFFFF;--surface-soft:#FDFBF7;--surface-muted:#E8E3DC;--surface-dark:#242321;--surface-dark-2:#303030;
  --text:#050300;--muted:#5D5851;--border:#DDD7CE;--header-h:74px;
}
body{background:var(--surface);color:var(--text);font-family:"Rabelo","Segoe UI",Arial,sans-serif;line-height:1.62}
h1,h2,h3{font-family:"Dekatron SemiBold","Arial Narrow",Arial,sans-serif;line-height:1.08;letter-spacing:.002em;text-wrap:balance}
h1{font-size:clamp(2rem,3.2vw,3.15rem)}h2{font-size:clamp(1.6rem,2.15vw,2.25rem)}h3{font-size:clamp(1.15rem,1.1vw,1.42rem)}
.container,.header-bar{width:min(100% - 40px,1280px)}
.section{padding:clamp(48px,5.4vw,78px) 0}.section-tight{padding:clamp(34px,4vw,52px) 0}.section-head{max-width:720px;margin-bottom:34px}.section-head p{max-width:62ch}
.page-hero{padding:clamp(34px,4vw,54px) 0 clamp(26px,3vw,36px)}.page-hero h1{max-width:22ch}.page-hero .lede{max-width:66ch;line-height:1.65}

/* Header: protect logo, center navigation, keep actions compact. */
.header-bar{display:grid;grid-template-columns:minmax(172px,220px) 1fr auto;gap:clamp(18px,2.4vw,38px);align-items:center}
.brand{min-width:0}.brand img{max-width:100%}.brand-logo-light,.brand-logo-dark{height:38px;width:auto;max-width:200px;object-fit:contain}
.main-nav{justify-self:center}.main-nav ul{gap:clamp(15px,1.5vw,24px)}.main-nav a{font-size:.91rem;white-space:nowrap}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:max-content}
.header-cta{min-height:40px!important;padding:9px 15px!important;font-size:.84rem!important}
.theme-toggle,.menu-toggle,.mobile-nav-close{border:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.theme-toggle{width:34px!important;height:34px!important;color:var(--text)}.theme-toggle svg{width:18px;height:18px}
.menu-toggle,.mobile-nav-close{width:38px!important;height:38px!important}.menu-toggle svg,.mobile-nav-close svg{width:25px!important;height:25px!important}
.site-header.scrolled .theme-toggle,.site-header.scrolled .menu-toggle{color:#fff}
.theme-toggle:hover,.menu-toggle:hover,.mobile-nav-close:hover{transform:none!important;opacity:.72;background:transparent!important}

/* Buttons: same rhythm, natural widths. */
.btn{min-height:44px;padding:11px 20px;font-size:.9rem;line-height:1;border-radius:999px;gap:7px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-actions .btn{min-width:148px}
.steps-cta .btn,.big-cta .btn{min-width:154px}.rate-card .btn{min-width:0}

/* Mobile navigation: slimmer drawer, clean top controls, no logo squeeze. */
.mobile-nav{inset:0 0 0 auto!important;width:min(68vw,330px)!important;background:linear-gradient(155deg,#303030 0%,#242321 52%,#050300 100%)!important}
.mobile-nav-top{min-height:70px;padding:14px 18px!important;gap:14px}.mobile-nav-top .brand{flex:1;min-width:0}.mobile-nav-top .brand img{height:31px!important;max-width:150px!important;object-fit:contain}
.mobile-nav-top-actions{gap:12px!important;flex:0 0 auto}.mobile-nav .theme-toggle,.mobile-nav-close{color:#fff!important}
.mobile-nav-close svg line{stroke:currentColor}.mobile-nav-links{padding:18px 20px!important}.mobile-nav-links a{font-size:1.26rem!important;padding:13px 0!important;line-height:1.15}
.mobile-nav-cta{padding:12px 20px 24px!important}.mobile-nav-scrim{background:rgba(5,3,0,.54)!important}

/* Section flow and desktop fill: readable text, fuller grids. */
.offer-grid,.why-grid,.steps-grid,.blog-grid{align-items:stretch}.offer-card,.why-card,.step-card,.blog-card{height:100%}
@media(min-width:1080px){.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.why-grid{gap:22px}.steps-grid{gap:22px}}
.about-grid,.app-grid{gap:clamp(38px,5vw,72px)}.about-copy{max-width:66ch}
.blog-card-body{padding:24px 24px 26px}.blog-card h3{line-height:1.18}.blog-card p{line-height:1.58}

/* Article reading measure: centered, breathable, not pinned to the left. */
.prose{max-width:790px;margin-inline:auto}.prose p,.prose li{font-size:1rem;line-height:1.78;margin-bottom:16px}.prose h2{font-size:clamp(1.45rem,2vw,1.85rem);margin-top:46px;margin-bottom:15px}.prose h3{font-size:1.22rem;margin-top:32px;margin-bottom:11px}.blog-byline{max-width:790px;margin-left:auto;margin-right:auto}
.page-hero .container:has(+ *){} /* harmless modern selector guard */

/* Correct semantic theme system. Do not invert --black/--white tokens. */
html[data-theme="dark"]{color-scheme:dark;--surface:#242321;--surface-soft:#2B2926;--surface-muted:#34322F;--text:#FDFBF7;--muted:#D3CDC4;--border:#4C4944;--off-white:#2B2926;--gray-light:#34322F}
html[data-theme="dark"] body{background:var(--surface);color:var(--text)}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,html[data-theme="dark"] .blog-card h3,html[data-theme="dark"] .prose strong{color:#FDFBF7}
html[data-theme="dark"] p,html[data-theme="dark"] .prose p,html[data-theme="dark"] .prose li,html[data-theme="dark"] .breadcrumb,html[data-theme="dark"] .blog-meta,html[data-theme="dark"] .blog-byline{color:#D3CDC4}
html[data-theme="dark"] .site-header{background:rgba(36,35,33,.98);border-color:#494640}html[data-theme="dark"] .main-nav a{color:#FDFBF7}
html[data-theme="dark"] .brand-logo-light{display:none!important}html[data-theme="dark"] .brand-logo-dark{display:block!important}
html[data-theme="dark"] .theme-toggle{color:#FDFBF7}html[data-theme="dark"] .theme-toggle .moon{display:none}html[data-theme="dark"] .theme-toggle .sun{display:block}
html[data-theme="dark"] .page-hero{background-color:#2B2926!important;background-image:repeating-linear-gradient(90deg,rgba(76,73,68,.7) 0 2px,transparent 2px 18px)!important;border-color:#4C4944}
html[data-theme="dark"] .section-alt{background:#2B2926!important}
html[data-theme="dark"] .section:not(.section-black):not(.section-alt){background:#242321}
html[data-theme="dark"] .blog-card,html[data-theme="dark"] .offer-card,html[data-theme="dark"] .why-card,html[data-theme="dark"] .step-card,html[data-theme="dark"] .testi-card,html[data-theme="dark"] .calc-card,html[data-theme="dark"] .rates-table-wrap,html[data-theme="dark"] .rate-card,html[data-theme="dark"] .about-list li,html[data-theme="dark"] .faq-item{background:#303030!important;border-color:#4C4944!important;color:#FDFBF7}
html[data-theme="dark"] .blog-card-thumb{background:linear-gradient(145deg,#34322F,#242321)!important}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .direction-toggle{background:#282724!important;color:#FDFBF7!important;border-color:#55514B!important}
html[data-theme="dark"] .direction-toggle button{color:#D3CDC4}html[data-theme="dark"] .direction-toggle button.active{background:#FF8F00!important;color:#050300!important}
html[data-theme="dark"] .btn-outline{color:#FDFBF7!important;border-color:#625E57!important}html[data-theme="dark"] .btn-outline:hover{border-color:#FDFBF7!important}
html[data-theme="dark"] .btn-dark{background:#FDFBF7!important;color:#050300!important}
html[data-theme="dark"] .section-black{background:linear-gradient(135deg,#303030 0%,#242321 58%,#050300 100%)!important;color:#fff}
html[data-theme="dark"] .section-black h2,html[data-theme="dark"] .section-black h3,html[data-theme="dark"] .section-black h4{color:#fff}
html[data-theme="dark"] .section-black p{color:rgba(255,255,255,.72)}

/* Calculator two-stage value hierarchy. */
.calc-result{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.calc-result-box{padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}
.calc-result-box .label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:5px}.calc-result-box .value{font-family:"Dekatron SemiBold","Arial Narrow",Arial,sans-serif;font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.1;color:var(--text)}
.calc-result-box.market-unavailable .value{font-family:"Rabelo",sans-serif;font-size:.92rem;color:var(--muted)}
html[data-theme="dark"] .calc-result-box{background:#282724;border-color:#4C4944}html[data-theme="dark"] .calc-result-box .value{color:#FDFBF7}

/* Rate ticker never collapses while async data changes. */
.ticker-scroll{min-width:0}.ticker-items{width:max-content;min-width:max-content;flex:none!important;animation:ticker-marquee 32s linear infinite!important;transform:translate3d(0,0,0)}
.ticker-item{flex:0 0 auto}.ticker-updated{white-space:nowrap}

@media(max-width:1023px){
  .header-bar{display:flex!important;width:min(100% - 28px,1280px);gap:14px}.brand{flex:1;min-width:0}.brand-logo-light,.brand-logo-dark{height:33px!important;max-width:min(52vw,178px)!important}
  .header-actions{margin-left:auto!important;gap:10px!important}.theme-toggle{width:32px!important;height:36px!important}.menu-toggle{width:34px!important;height:36px!important}
}
@media(max-width:720px){
  .container{width:min(100% - 28px,1280px)}.section{padding:42px 0}.section-head{margin-bottom:26px}
  h1{font-size:clamp(1.82rem,8.6vw,2.35rem)}h2{font-size:clamp(1.45rem,6.3vw,1.88rem)}h3{font-size:1.15rem}
  .page-hero{padding:28px 0 24px}.page-hero h1{max-width:100%}.hero-actions .btn{min-width:0;flex:1 1 145px}
  .calc-result{grid-template-columns:1fr}.prose{max-width:none}.prose p,.prose li{font-size:.98rem;line-height:1.72}
  .mobile-nav{width:min(76vw,320px)!important}
}
@media(max-width:420px){.brand-logo-light,.brand-logo-dark{max-width:148px!important}.header-actions{gap:7px!important}.mobile-nav{width:min(82vw,310px)!important}}
@media(prefers-reduced-motion:reduce){.ticker-items{animation:none!important;transform:none!important}}
.blog-card-thumb.dual-assets{gap:18px}.blog-card-thumb.dual-assets img{width:52px;height:52px}.blog-card-thumb.dual-assets img:nth-child(2){animation-delay:-2.2s}


/* 2026-09-03e — contrast, spacing and performance refinement */
:root{--content-max:1120px;--reading-max:760px}
.container,.header-bar{width:min(100% - 40px,var(--content-max))!important}
@media(min-width:768px){.container,.header-bar{width:min(100% - 56px,var(--content-max))!important}}
@media(min-width:1200px){.container,.header-bar{width:min(100% - 96px,var(--content-max))!important}}
.section{padding:clamp(46px,4.8vw,72px) 0!important}.section-tight{padding:clamp(32px,3.6vw,48px) 0!important}
.section-head{max-width:650px!important;margin-bottom:30px!important}.section-head p{max-width:58ch!important}
.faq-list{max-width:980px;margin-inline:auto}.faq-q{padding:20px 10px!important}.faq-a-inner{padding-left:10px!important;padding-right:10px!important;max-width:68ch!important}
.big-cta{max-width:1040px;margin-inline:auto;padding:clamp(34px,4.5vw,54px)!important}
.hero-copy{max-width:650px}.about-copy,.app-copy{max-width:610px}

/* Buttons share one height/rhythm but keep natural content width. */
.btn{min-height:43px!important;padding:10px 18px!important;font-size:.88rem!important;line-height:1.1!important;width:auto!important;max-width:100%}
.btn-block{width:auto!important;align-self:flex-start}.calc-card .btn-block,.contact-form .btn-block{width:100%!important}
.hero-actions .btn{min-width:0!important}.header-cta{min-height:39px!important;padding:9px 14px!important;font-size:.82rem!important}
.rate-card .btn,.rates-table .btn{padding:8px 14px!important;min-height:38px!important}

/* Full dark-theme component contract: every surface, text and icon follows contrast tokens. */
html[data-theme="dark"]{--surface:#232220;--surface-soft:#2B2926;--surface-muted:#34322F;--text:#FDFBF7;--muted:#D8D2C9;--border:#504C46;--off-white:#2B2926;--gray-light:#34322F;color-scheme:dark}
html[data-theme="dark"] body,html[data-theme="dark"] main{background:#232220!important;color:#FDFBF7!important}
html[data-theme="dark"] section:not(.section-black),html[data-theme="dark"] .section-alt{color:#FDFBF7}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,
html[data-theme="dark"] .faq-q,html[data-theme="dark"] .faq-a-inner,html[data-theme="dark"] .asset-cell,html[data-theme="dark"] .price,
html[data-theme="dark"] .rate-card,html[data-theme="dark"] .rate-card strong,html[data-theme="dark"] .calc-card,html[data-theme="dark"] .calc-result-box .value,
html[data-theme="dark"] .testi-name,html[data-theme="dark"] .about-list strong,html[data-theme="dark"] .blog-card h3,
html[data-theme="dark"] .blog-related a,html[data-theme="dark"] .prose strong,html[data-theme="dark"] label{color:#FDFBF7!important}
html[data-theme="dark"] p,html[data-theme="dark"] li,html[data-theme="dark"] .muted,html[data-theme="dark"] .faq-a-inner,
html[data-theme="dark"] .updated,html[data-theme="dark"] .rate-card-body div,html[data-theme="dark"] .calc-note,html[data-theme="dark"] .disclaimer,
html[data-theme="dark"] .blog-card p,html[data-theme="dark"] .blog-meta,html[data-theme="dark"] .breadcrumb,html[data-theme="dark"] .legal-updated{color:#D8D2C9!important}
html[data-theme="dark"] .faq-list,html[data-theme="dark"] .faq-item,html[data-theme="dark"] .rates-table-wrap,html[data-theme="dark"] .rates-table th,
html[data-theme="dark"] .rates-table td,html[data-theme="dark"] .rate-card,html[data-theme="dark"] .calc-card,html[data-theme="dark"] .calc-result-box,
html[data-theme="dark"] .blog-card,html[data-theme="dark"] .blog-related a,html[data-theme="dark"] .offer-card,html[data-theme="dark"] .why-card,
html[data-theme="dark"] .step-card,html[data-theme="dark"] .testi-card,html[data-theme="dark"] .about-list li{border-color:#504C46!important}
html[data-theme="dark"] .faq-item,html[data-theme="dark"] .rate-card,html[data-theme="dark"] .calc-card,html[data-theme="dark"] .calc-result-box,
html[data-theme="dark"] .blog-card,html[data-theme="dark"] .blog-related a,html[data-theme="dark"] .offer-card,html[data-theme="dark"] .why-card,
html[data-theme="dark"] .step-card,html[data-theme="dark"] .testi-card,html[data-theme="dark"] .about-list li{background:#30302E!important}
html[data-theme="dark"] .rates-table th{background:#2B2A28!important;color:#D8D2C9!important}html[data-theme="dark"] .rates-table td{background:#30302E!important;color:#FDFBF7!important}
html[data-theme="dark"] .faq-q svg,html[data-theme="dark"] .faq-q span,html[data-theme="dark"] .back-to-top svg,
html[data-theme="dark"] .blog-related svg,html[data-theme="dark"] .rate-card svg{color:#FF8F00!important;stroke:currentColor!important}
html[data-theme="dark"] .btn-outline svg,html[data-theme="dark"] .theme-toggle svg,html[data-theme="dark"] .menu-toggle svg{color:currentColor!important;stroke:currentColor!important}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea,html[data-theme="dark"] .direction-toggle{background:#282724!important;color:#FDFBF7!important;border-color:#5A554F!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#AFA89E!important}
html[data-theme="dark"] .page-hero{background-color:#2B2926!important;background-image:repeating-linear-gradient(90deg,rgba(232,227,220,.11) 0 2px,transparent 2px 18px)!important}
html[data-theme="dark"] .site-footer,html[data-theme="dark"] .section-black{background-color:#1F1E1C!important;background-image:linear-gradient(135deg,rgba(255,143,0,.055),transparent 42%)!important}
html[data-theme="dark"] .back-to-top{background:#FDFBF7!important;color:#050300!important}

/* Single USDT benchmark result: no oversized empty second column. */
.calc-result{grid-template-columns:minmax(0,1fr)!important;max-width:560px}.calc-result-box{min-height:96px;display:flex;flex-direction:column;justify-content:center}

@media(max-width:720px){.container,.header-bar{width:min(100% - 28px,var(--content-max))!important}.section{padding:40px 0!important}.faq-list{max-width:none}.btn{min-height:42px!important}.big-cta{border-radius:16px!important}}
