:root { color-scheme:dark; --bg:#080c0e; --panel:#0e1418; --ink:#f0f4f4; --muted:#94a4aa; --accent:#69efb2; --line:#243037; font-family:Arial,Helvetica,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:35px; }
body { margin:0; background:var(--bg); color:var(--ink); }
a { color:inherit; text-underline-offset:4px; }
button,input { font:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.sr-only,.skip:not(:focus) { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip:focus { position:fixed; z-index:10; top:16px; left:16px; padding:16px; background:var(--accent); color:var(--bg); }
.site-header { height:100px; display:flex; justify-content:space-between; align-items:center; padding:0 5vw; border-bottom:1px solid #ffffff08; }
.brand-mark { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:25px; font-weight:700; letter-spacing:-1px; }
.brand-mark>span { align-self:flex-start; padding-top:5px; font-size:10px; font-weight:400; }
.site-header nav { display:flex; gap:35px; font-size:14px; color:#a8b4bb; }
.site-header nav a { text-decoration:none; transition:color .2s; }
.site-header nav a:hover { color:var(--accent); }
.header-cta { font-size:13px; text-decoration:none; border:1px solid #3b4d47; padding:13px 17px; border-radius:5px; transition:border-color .2s,background .2s; }
.header-cta:hover { border-color:var(--accent); background:#69efb20b; }
.header-cta span { margin-left:20px; color:var(--accent); }
.hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(405px,.83fr) minmax(670px,1.28fr); align-items:center; gap:45px; padding:70px 0 65px 6vw; min-height:740px; overflow:hidden; }
.hero-grid { position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 82% 53%,#19413365,transparent 56%),linear-gradient(#ffffff02 1px,transparent 1px),linear-gradient(90deg,#ffffff02 1px,transparent 1px); background-size:auto,68px 68px,68px 68px; mask-image:linear-gradient(90deg,transparent,#000 70%); }
.hero-copy { max-width:515px; padding-bottom:12px; animation:enter .65s both; }
.eyebrow { display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.14em; font-weight:600; color:var(--accent); margin:0 0 20px; }
.status-dot { width:5px; height:5px; background:var(--accent); border-radius:50%; display:inline-block; flex:none; }
h1 { font-size:clamp(64px,5.8vw,92px); font-weight:500; letter-spacing:-.073em; line-height:1; margin:0 0 23px; }
h1>span { color:var(--accent); }
.hero h2 { font-size:clamp(40px,3.6vw,57px); line-height:1.08; letter-spacing:-.048em; margin:0 0 25px; font-weight:500; }
.hero h2 em { font-style:normal; color:var(--accent); }
.intro { font-size:17px; line-height:1.7; color:#a6b3ba; margin:0 0 29px; }
form { max-width:455px; scroll-margin-top:100px; }
.signup-row { display:flex; padding:5px; border:1px solid #3b4c46; background:#0e1717; border-radius:6px; transition:border-color .2s,box-shadow .2s; }
.signup-row:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px #69efb210; }
input { min-width:0; width:100%; flex:1; padding:13px 10px; border:0; background:transparent; color:var(--ink); font-size:14px; }
input::placeholder { color:#95a6a5; }
input:focus-visible { outline-offset:-3px; }
button { border:0; border-radius:3px; padding:15px 16px; background:var(--accent); color:#0a2119; white-space:nowrap; font-weight:600; font-size:13px; cursor:pointer; transition:background .2s; }
button:hover { background:#a0ffd0; }
button>span { display:inline-block; margin-left:12px; transition:transform .2s; }
button:hover>span { transform:translate(2px,-2px); }
button:disabled { opacity:.6; cursor:wait; }
.consent { color:#88999c; font-size:11px; line-height:1.6; margin:12px 0 0; }
#form-status { color:var(--accent); font-size:14px; line-height:1.5; margin:12px 0 0; }
#form-status:empty { display:none; }
#form-status[data-error="true"] { color:#ffb9b0; }
.trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.hero-note { margin-top:29px; font-size:12px; letter-spacing:.025em; color:#829690; }
.hero-note>span { color:var(--accent); font-size:19px; margin-right:8px; }
.product-stage { width:800px; max-width:calc(100% + 55px); padding-right:20px; transform:perspective(1500px) rotateY(-5deg) rotateX(2deg); transform-origin:left center; animation:preview-in .9s .13s both; }
.preview-label { display:flex; align-items:center; gap:10px; margin:0 0 15px; font-size:10px; color:#93ada5; letter-spacing:.14em; }
.preview-line { height:1px; width:25px; background:#69efb270; }
.sample-label { margin-left:auto; margin-right:5px; color:#aebbb9; letter-spacing:0; font-size:11px; }
.app-window { border:1px solid #3b5048; border-radius:10px; overflow:hidden; background:#10171c; box-shadow:0 35px 100px #000a,0 0 70px #46d7950b; }
.app-topbar { height:48px; border-bottom:1px solid #273137; background:#121b1e; display:flex; align-items:center; justify-content:space-between; padding:0 18px; }
.app-logo { font-size:16px; font-weight:600; letter-spacing:-.6px; display:flex; gap:7px; align-items:center; }
.app-address { font-size:10px; color:#72878b; }
.app-user { font-size:10px; border-radius:50%; color:#c0d9cf; background:#293a35; width:23px; height:23px; display:grid; place-items:center; }
.app-body { display:flex; }
.app-sidebar { width:132px; flex:none; border-right:1px solid #222e33; padding:20px 10px; display:flex; flex-direction:column; gap:7px; background:#0e161a; font-size:10px; color:#7b9097; }
.sidebar-label { font-size:8px; letter-spacing:.12em; margin:1px 8px 9px; color:#586e75; }
.app-sidebar>span:not(.sidebar-label) { display:flex; align-items:center; gap:8px; padding:9px 7px; white-space:nowrap; }
.app-sidebar .selected { color:#8cf0bf; background:#1d352d; border-radius:4px; }
.app-sidebar small { font-size:6px; border:1px solid #3c494a; border-radius:3px; padding:2px; }
.sidebar-bottom { margin-top:auto; padding:13px 4px 0; font-size:8px; display:flex; gap:6px; align-items:center; }
.app-main { padding:25px 23px 15px; flex:1; min-width:0; }
.app-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.app-heading p { font-size:8px; letter-spacing:.15em; color:#667d85; margin:0 0 8px; }
.app-heading h3 { font-size:21px; letter-spacing:-.035em; font-weight:500; margin:0; }
.period { font-size:9px; border:1px solid #29383f; padding:7px 9px; border-radius:4px; color:#abbac0; }
.period>span { margin-left:12px; }
.app-tabs { display:flex; gap:25px; align-items:center; margin-top:23px; padding-bottom:10px; border-bottom:1px solid #26353b; font-size:9px; color:#788d95; }
.app-tabs .active { position:relative; color:#bfdbd2; }
.app-tabs .active::after { content:''; height:2px; background:var(--accent); position:absolute; bottom:-11px; left:0; right:0; }
.chain-filter { margin-left:auto; }
.chain-filter>span { margin-left:6px; }
table { width:100%; border-collapse:collapse; text-align:left; table-layout:auto; font-variant-numeric:tabular-nums; }
th { color:#6f858d; font-size:8px; font-weight:400; padding:14px 8px 9px; white-space:nowrap; }
td { font-size:11px; border-bottom:1px solid #25323988; padding:9px 8px; color:#b6c7cc; }
.rank { font-size:9px; color:#648078; padding-left:8px; }
.channel { display:flex; align-items:center; gap:9px; color:#deeaeb; font-size:11px; white-space:nowrap; }
.channel small { display:block; font-size:8px; color:#6f878f; margin-top:4px; }
.avatar { display:grid; place-items:center; width:27px; height:27px; border-radius:7px; font-size:9px; color:#9cd6c0; background:#254238; }
.avatar-02 { background:#303744; color:#b4c7e3; }.avatar-03 { background:#293f45; color:#a5d3dc; }.avatar-04 { background:#413c2c; color:#d9cc9b; }
.positive { color:#69dba5; }.negative { color:#d68c8c; }
.sparkline { width:77px; height:30px; display:block; }
.sparkline polyline { fill:none; stroke:#64cda0; stroke-width:1.5; }.sparkline.down polyline { stroke:#bd777b; }
.chart-heading { display:flex; justify-content:space-between; align-items:center; margin-top:23px; font-size:12px; }
.chart-heading>div { display:flex; align-items:center; gap:9px; }
.token-avatar { display:grid; place-items:center; width:26px; height:26px; background:#31443a; color:#b4d4ba; border-radius:50%; font-size:12px; }
.chart-heading small { display:block; margin-top:4px; font-size:8px; color:#7d959b; }
.chart-heading>.positive { text-align:right; }
.price-chart { display:block; width:100%; height:auto; margin-top:10px; }
.chart-grid { stroke:#27353b; stroke-width:.5; stroke-dasharray:3 5; fill:none; }
.volume { stroke:#356154; stroke-width:9; opacity:.5; }
.candle-up { stroke:#77d8ac; fill:#77d8ac; }.candle-down { stroke:#af747c; fill:#af747c; }
.price-chart g:not(.chart-grid):not(.volume) { stroke-width:1; }
.call-marker { stroke:#aac5be; stroke-width:.7; stroke-dasharray:3 4; }
.call-tag { fill:#223e32; stroke:#43775f; stroke-width:.5; }.call-text { fill:#a8e1c3; font-size:8px; }
.chart-axis { display:flex; justify-content:space-between; font-size:8px; color:#627d84; margin-top:3px; }
.app-footnote { height:29px; background:#111e1d; border-top:1px solid #2d3d37; display:flex; align-items:center; gap:7px; padding:0 17px; color:#849e95; font-size:9px; }
.app-footnote .status-dot { width:4px; height:4px; }
.preview-caption { display:flex; justify-content:space-between; font-size:8px; letter-spacing:.13em; color:#4d7164; margin:19px 18px 0; }
.chain-section { padding:30px 6vw 37px; border-top:1px solid #25372f; border-bottom:1px solid #25372f; background:#0e1614; }
.chain-heading { display:flex; gap:20px; align-items:center; margin-bottom:25px; }
.chain-heading h2 { font-size:14px; color:#b2c1bb; font-weight:400; margin:0; }
.chain-heading>span { font-size:9px; letter-spacing:.13em; color:#62786e; border-left:1px solid #354c40; padding-left:20px; }
.chain-list { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.chain-list>span { display:flex; gap:9px; align-items:center; font-size:16px; color:#c0cac5; white-space:nowrap; }
.chain-symbol { font-style:normal; font-size:25px; font-family:system-ui,sans-serif; line-height:1; width:28px; color:#a4b6ab; text-align:center; }
.base-symbol { background:#a4b6ab; color:#0e1614; width:22px; height:22px; border-radius:50%; font-size:20px; margin-right:6px; }
.chain-list .more-chains { font-size:12px; color:#748b7d; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:64px; padding:70px 6vw 66px; }
.feature-icon { color:#6be2ac; letter-spacing:.13em; font-size:10px; }
.features h2 { font-size:26px; letter-spacing:-.035em; font-weight:500; line-height:1.2; margin:23px 0 17px; }
.features p { color:#8fa2a4; font-size:15px; line-height:1.7; margin:0; max-width:330px; }
.final-cta { display:flex; align-items:center; justify-content:space-between; gap:30px; border-top:1px solid var(--line); margin:0 6vw; padding:45px 0 48px; }
.final-cta .eyebrow { font-size:9px; margin-bottom:14px; }
.final-cta h2 { font-size:34px; font-weight:400; letter-spacing:-.035em; margin:0; }
.final-cta>a { border-bottom:1px solid var(--accent); color:var(--accent); padding:14px 0; font-size:14px; text-decoration:none; }
.final-cta>a>span { display:inline-block; margin-left:50px; transition:transform .2s; }.final-cta>a:hover>span { transform:translate(3px,-3px); }
footer { padding:25px 6vw 32px; border-top:1px solid var(--line); color:#6f858b; font-size:11px; }
.footer-line { display:flex; align-items:center; gap:24px; }.footer-brand { color:#b5c4c6; font-size:23px; font-weight:600; letter-spacing:-1px; }.footer-line>a { margin-left:auto; text-decoration:none; color:#b4c4c9; }
details { margin-top:20px; max-width:800px; }summary { cursor:pointer; width:fit-content; }details p { font-size:13px; line-height:1.7; }
@keyframes enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes preview-in { from { opacity:0; translate:28px 10px; } to { opacity:1; translate:0 0; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }