:root { color-scheme:dark; --bg:#080909; --panel:#121414; --line:#292c29; --text:#f4f5f0; --muted:#b4b9ae; --lime:#c7fa58; --surface-raised:#191c18; --surface-hover:#22281e; --surface-tint:#151b0f; --border-strong:#3b4332; --border-hover:#819966; --on-accent:#11150b; --accent-hover:#dafc98; --text-secondary:#dce0d5; --text-subtle:#aab49e; --art-memepad:#241b33; --art-trading:#231d28; --art-story:#c8b7ff; --shadow-color:#0008; --accent-glow:#bafa3c10; --radius:24px; --width:1184px; --font-body:Roobert,Arial,sans-serif } @font-face { font-family:Roobert; src:url('/assets/c214033693f9cd-roobert-regular.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:optional } @font-face { font-family:Roobert; src:url('/assets/f0b397253b5bcc-roobert-bold.woff2') format('woff2'); font-style:normal; font-weight:600 900; font-display:optional } * { box-sizing:border-box } html { scroll-behavior:smooth; scroll-padding-top:100px } body { margin:0; background:var(--bg); color:var(--text); font:400 17px/1.6 var(--font-body); -webkit-font-smoothing:antialiased } body,button,input,summary { font-family:var(--font-body) } a { color:inherit; text-decoration:none } button,input { font-size:inherit } button,summary { cursor:pointer } button { color:inherit } img { display:block; max-width:100%; height:auto } svg { display:block } h1,h2,h3,p { margin:0 } h1,h2,h3 { font-weight:700; line-height:1.08; letter-spacing:-.035em } p { color:var(--muted) } a,button,summary,input { touch-action:manipulation } a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid var(--lime); outline-offset:5px } ::selection { background:var(--lime); color:var(--bg) } [hidden] { display:none!important } .wrap { width:min(var(--width),calc(100% - 64px)); margin-inline:auto } .skip { position:fixed; top:-100px; left:20px; z-index:100; background:var(--lime); color:var(--bg); padding:12px 20px; border-radius:8px } .skip:focus { top:12px } .site-header { position:relative; z-index:20; border-bottom:1px solid var(--line) } .header-inner { min-height:94px; display:flex; align-items:center; gap:40px } .brand { display:inline-flex; gap:10px; align-items:center; font-size:31px; line-height:1; letter-spacing:-.08em; font-weight:700; flex-shrink:0; min-height:44px } .brand img { width:32px; height:40px } .desktop-nav { display:flex; align-items:center; gap:28px; margin-left:auto; font-size:15px } .nav-link { display:flex; align-items:center; min-height:44px; color:var(--text-secondary) } .nav-link:hover { color:var(--lime) } .button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:52px; padding:14px 22px; border:1px solid var(--line); border-radius:12px; font-size:15px; font-weight:700; line-height:1.4; background:var(--surface-raised); color:var(--text); transition:background .18s,border-color .18s } .button:hover { border-color:var(--border-hover); background:var(--surface-hover) } .button.primary { background:var(--lime); border-color:var(--lime); color:var(--on-accent) } .button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover) } .button.small { min-height:44px; padding:10px 18px } .arrow { font-size:20px; line-height:1; flex-shrink:0 } .language { position:relative } .language summary { display:flex; gap:8px; align-items:center; min-height:44px; list-style:none; color:var(--text-secondary); font-size:15px } .language summary::-webkit-details-marker,.mobile-menu summary::-webkit-details-marker,.faq-item summary::-webkit-details-marker { display:none } .language summary:after { content:'⌄'; margin-left:3px } .language[open] summary:after { transform:rotate(180deg) } .language-panel { position:absolute; top:calc(100% + 10px); right:0; width:210px; background:var(--surface-raised); border:1px solid var(--border-strong); padding:8px; border-radius:14px; box-shadow:0 16px 40px var(--shadow-color); z-index:40 } .language-panel a { display:block; padding:10px 14px; font-size:15px; border-radius:8px } .language-panel a:hover,.language-panel a[aria-current] { background:var(--surface-hover); color:var(--lime) } .mobile-menu { display:none } .hero { padding:72px 0 64px; display:grid; grid-template-columns:1.15fr 1fr; gap:55px; align-items:center; min-height:714px } h1 { font-size:clamp(42px,4.7vw,68px); text-wrap:balance } .hero h1 { max-width:660px } .hero h1 span { color:var(--lime) } .hero-copy>p { max-width:505px; font-size:18px; line-height:1.55; margin-top:25px } .hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; max-width:580px } .hero-actions .button { padding-inline:17px } .hero-note { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); margin-top:20px } .hero-note svg { width:17px; height:17px; color:var(--lime) } .hero-visual { position:relative; display:grid; place-items:center; min-width:0; min-height:590px; background:radial-gradient(ellipse at 50% 65%,var(--accent-glow),transparent 62%) } .hero-visual:before { content:''; position:absolute; width:360px; height:360px; border:1px solid var(--border-strong); transform:rotate(45deg); border-radius:28px } .hero-visual:after { content:''; position:absolute; width:460px; height:460px; border:1px solid var(--line); transform:rotate(45deg); border-radius:40px; z-index:-1 } .hero-phone { width:278px; position:relative; z-index:2; filter:drop-shadow(0 20px 28px var(--shadow-color)) } .section-heading { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:end; margin-bottom:36px } .section-heading h2 { font-size:clamp(32px,3.5vw,46px); max-width:550px } .section-heading p { max-width:540px; font-size:17px } .products { padding:80px 0; border-top:1px solid var(--line) } .product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px } .product-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); overflow:hidden; display:flex; flex-direction:column } .product-art { height:290px; overflow:hidden; display:flex; justify-content:center; align-items:flex-start; padding-top:27px; border-bottom:1px solid var(--line); background:var(--surface-tint) } .product-card:first-child .product-art { background:var(--art-memepad) } .product-card:nth-child(2) .product-art { background:var(--art-trading) } .product-art img { width:196px } .product-copy { padding:27px; flex:1; display:flex; flex-direction:column; align-items:flex-start } .product-topline { display:flex; justify-content:space-between; align-items:center; width:100%; margin-bottom:17px } .product-topline img { width:26px; height:26px; object-fit:contain } .product-copy h3 { font-size:27px; margin-bottom:14px; letter-spacing:-.025em } .product-copy p { font-size:15px; line-height:1.6; margin-bottom:22px } .text-link { display:inline-flex; gap:12px; align-items:center; min-height:44px; font-size:14px; font-weight:700; color:var(--lime); margin-top:auto } .text-link:hover { text-decoration:underline; text-underline-offset:5px } .cross-chain { display:flex; gap:26px; align-items:center; border-top:1px solid var(--line); padding:32px 0 0; margin-top:34px } .cross-chain img { width:38px; height:38px } .cross-chain h3 { font-size:22px; letter-spacing:-.025em; max-width:320px } .cross-chain p { margin-left:auto; max-width:520px; font-size:16px } .feature-story { padding:56px 0 86px; display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:center } .story-visual { background:var(--art-story); border-radius:var(--radius); height:450px; overflow:hidden; display:flex; justify-content:center; padding-top:40px } .story-visual img { width:248px; align-self:flex-start } .story-copy h2 { font-size:clamp(32px,3.5vw,48px); max-width:520px } .story-copy p { margin:25px 0; max-width:470px; font-size:18px } .tags { display:flex; flex-wrap:wrap; gap:9px } .tags span { font-size:12px; padding:7px 11px; border:1px solid var(--border-strong); border-radius:6px; color:var(--text-secondary) } .faq-section { border-top:1px solid var(--line); padding:80px 0 88px; display:grid; grid-template-columns:.72fr 1.28fr; gap:72px } .faq-heading h2 { font-size:clamp(32px,3.5vw,45px); max-width:330px } .faq-heading p { margin-top:23px } .faq-list { min-width:0 } .faq-item { border-bottom:1px solid var(--line) } .faq-item:first-child { border-top:1px solid var(--line) } .faq-item summary { list-style:none; display:flex; gap:24px; align-items:center; justify-content:space-between; font-weight:700; font-size:17px; line-height:1.45; padding:23px 0; min-height:70px } .faq-item summary:after { content:'+'; font:400 26px/1 Arial,sans-serif; color:var(--lime); flex-shrink:0 } .faq-item[open] summary:after { content:'−' } .faq-item[open] summary { color:var(--lime) } .faq-answer { padding:0 28px 25px 0; color:var(--muted); font-size:16px; line-height:1.7 } .faq-answer a { color:var(--lime); text-decoration:underline; text-underline-offset:3px } .cta { background:var(--lime); border-radius:var(--radius); color:var(--on-accent); padding:48px 52px; display:flex; gap:44px; align-items:center; justify-content:space-between; margin-bottom:70px } .cta h2 { font-size:clamp(30px,3vw,44px); max-width:660px } .cta .button { background:var(--on-accent); border-color:var(--on-accent); color:white; flex-shrink:0 } .cta .button:hover { background:var(--surface-hover) } .site-footer { border-top:1px solid var(--line); padding:48px 0 28px } .footer-top { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:48px } .footer-brand p { max-width:315px; margin-top:21px; font-size:14px } .footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:1px; font-size:14px } .footer-links a { display:flex; min-height:44px; align-items:center; color:var(--muted) } .footer-links a:hover { color:var(--lime) } .footer-label { font-size:11px; color:var(--text-subtle); letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px } .socials { display:flex; gap:8px; margin-top:20px } .socials a { display:grid; place-items:center; min-width:44px; min-height:44px; background:var(--surface-raised); border:1px solid var(--line); border-radius:50% } .socials a:hover { border-color:var(--border-hover) } .socials img { width:19px; height:19px; object-fit:contain } .footer-bottom { border-top:1px solid var(--line); margin-top:32px; padding-top:22px; display:flex; justify-content:space-between; font-size:12px; color:var(--text-subtle) } .page-heading { padding:68px 0 36px; max-width:950px } .page-heading h1 { font-size:clamp(38px,4.8vw,64px) } .page-heading p { margin-top:22px } .breadcrumbs { display:flex; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--text-subtle); margin-bottom:25px } .breadcrumbs a { min-height:28px } .breadcrumbs a:hover { color:var(--lime) } .blog-tools { display:flex; gap:20px; align-items:flex-end; justify-content:space-between; margin:0 0 25px } .search { display:grid; gap:7px; width:min(370px,100%); font-size:13px; color:var(--muted) } .search input { background:var(--panel); border:1px solid var(--border-strong); color:var(--text); min-height:48px; border-radius:10px; padding:12px 16px; width:100%; outline-offset:3px } .search input::placeholder { color:var(--text-subtle) } .filter-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px } .filter-button { background:var(--panel); border:1px solid var(--border-strong); border-radius:24px; min-height:44px; padding:9px 17px; font-size:13px } .filter-button:hover { border-color:var(--border-hover) } .filter-button[aria-pressed=true] { background:var(--lime); color:var(--on-accent); border-color:var(--lime) } .result-count { color:var(--text-subtle); font-size:13px } .blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 22px } .blog-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--panel); transition:border-color .18s } .blog-card:hover { border-color:var(--border-hover) } .blog-card>a { display:flex; flex-direction:column; height:100% } .blog-card img { width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--surface-raised) } .blog-card-copy { padding:22px; display:flex; flex-direction:column; flex:1 } .article-meta { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; line-height:1.5; color:var(--text-subtle); margin-bottom:14px } .article-meta span { color:var(--lime) } .blog-card h2 { font-size:23px; letter-spacing:-.025em; line-height:1.2; margin-bottom:22px } .blog-card .text-link { font-size:13px } .blog-bottom { text-align:center; padding:36px 0 74px } .empty-state { border:1px solid var(--line); padding:40px; border-radius:16px; margin:32px 0 } .article-layout { padding-bottom:70px } .article-heading { max-width:980px; margin:auto; padding:58px 0 35px } .article-heading h1 { font-size:clamp(35px,4vw,57px); line-height:1.1; max-width:960px } .article-heading .article-meta { margin:22px 0 0; font-size:14px } .article-cover { width:100%; max-height:520px; object-fit:cover; border:1px solid var(--line); border-radius:22px; margin-bottom:40px } .prose { max-width:min(70ch,40rem); margin:auto; font-size:18px; line-height:1.75; overflow-wrap:anywhere; color:var(--muted) } .prose p,.prose ul,.prose ol,.prose blockquote,.prose figure { margin:0 0 1.25em } .prose p { color:inherit } .prose h2 { font-size:30px; line-height:1.25; color:var(--text); margin:1.65em 0 .6em; letter-spacing:-.025em } .prose h3 { font-size:23px; color:var(--text); margin:1.5em 0 .6em; line-height:1.3; letter-spacing:-.02em } .prose h4 { font-size:20px; color:var(--text) } .prose strong { color:var(--text) } .prose a { color:var(--lime); text-decoration:underline; text-underline-offset:3px } .prose img { border-radius:14px; margin:24px auto; width:auto; height:auto; max-width:100% } .prose li { padding-left:6px; margin-bottom:8px } .prose figure { max-width:100% } .prose blockquote { border-left:3px solid var(--lime); padding:16px 22px; background:var(--surface-tint) } .prose table { border-collapse:collapse; width:100%; font-size:15px } .prose td,.prose th { border:1px solid var(--line); padding:10px } .legal .page-heading { max-width:800px; margin:auto } .legal .prose { padding-bottom:64px } .error-page { min-height:60vh; padding:80px 0 } .error-page h1 { margin-bottom:25px } .error-page p { margin-bottom:30px } @media(min-width:1440px) { .hero { gap:80px } .hero-visual { overflow:visible } } @media(max-width:1050px) { .header-inner { gap:20px } .desktop-nav { gap:18px } .hero { gap:25px; grid-template-columns:1.1fr 1fr; min-height:640px } .hero-visual { min-height:520px } .hero-visual:before { width:280px; height:280px } .hero-visual:after { width:340px; height:340px } .hero-phone { width:245px } .product-copy { padding:22px } .product-copy h3 { font-size:24px } .feature-story { gap:50px } .faq-section { gap:40px } .hero-actions .button { padding-inline:13px; font-size:14px } .cross-chain { align-items:flex-start } .cross-chain p { max-width:40% } } @media(max-width:800px) { .wrap { width:calc(100% - 40px) } .header-inner { min-height:78px; justify-content:space-between } .brand { font-size:28px } .brand img { width:27px; height:34px } .desktop-nav { display:none } .mobile-menu { display:block } .mobile-menu>summary { list-style:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--bg) } .mobile-menu>summary:hover,.mobile-menu[open]>summary { color:var(--lime); border-color:var(--lime) } .menu-icon path { transition:transform .2s ease-out,opacity .2s ease-out } .menu-line-top { transform-origin:12px 6px } .menu-line-bottom { transform-origin:12px 18px } .mobile-menu[open] .menu-line-top { transform:translateY(6px) rotate(45deg) } .mobile-menu[open] .menu-line-middle { opacity:0 } .mobile-menu[open] .menu-line-bottom { transform:translateY(-6px) rotate(-45deg) } .mobile-panel { position:absolute; left:0; right:0; top:100%; padding:12px max(18px,calc((100% - 760px)/2)) 24px; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 20px 32px var(--shadow-color); display:grid; gap:0; max-height:calc(100dvh - 78px); overflow-y:auto; overscroll-behavior:contain } .mobile-panel .nav-link { min-height:60px; border-bottom:1px solid var(--line); font-size:21px; font-weight:700; color:var(--text) } .mobile-panel .nav-link:hover { color:var(--lime) } .mobile-panel .language-panel { position:static; width:100%; margin-top:0; box-shadow:none } .mobile-panel .language summary { min-height:56px; color:var(--muted) } .hero { padding:42px 0 34px; grid-template-columns:1fr; gap:16px; text-align:center; min-height:0 } .hero-copy { max-width:640px; margin:auto } h1 { font-size:clamp(39px,7.8vw,60px); line-height:1.06 } .hero-copy>p { font-size:17px; max-width:530px; margin:22px auto 0 } .hero-actions { justify-content:center; margin:25px auto 0; max-width:620px } .hero-note { justify-content:center; margin-top:17px } .hero-visual { max-width:420px; min-height:460px; margin:8px auto 0; width:100%; overflow:clip } .hero-phone { width:216px } .hero-visual:before { width:260px; height:260px } .hero-visual:after { width:330px; height:330px } .products { padding:52px 0 } .section-heading { grid-template-columns:1fr; gap:21px; margin-bottom:28px } .section-heading h2 { max-width:570px } .section-heading p { max-width:620px } .product-grid { gap:13px } .product-art { height:235px } .product-art img { width:165px } .product-copy { padding:18px } .product-copy h3 { font-size:22px } .product-copy p { font-size:14px } .cross-chain { flex-wrap:wrap; gap:18px; padding-top:25px; margin-top:28px } .cross-chain h3 { flex:1; max-width:none } .cross-chain p { max-width:none; width:100%; margin:0 } .feature-story { gap:28px; padding:28px 0 56px } .story-visual { height:370px; padding-top:28px } .story-visual img { width:215px } .story-copy h2 { font-size:33px } .story-copy p { font-size:16px; margin:21px 0 } .faq-section { grid-template-columns:1fr; gap:30px; padding:52px 0 } .faq-heading h2 { max-width:none } .faq-heading p { margin-top:15px } .cta { padding:32px; gap:28px; margin-bottom:50px; flex-wrap:wrap } .cta h2 { max-width:550px } .footer-top { gap:30px; grid-template-columns:1.2fr 1fr } .footer-top>div:last-child { grid-column:2; grid-row:1/3 } .footer-brand p { max-width:330px } .footer-bottom { gap:20px; flex-wrap:wrap } .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px } .page-heading { padding:44px 0 30px } .page-heading h1 { font-size:46px } .article-heading { padding-top:40px } .article-heading h1 { font-size:42px } .article-cover { border-radius:15px } .prose { font-size:17px } .blog-tools { align-items:center } .article-layout { padding-bottom:48px } } @media(max-width:560px) { .wrap { width:calc(100% - 36px) } .hero { padding-top:36px } .hero-copy>p { font-size:16px; line-height:1.55 } .hero-actions { display:grid; grid-template-columns:1fr; gap:12px; width:100%; max-width:390px } .hero-actions .button { font-size:15px; min-height:52px; padding:14px 18px; gap:12px; width:100% } .hero-visual { margin-top:10px; min-height:440px } .hero-phone { width:207px } .hero-note { font-size:12px } .product-grid { grid-template-columns:1fr; gap:20px } .product-card { display:grid; grid-template-columns:1fr 1fr; border-radius:18px; min-height:295px } .product-art { height:100%; border-right:1px solid var(--line); border-bottom:0; padding-top:40px; order:2; align-items:center; overflow:hidden } .product-art img { min-width:180px; max-width:180px; align-self:flex-start } .product-copy { padding:22px 19px } .product-copy h3 { font-size:24px } .product-copy p { font-size:14px; line-height:1.6; margin-bottom:16px } .product-topline { margin-bottom:18px } .product-topline img { width:24px; height:24px } .product-copy .text-link { font-size:12px; line-height:1.4; gap:7px } .section-heading h2 { font-size:34px } .section-heading p { font-size:16px } .cross-chain h3 { font-size:21px } .cross-chain p { font-size:15px } .feature-story { grid-template-columns:1fr; gap:26px } .story-visual { height:300px; order:2 } .story-visual img { width:223px } .story-copy h2 { font-size:34px } .story-copy p { max-width:500px } .faq-heading h2 { font-size:34px } .faq-item summary { font-size:16px; padding:22px 0; gap:20px } .faq-answer { font-size:15px; padding-right:8px } .cta { padding:29px 25px; border-radius:18px } .cta h2 { font-size:31px; line-height:1.12 } .cta .button { width:100% } .footer-top { grid-template-columns:1fr 1fr; gap:25px } .footer-brand { grid-column:1/-1 } .footer-top>div:last-child { grid-column:auto; grid-row:auto } .site-footer { padding-top:35px } .footer-bottom { font-size:13px } .blog-grid { grid-template-columns:1fr } .blog-card-copy { padding:22px } .blog-card h2 { font-size:24px } .blog-tools { flex-direction:column; align-items:flex-start; gap:16px } .search { width:100% } .filter-buttons { gap:7px } .filter-button { font-size:12px; padding-inline:14px } .page-heading h1 { font-size:40px } .article-heading h1 { font-size:35px } .article-heading .article-meta { font-size:13px } .article-cover { margin-bottom:28px } .prose { font-size:17px } .prose h2 { font-size:27px } .prose h3 { font-size:23px } } @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } *,*:before,*:after { animation:none!important; transition:none!important } } .footer-bottom>a,.breadcrumbs>a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px } .language-hint { font-size:12px; font-weight:400; white-space:nowrap } .nav-link { gap:8px } .footer-links a { display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px } .hero-note { flex-wrap:wrap } .hero-copy,.product-copy,.story-copy,.footer-top>div { min-width:0 } .product-copy h3,.story-copy h2 { overflow-wrap:anywhere } .language-panel a { min-height:44px } .header-inner { flex-wrap:nowrap } .nav-link { min-width:44px; } .product-copy { overflow-wrap:anywhere; hyphens:auto; }