/* SwapRouter — onyx surface, indigo accent. Borders reserved for separators and floating panels. */

@font-face { font-family:"Inter"; src:url("../assets/fonts/Inter-Regular.woff2") format("woff2");  font-weight:400; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../assets/fonts/Inter-Medium.woff2") format("woff2");   font-weight:500; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../assets/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }

:root {
  --onyx-900:#0A0A0B; --onyx-800:#111114; --onyx-700:#17171C; --onyx-600:#1F1F26;
  --line:#24242C; --line-hi:#2E2E36;
  --white:#FFF; --white-90:rgba(255,255,255,.90); --white-70:rgba(255,255,255,.70); --white-50:rgba(255,255,255,.50);
  --indigo:#A5B4FC; --indigo-hi:#C7D2FE;
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-22:22px; --fs-28:28px; --fs-40:40px; --fs-56:56px;
  --s-2:4px; --s-3:8px; --s-4:12px; --s-5:16px; --s-6:24px; --s-7:32px; --s-8:48px; --s-9:64px; --s-10:96px;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --container:1160px; --header-h:64px; --ctrl-h:34px;
  --tx:120ms ease;
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul,ol { margin:0; padding:0; list-style:none; }
button,input,select { font:inherit; color:inherit; margin:0; appearance:none; -webkit-appearance:none; background:transparent; border:0; outline:0; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--indigo); outline-offset:2px; border-radius:var(--r-sm); }

html { scroll-behavior:smooth; }
body {
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:400; font-size:var(--fs-16); line-height:1.55;
  color:var(--white-90); background:var(--onyx-900);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

h1,h2,h3 { font-weight:600; letter-spacing:-.02em; color:var(--white); margin:0; line-height:1.18; }
h1 { font-size:var(--fs-56); }  h2 { font-size:var(--fs-40); }  h3 { font-size:var(--fs-22); }
p { margin:0; }

.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--s-6); }
.eyebrow {
  display:inline-block; font-size:var(--fs-12); font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--indigo); margin-bottom:var(--s-5);
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  height:44px; padding:0 var(--s-6); border-radius:var(--r-md);
  font-weight:500; font-size:var(--fs-14); white-space:nowrap;
  transition:background-color var(--tx), color var(--tx);
}
.btn-block { width:100%; }
.btn-primary { background:var(--indigo); color:var(--onyx-900); font-weight:600; }
.btn-primary:hover { background:var(--indigo-hi); }
.btn-ghost { color:var(--white-90); background:var(--onyx-800); }
.btn-ghost:hover { background:var(--onyx-700); color:var(--white); }

/* Header */
.site-header { background:var(--onyx-900); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; gap:var(--s-7); height:var(--header-h); }
.brand { display:inline-flex; align-items:center; gap:var(--s-3); color:var(--white); flex-shrink:0; }
.brand-mark { width:18px; height:18px; border-radius:4px; background:var(--indigo); }
.brand-name { font-weight:600; font-size:var(--fs-16); letter-spacing:-.005em; }
.nav { display:flex; gap:var(--s-6); flex:1; }
.nav a { font-size:var(--fs-14); font-weight:500; color:var(--white-70); transition:color var(--tx); }
.nav a:hover, .nav a[aria-current="page"] { color:var(--white); }
.header-actions { display:flex; align-items:center; gap:var(--s-3); flex-shrink:0; }

/* Order ID search */
.order-search {
  position:relative; display:inline-flex; align-items:center; gap:var(--s-3);
  height:var(--ctrl-h); padding:0 var(--s-4); border-radius:var(--r-sm);
  background:var(--onyx-800); transition:background-color var(--tx);
}
.order-search:hover, .order-search:focus-within { background:var(--onyx-700); }
.order-search-icon { color:var(--white-50); flex-shrink:0; }
.order-search input { height:100%; width:180px; font-size:var(--fs-13); color:var(--white); }
.order-search input::placeholder { color:var(--white-50); }
.order-search-status {
  position:absolute; top:calc(100% + 6px); right:0; min-width:220px;
  padding:var(--s-3) var(--s-4); background:var(--onyx-700);
  border-radius:var(--r-sm); font-size:var(--fs-13); color:var(--white-70); z-index:20;
}
.order-search-status[hidden] { display:none; }

/* Language selector */
.lang { position:relative; }
.lang-toggle {
  display:inline-flex; align-items:center; gap:var(--s-3);
  height:var(--ctrl-h); padding:0 var(--s-4); border-radius:var(--r-sm);
  background:var(--onyx-800); color:var(--white-90);
  font-size:var(--fs-13); font-weight:500; line-height:1;
  transition:background-color var(--tx), color var(--tx);
}
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] { background:var(--onyx-700); color:var(--white); }
.lang-toggle svg { color:var(--white-50); }
.lang-flag { font-size:14px; line-height:1; }

