@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root { color: #17201f; background: #f5f8f7; font-family: 'DM Sans', sans-serif; font-synthesis: none; --mint: #62d6bd; --teal: #169d89; --ink: #17201f; --muted: #74817f; --line: #e1e9e7; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: linear-gradient(180deg, #fbfdfc 0, #f4f8f7 62%, #eef5f3 100%); color: var(--ink); overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(22,157,137,.28); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
.ambient { position: fixed; border-radius: 50%; pointer-events: none; filter: blur(2px); opacity: .58; z-index: -1; }
.ambient-one { width: 480px; height: 480px; top: 85px; left: -260px; background: radial-gradient(circle, rgba(98,214,189,.19), transparent 70%); }
.ambient-two { width: 620px; height: 620px; top: 210px; right: -360px; background: radial-gradient(circle, rgba(119,178,255,.12), transparent 70%); }
header { height: 76px; padding: 0 max(28px, calc((100vw - 1240px)/2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(217,228,225,.85); background: rgba(251,253,252,.82); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; font-family: Manrope, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .08em; }
.brand b { color: var(--teal); }
.brand-symbol { width: 30px; height: 28px; position: relative; display: inline-block; }
.brand-symbol i { position: absolute; width: 8px; height: 24px; border-radius: 5px; background: var(--ink); transform: rotate(35deg); top: 2px; }
.brand-symbol i:nth-child(1) { left: 3px; height: 15px; top: 10px; background: var(--mint); }.brand-symbol i:nth-child(2) { left: 11px; }.brand-symbol i:nth-child(3) { left: 20px; height: 15px; background: var(--teal); }
nav { display: flex; gap: 36px; font-size: 14px; color: #667370; }
nav a { padding: 28px 0 25px; position: relative; }
nav a:hover, nav a.active { color: var(--ink); }
nav a.active:after { content: ''; position: absolute; height: 2px; border-radius: 2px; background: var(--mint); left: 0; right: 0; bottom: 0; }
.header-actions { display: flex; gap: 10px; align-items: center; }
.wallet-balances { height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.9); font-size: 10px; color: var(--muted); }
.wallet-balances span { display: grid; gap: 1px; }
.wallet-balances b { color: var(--ink); font: 700 11px Manrope; max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.network-picker { position: relative; }
.network-button, .wallet-button { height: 42px; border-radius: 11px; padding: 0 14px; border: 1px solid var(--line); background: white; color: var(--ink); display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 13px; }
.wallet-button { background: #192220; color: white; border-color: #192220; padding: 0 17px; }
.status-dot { width: 7px; height: 7px; background: #38c7a9; border-radius: 50%; box-shadow: 0 0 0 4px rgba(56,199,169,.1); }.status-dot.muted { background: #aeb9b7; box-shadow: none; }
.network-menu { display: none; position: absolute; top: 49px; right: 0; width: 210px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 15px 45px rgba(25,48,43,.14); }
.network-menu.open { display: block; }
.network-menu button { width: 100%; border: 0; background: transparent; border-radius: 9px; padding: 10px; display: grid; grid-template-columns: 12px 1fr 20px; gap: 9px; text-align: left; cursor: pointer; color: var(--ink); align-items: center; }
.network-menu button:hover, .network-menu button.selected { background: #f3f8f6; }.network-menu small { display: block; color: var(--muted); margin-top: 2px; }.network-menu b { color: var(--teal); }
main { max-width: 1100px; margin: 0 auto; padding: 0 28px 90px; }
.hero { text-align: center; padding: 72px 0 38px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .17em; color: #4d6661; display: flex; align-items: center; justify-content: center; gap: 9px; }.eyebrow span { width: 22px; height: 1px; background: var(--mint); }
.hero h1 { font-family: Manrope, sans-serif; font-size: clamp(45px, 6vw, 68px); line-height: 1.03; letter-spacing: -.055em; margin: 17px 0 18px; }.hero h1 em { font-style: normal; color: var(--teal); }
.hero p { color: #6b7977; font-size: 16px; line-height: 1.7; margin: 0; }
.bridge-card { width: min(100%, 586px); margin: 0 auto; background: rgba(255,255,255,.95); border: 1px solid #dce7e4; box-shadow: 0 24px 70px rgba(31,67,59,.1), 0 2px 6px rgba(31,67,59,.04); border-radius: 24px; padding: 25px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 23px; }.card-head h2 { margin: 0 0 4px; font: 700 19px Manrope; letter-spacing: -.02em; }.card-head p { margin: 0; color: var(--muted); font-size: 12px; }.security-pill { color: #168b78; background: #eaf9f5; border: 1px solid #d4f2ea; font-size: 11px; font-weight: 700; padding: 7px 10px; border-radius: 20px; display: flex; align-items: center; gap: 5px; }
.notice { padding: 11px 13px; display: flex; gap: 9px; border-radius: 11px; background: #fff8e9; border: 1px solid #f5e5bc; margin-bottom: 15px; color: #8a6423; font-size: 12px; }.notice div { display: flex; flex-direction: column; gap: 2px; }.notice span { opacity: .8; }
.notice.demo { background: #eef8ff; border-color: #d8eaf6; color: #35647d; }
.field-label { display: flex; justify-content: space-between; color: #7a8785; font-size: 11px; margin: 0 3px 8px; }
.token-input { min-height: 82px; border: 1px solid #dce7e4; border-radius: 14px; background: #fbfdfc; display: flex; align-items: center; justify-content: space-between; padding: 14px; transition: .2s; }.token-input:focus-within { border-color: #76d9c4; box-shadow: 0 0 0 3px rgba(98,214,189,.12); }.token-input.output { background: #f3f7f6; }
.token-select { display: flex; align-items: center; gap: 10px; min-width: 190px; }.token-select > span:last-child { display: flex; flex-direction: column; gap: 3px; }.token-select strong { font: 700 15px Manrope; }.token-select small { color: #80908d; font-size: 10px; }
.token-mark, .mini-token { display: grid; place-items: center; border-radius: 50%; color: white; font: 800 16px Manrope; width: 38px; height: 38px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }.token-mark.violet, .mini-token.violet { background: linear-gradient(145deg, #835bd7, #5934aa); }.token-mark.cyan, .mini-token.cyan { background: linear-gradient(145deg, #4ed3c1, #119982); }.mini-token.neutral { background: linear-gradient(145deg, #94a4a1, #5d6e6b); }
.amount-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }.amount-wrap input { width: 150px; border: 0; outline: 0; background: transparent; text-align: right; font: 600 25px Manrope; color: var(--ink); min-width: 0; }.amount-wrap input::placeholder { color: #b5bfbd; }.amount-output { font: 600 25px Manrope; color: #6c7977; }
.max-button { border: 0; color: #168f7c; background: #e5f7f2; border-radius: 7px; font-size: 9px; font-weight: 800; padding: 5px 6px; cursor: pointer; }
.swap-divider { height: 18px; position: relative; display: grid; place-items: center; }.swap-divider:before { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: #edf1f0; }.swap-divider button { z-index: 1; width: 35px; height: 35px; border-radius: 10px; border: 4px solid white; box-sizing: content-box; display: grid; place-items: center; background: #1c2826; color: white; cursor: pointer; transition: transform .2s; }.swap-divider button:hover { transform: rotate(180deg); }
.rate-row { display: flex; justify-content: space-between; padding: 17px 3px; font-size: 11px; color: #7b8886; }.rate-row strong { color: #465350; font-weight: 600; }
.route-box { border: 1px solid #e4ebe9; background: #fbfcfc; border-radius: 13px; padding: 13px 14px; }.route-heading { display: flex; justify-content: space-between; color: #879390; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 13px; }.route-heading span:last-child { color: #4e6762; background: #edf4f2; padding: 3px 6px; border-radius: 5px; }
.route-line { display: flex; align-items: center; }.mini-token { width: 27px; height: 27px; font-size: 11px; flex: 0 0 auto; }.route-line > div { display: flex; flex-direction: column; margin-left: 7px; }.route-line strong { font-size: 11px; }.route-line small { font-size: 8px; color: #8c9896; margin-top: 1px; }
.route-path { flex: 1; min-width: 65px; display: flex; align-items: center; justify-content: center; position: relative; color: #7b8d89; margin: 0 8px; }.route-path i { position: absolute; height: 1px; background: #dce5e3; left: 2px; right: 2px; }.route-path svg { z-index: 1; background: #fbfcfc; padding: 2px; box-sizing: content-box; }.route-path small { position: absolute; top: 15px; background: #fbfcfc; padding: 0 4px; white-space: nowrap; }.route-path.compact { min-width: 52px; }
.primary-action { width: 100%; height: 51px; border: 0; border-radius: 12px; margin-top: 17px; background: #192321; color: white; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 13px; cursor: pointer; transition: .2s; box-shadow: 0 8px 20px rgba(25,35,33,.12); }.primary-action:hover:not(:disabled) { background: #263532; transform: translateY(-1px); }.primary-action:disabled { background: #aab4b2; cursor: not-allowed; box-shadow: none; }.consent { text-align: center; color: #9aa5a3; font-size: 9px; margin: 10px 0 0; }
.demo-result { margin-top: 14px; padding: 12px 14px; border: 1px solid #ccecdf; background: #f0fbf7; color: #176d5e; border-radius: 11px; display: grid; gap: 3px; font-size: 12px; }.demo-result span { color: var(--ink); font-weight: 600; }.demo-result small { color: #71817e; }
.transaction-confirm { margin-top: 14px; padding: 14px; border: 1px solid #f0d8a1; background: #fffbf2; border-radius: 12px; display: grid; gap: 10px; font-size: 12px; }.transaction-confirm > strong { color: #76571d; }.transaction-confirm dl { margin: 0; display: grid; gap: 6px; }.transaction-confirm dl div { display: flex; justify-content: space-between; gap: 12px; }.transaction-confirm dt { color: var(--muted); }.transaction-confirm dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }.transaction-confirm label { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); line-height: 1.4; cursor: pointer; }.transaction-confirm input { margin-top: 2px; accent-color: var(--teal); }.transaction-confirm small { color: var(--muted); line-height: 1.4; }
.operation { margin-top: 14px; padding: 13px 14px; border: 1px solid #dce7e4; border-radius: 12px; background: #f8fbfa; display: flex; align-items: flex-start; gap: 10px; font-size: 12px; }.operation-dot { width: 9px; height: 9px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: #53bda7; box-shadow: 0 0 0 4px rgba(83,189,167,.12); }.operation > div { min-width: 0; display: grid; gap: 4px; }.operation span { color: var(--muted); line-height: 1.4; }.operation a { width: fit-content; color: #137e6c; font-weight: 700; display: flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }.operation.signing .operation-dot, .operation.submitting .operation-dot { animation: pulse 1.15s infinite; }.operation.error { border-color: #f0cccc; background: #fff7f7; }.operation.error .operation-dot { background: #b65b5b; box-shadow: 0 0 0 4px rgba(182,91,91,.1); }.operation.submitted { border-color: #ccecdf; background: #f0fbf7; }
@keyframes pulse { 50% { transform: scale(.65); opacity: .55; } }
.trust-grid { width: min(100%, 800px); margin: 35px auto 95px; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }.trust-grid article { display: flex; gap: 11px; padding: 12px; }.trust-grid svg { color: #35af99; flex: 0 0 auto; }.trust-grid div { display: flex; flex-direction: column; gap: 4px; }.trust-grid strong { font-size: 11px; }.trust-grid span { color: #83908e; font-size: 9px; line-height: 1.5; }
.how { border-top: 1px solid #dce6e4; padding-top: 65px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; }.section-kicker { color: #2da68f; font-size: 10px; letter-spacing: .15em; font-weight: 700; }.how h2 { font: 700 31px Manrope; letter-spacing: -.04em; margin: 10px 0 13px; }.how > div > p { color: var(--muted); line-height: 1.7; font-size: 13px; max-width: 410px; }.facts { display: grid; gap: 17px; }.facts div { display: grid; grid-template-columns: 34px 1fr; align-items: start; padding-bottom: 17px; border-bottom: 1px solid #e1e9e7; }.facts span { color: #35ad97; font: 700 11px Manrope; }.facts p { display: flex; flex-direction: column; margin: 0; color: #7d8987; font-size: 11px; gap: 5px; }.facts strong { color: var(--ink); font: 700 13px Manrope; }
footer { min-height: 68px; padding: 0 max(28px, calc((100vw - 1240px)/2)); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #dce6e4; color: #84918e; font-size: 10px; }footer a { display: flex; gap: 5px; align-items: center; color: #59716c; }
.toast { position: fixed; left: 50%; bottom: 25px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #1a2523; color: white; border-radius: 10px; padding: 12px 16px; font-size: 12px; box-shadow: 0 10px 35px rgba(0,0,0,.2); transition: .25s; z-index: 30; max-width: calc(100vw - 30px); text-align: center; }.toast.show { opacity: 1; transform: translate(-50%,0); }.toast.error { background: #833c3c; }
@media (max-width: 760px) { header { padding: 0 17px; }.brand span:last-child, nav, .network-button svg { display: none; }.network-button { padding: 0 11px; }.wallet-button span { display: none; }.wallet-button { padding: 0 12px; }.hero { padding-top: 52px; }.hero p br { display: none; }.bridge-card { padding: 18px; border-radius: 19px; }.token-select { min-width: 145px; }.amount-wrap input { width: 90px; font-size: 20px; }.amount-output { font-size: 20px; }.route-path { margin: 0 3px; }.route-path small { display: none; }.trust-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 65px; }.how { grid-template-columns: 1fr; gap: 30px; padding-top: 48px; } footer { padding: 20px; flex-direction: column; gap: 8px; text-align: center; } }
@media (max-width: 430px) { main { padding-left: 14px; padding-right: 14px; }.hero h1 { font-size: 43px; }.token-select { min-width: 128px; }.token-mark { width: 33px; height: 33px; }.token-select small { max-width: 85px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.route-line > div { display: none; }.route-path.compact { min-width: 35px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (max-width: 760px) { .wallet-balances { position: absolute; top: 77px; right: 12px; height: 36px; box-shadow: 0 5px 18px rgba(25,48,43,.08); } }