.lang-menu {
  position:absolute; top:calc(100% + 6px); right:0; min-width:190px;
  background:var(--onyx-800); border-radius:var(--r-sm); padding:4px; z-index:20;
}
.lang-menu[hidden] { display:none; }
.lang-menu li {
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4); border-radius:4px;
  font-size:var(--fs-13); font-weight:500; color:var(--white-70); cursor:pointer;
  transition:background-color var(--tx), color var(--tx);
}
.lang-menu li:hover, .lang-menu li[aria-selected="true"] { background:var(--onyx-700); color:var(--white); }
.lang-menu li .lang-flag { font-size:15px; }

/* Hero */
.hero { padding:var(--s-10) 0 var(--s-9); border-bottom:1px solid var(--line); }
.hero-inner { display:grid; grid-template-columns:1.15fr 1fr; gap:var(--s-9); align-items:center; }
.hero-copy .lead { margin-top:var(--s-5); font-size:var(--fs-18); color:var(--white-70); max-width:52ch; }
.hero-cta { display:flex; gap:var(--s-4); margin-top:var(--s-7); }
.hero-stats { display:flex; gap:var(--s-8); margin-top:var(--s-8); padding-top:var(--s-6); border-top:1px solid var(--line); }
.hero-stats li { display:flex; flex-direction:column; gap:var(--s-2); }
.stat-value { font-size:var(--fs-28); font-weight:600; color:var(--white); letter-spacing:-.02em; }
.stat-label { font-size:var(--fs-12); font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--white-50); }

/* Swap card */
.hero-card { display:flex; justify-content:center; }
.swap-card {
  width:100%; max-width:440px;
  background:var(--onyx-800); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s-7); display:flex; flex-direction:column; gap:var(--s-5);
}
.swap-title { font-size:var(--fs-18); font-weight:600; color:var(--white); margin-bottom:var(--s-2); }
.field { display:flex; flex-direction:column; gap:var(--s-3); }
.field label {
  font-size:var(--fs-12); font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--white-50);
}
.field-row {
  display:flex; align-items:center; gap:var(--s-4);
  background:var(--onyx-700); border-radius:var(--r-md); padding:var(--s-4) var(--s-5);
}
.field-row input { flex:1; color:var(--white); font:500 var(--fs-18)/1.2 "Inter",sans-serif; min-width:0; }
.field-row input[readonly] { color:var(--white-70); }

/* Asset selector button */
.asset-btn {
  display:inline-flex; align-items:center; gap:var(--s-3);
  height:36px; padding:0 var(--s-4); border-radius:var(--r-sm);
  background:var(--onyx-600); color:var(--white);
  font-size:var(--fs-14); font-weight:600; flex-shrink:0;
  transition:background-color var(--tx);
}
.asset-btn:hover { background:var(--line-hi); }
.asset-btn svg { color:var(--white-50); flex-shrink:0; }
.asset-mark {
  width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--white); flex-shrink:0;
}
.asset-code { letter-spacing:.02em; }

.swap-flip {
  align-self:center; width:32px; height:32px; border-radius:50%;
  background:var(--onyx-700); color:var(--white-70);
  display:inline-flex; align-items:center; justify-content:center;
  transition:color var(--tx), background-color var(--tx);
}
.swap-flip:hover { color:var(--indigo); background:var(--onyx-600); }

.swap-meta {
  display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); background:var(--onyx-700); border-radius:var(--r-md);
}
.swap-meta-row { display:flex; justify-content:space-between; align-items:center; }
.swap-meta-label { font-size:var(--fs-12); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--white-50); }
.swap-meta-value { font-size:var(--fs-13); font-weight:500; color:var(--white-90); font-variant-numeric:tabular-nums; }
.route-value { color:var(--white); font-weight:600; }

/* Sections */
.section { padding:var(--s-10) 0; border-top:1px solid var(--line); }
.section-alt { background:var(--onyx-800); }
.section-head { text-align:center; max-width:680px; margin:0 auto var(--s-9); }
.section-head-left { text-align:left; margin-left:0; margin-right:0; }
.section-lead { margin-top:var(--s-5); color:var(--white-70); font-size:var(--fs-18); }

/* Partners */
.partners-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-5); }
.partner-card {
  display:flex; align-items:center; gap:var(--s-5);
  padding:var(--s-6); background:var(--onyx-800); border-radius:var(--r-lg);
  transition:background-color var(--tx);
}
.partner-card:hover { background:var(--onyx-700); }
.partner-card img { width:40px; height:40px; object-fit:contain; border-radius:var(--r-sm); padding:4px; flex-shrink:0; }
.partner-card span { font-size:var(--fs-14); font-weight:500; color:var(--white); }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-6); }
.step-card {
  background:var(--onyx-900); border-radius:var(--r-lg); padding:var(--s-7);
  display:flex; flex-direction:column; gap:var(--s-4);
}
.step-num { font-size:var(--fs-14); font-weight:600; letter-spacing:.08em; color:var(--indigo); }
.step-card p { color:var(--white-70); font-size:var(--fs-14); }

/* Blog */
.blog-list { display:flex; flex-direction:column; }
.blog-row { display:flex; flex-direction:column; gap:var(--s-4); padding:var(--s-7) 0; border-top:1px solid var(--line); }
.blog-row:first-child { border-top:0; padding-top:0; }
.blog-row:last-child  { padding-bottom:0; }
.blog-meta { font-size:var(--fs-12); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--white-50); }
.blog-row h2 { font-size:var(--fs-28); line-height:1.25; }
.blog-row h2 a { transition:color var(--tx); }
.blog-row h2 a:hover { color:var(--indigo); }
.blog-row p { color:var(--white-70); font-size:var(--fs-16); max-width:64ch; }

/* FAQ */
.faq-wrap { max-width:820px; }
.faq-list { display:flex; flex-direction:column; gap:var(--s-4); }
.faq-item {
  background:var(--onyx-800); border-radius:var(--r-md); padding:var(--s-5) var(--s-6);
  transition:background-color var(--tx);
}
.faq-item:hover, .faq-item[open] { background:var(--onyx-700); }
.faq-item summary {
  list-style:none; cursor:pointer; font-weight:500; font-size:var(--fs-16); color:var(--white);
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-5);
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:var(--fs-22); color:var(--indigo); font-weight:400; line-height:1; }
.faq-item[open] summary::after { content:"−"; }
.faq-item p { margin-top:var(--s-4); color:var(--white-70); font-size:var(--fs-14); }

/* Footer */
.site-footer { border-top:1px solid var(--line); background:var(--onyx-800); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:var(--s-5); padding:var(--s-7) var(--s-6); }
.footer-brand { display:inline-flex; align-items:center; gap:var(--s-3); color:var(--white); font-weight:600; }
.footer-meta { font-size:var(--fs-12); color:var(--white-50); }

/* Modal */
body.modal-open { overflow:hidden; }
.modal { position:fixed; inset:0; z-index:50; display:flex; align-items:flex-start; justify-content:center; padding:var(--s-9) var(--s-5); }
.modal[hidden] { display:none; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.modal-panel {
  position:relative; width:100%; max-width:420px; max-height:calc(100vh - var(--s-10));
  background:var(--onyx-800); border:1px solid var(--line); border-radius:var(--r-lg);
  display:flex; flex-direction:column; overflow:hidden;
}
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:var(--s-5) var(--s-6); }
.modal-head h3 { font-size:var(--fs-16); font-weight:600; color:var(--white); }
.modal-close {
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); color:var(--white-70); background:var(--onyx-700);
  transition:color var(--tx), background-color var(--tx);
}
.modal-close:hover { color:var(--white); background:var(--onyx-600); }
.modal-search { display:flex; align-items:center; gap:var(--s-3); padding:var(--s-4) var(--s-6); }
.modal-search svg { color:var(--white-50); flex-shrink:0; }
.modal-search input { flex:1; height:28px; color:var(--white); font-size:var(--fs-14); font-weight:500; }
.modal-search input::placeholder { color:var(--white-50); }

.asset-list { flex:1; overflow-y:auto; padding:var(--s-3) 0; }
.asset-list li {
  display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:var(--s-4);
  padding:var(--s-3) var(--s-6); cursor:pointer; color:var(--white-90);
  transition:background-color 100ms ease;
}
.asset-list li:hover, .asset-list li[aria-selected="true"] { background:var(--onyx-700); color:var(--white); }
.asset-list .asset-mark { width:28px; height:28px; font-size:var(--fs-13); }
.asset-row-name { font-size:var(--fs-14); font-weight:500; }
.asset-row-code { font-size:var(--fs-12); font-weight:600; letter-spacing:.06em; color:var(--white-50); }
.asset-empty { padding:var(--s-6); text-align:center; font-size:var(--fs-13); color:var(--white-50); }

/* Responsive */
@media (max-width:1040px) {
  .nav { gap:var(--s-5); }
  .order-search input { width:150px; }
}
@media (max-width:880px) {
  h1 { font-size:var(--fs-40); }
  h2 { font-size:var(--fs-28); }
  .hero-inner { grid-template-columns:1fr; gap:var(--s-8); }
  .partners-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps { grid-template-columns:1fr; }
  .nav { display:none; }
  .hero-stats { flex-wrap:wrap; gap:var(--s-6); }
}
@media (max-width:560px) {
  .container { padding:0 var(--s-5); }
  .hero { padding:var(--s-9) 0 var(--s-8); }
  .section { padding:var(--s-9) 0; }
  .partners-grid { grid-template-columns:1fr; }
  .hero-cta { flex-direction:column; align-items:stretch; }
  .footer-inner { flex-direction:column; text-align:center; }
  .order-search { display:none; }
  .modal-panel { max-width:none; width:calc(100vw - var(--s-6)); }
}