:root{
--bg:#0d0d18;
--surface:#171b26;
--text:#d5e9ff;
--muted:#9597a8;
--orange:#ff9700;
--green:#48b499;
--blue:#0098df;
--border:#2a303f;
color-scheme:dark}

*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:88px}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:"Century Gothic","Trebuchet MS",Arial,sans-serif;
font-size:15px;
line-height:1.55}
button,input{
font:inherit}
button,a,input{
-webkit-tap-highlight-color:transparent}
button{
cursor:pointer}
button{
color:inherit}
a{
color:inherit;
text-decoration:none}
button{
border:0}
button:focus-visible,a:focus-visible,summary:focus-visible{
outline:2px solid var(--blue);
outline-offset:5px}
input:focus-visible{
outline:0}
button:hover,a:hover{
filter:brightness(1.15)}
.container{
width:min(1160px,calc(100% - 64px));
margin:auto}
.site-header{
height:82px;
background:#151b23;
border-bottom:1px solid #353d46;
position:relative;
z-index:5}
.nav-wrap{
height:100%;
width:min(1320px,calc(100% - 60px));
margin:auto;
display:flex;
align-items:center;
gap:42px}
.logo{
display:inline-flex;
align-items:center;
font-family:Arial,sans-serif;
font-size:25px;
letter-spacing:1px;
white-space:nowrap;
line-height:1;
font-weight:600}
.logo span:first-child{
color:var(--orange)}
.logo span:last-child{
color:var(--green)}
.logo b{
font-size:37px;
color:var(--green);
margin:0 2px;
line-height:.8;
text-shadow:-5px 5px var(--orange)}
nav{
display:flex;
align-items:center;
gap:25px;
font-size:14px;
flex:1;
color:#eee}
nav a:hover,.text-button:hover{
color:var(--blue)}
.text-button{
background:none;
padding:0}
.nav-right{
display:flex;
align-items:center;
gap:25px}
.language{
background:none;
font-size:20px;
display:flex;
align-items:center;
gap:8px;
padding:0}
.language span{
font-size:13px}
.login{
background:none;
border:1px solid #48515c;
border-radius:5px;
padding:8px 20px;
white-space:nowrap}
.menu-toggle{
display:none;
background:none;
padding:4px}
.menu-toggle span{
display:block;
width:19px;
height:3px;
background:white;
margin:4px 0;
border-radius:2px}

.hero{
position:relative;
isolation:isolate;
background:radial-gradient(ellipse at 10% 40%,#1b2441 0,transparent 38%),radial-gradient(ellipse at 86% 55%,#1b2648 0,transparent 43%),#151b23;
min-height:655px;
overflow:hidden}
.hero-content{
position:relative;
z-index:2;
padding-top:46px}
.hero h1{
text-align:center;
font-size:45px;
line-height:1.25;
font-weight:600;
letter-spacing:.3px;
margin:0 0 87px}
.hero-art{
position:absolute;
z-index:-1;
bottom:0;
left:0;
right:0;
height:330px;
background:linear-gradient(180deg,#151b23 0%,transparent 35%,#0d0d18 100%);
opacity:.9;
mask-image:linear-gradient(to bottom,transparent,black 25%)}
.hero:after{
content:"";
position:absolute;
bottom:0;
left:0;
right:0;
height:120px;
background:linear-gradient(transparent,var(--bg));
z-index:1}
.stars{
position:absolute;
inset:0;
pointer-events:none;
background-image:radial-gradient(1px 1px at 10% 10%,#fff 60%,transparent 90%),radial-gradient(1px 1px at 42% 30%,#d5e9ff 60%,transparent 90%),radial-gradient(1px 1px at 72% 58%,white 60%,transparent 90%),radial-gradient(1px 1px at 90% 80%,white 60%,transparent 90%);
background-size:183px 170px,271px 210px,327px 291px,147px 270px;
opacity:.45}
.exchange-grid{
display:grid;
grid-template-columns:1fr 58px 1fr;
align-items:center;
gap:18px}
.field-label{
display:flex;
justify-content:space-between;
font-size:13px;
padding:0 16px 6px}
.send{
color:var(--orange)}
.receive{
color:var(--green)}
.amount-box{
height:62px;
border:1px solid currentColor;
display:flex;
align-items:center;
border-radius:6px;
background:#090d13d9;
padding:0 16px;
transition:box-shadow .2s}
.amount-box:focus-within{
box-shadow:0 0 0 3px #ffffff10}
.amount-box input{
background:none;
border:0;
width:100%;
min-width:0;
color:inherit;
font-size:28px;
letter-spacing:-.6px}
.currency-select{
display:flex;
align-items:center;
gap:7px;
color:inherit;
background:none;
padding:0 0 0 10px;
font-size:23px;
line-height:1}
.coin{
width:29px;
height:29px;
display:inline-flex;
align-items:center;
justify-content:center;
color:white;
border-radius:50%;
font-family:Arial,sans-serif;
font-size:24px;
font-weight:bold;
flex-shrink:0}
.btc{
background:#f7931a}
.usdt{
background:#48ad96}
.eth{
background:#6579bd;
font-size:24px}
.ltc{
background:#345d9d}
.sol{
background:linear-gradient(135deg,#8c49ef,#51d3b5)}
.trx{
background:#ee3855}
.usdc{
background:#2775ca}
.doge{
background:#bca65c}
.ticker{
display:flex;
flex-direction:column;
align-items:flex-start;
white-space:nowrap}
.ticker small{
font-size:10px;
color:#111;
background:#ed365c;
padding:2px 4px;
border-radius:2px;
margin-top:1px;
align-self:flex-start}
.chevron{
width:0;
height:0;
border-left:4px solid transparent;
border-right:4px solid transparent;
border-top:5px solid currentColor;
margin-left:1px}
.rate-info{
display:flex;
justify-content:space-between;
font-size:12px;
color:#b2b5c0;
padding:8px 16px 0;
gap:10px}
.swap{
width:48px;
background:none;
align-self:center;
padding-top:15px;
display:flex;
flex-direction:column;
gap:0;
line-height:.7;
font-size:33px}
.swap span:first-child{
color:var(--orange)}
.swap span:last-child{
color:var(--green)}
.destination{
margin-top:28px}
.destination>label{
display:block;
margin:0 16px 5px;
font-size:13px;
color:#c5c9d1}
.address-box{
height:52px;
background:#080c12dd;
display:flex;
align-items:center;
border-radius:6px;
padding:0 15px;
border:1px solid transparent}
.address-box:focus-within{
border-color:#485263}
.address-box input{
background:none;
border:0;
color:var(--text);
width:100%;
min-width:0;
font-size:16px}
.address-box input::placeholder{
color:#686c79}
.address-box button{
width:32px;
height:32px;
flex-shrink:0;
background:none;
padding:5px;
color:#e4e7ed}
.address-box svg{
width:22px;
height:22px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round}
#form-error{
font-size:12px;
color:#ff778b;
display:block;
min-height:16px;
padding:2px 15px}
.order-row{
display:flex;
align-items:center;
gap:9px;
margin-top:10px}
.order-label{
font-size:14px;
font-weight:600;
white-space:nowrap;
margin-right:6px}
.rate-toggle{
display:flex;
background:#0c1024b3;
border-radius:6px;
overflow:hidden;
height:48px}
.rate-toggle button{
background:transparent;
color:#9295a6;
border:1px solid transparent;
padding:0 27px;
font-size:14px;
white-space:nowrap}
.rate-toggle button.active{
border-color:var(--blue);
color:var(--blue);
background:#0c1730}
.help{
background:#101329;
width:28px;
height:28px;
border-radius:50%}
.primary{
background:var(--blue);
color:white;
border-radius:5px;
font-weight:bold;
padding:14px 25px;
transition:background .2s}
.primary:hover{
background:#0baaf0}
.exchange-button{
margin-left:auto;
width:220px;
height:48px;
font-size:15px}
.terms{
text-align:center;
color:#9696af;
font-size:12px;
margin-top:12px}
.terms button,.inline-link{
background:none;
color:var(--blue);
padding:0;
font-size:inherit}
.trusted{
padding-top:20px;
padding-bottom:75px}
h2{
font-size:41px;
line-height:1.25;
letter-spacing:.2px;
margin:0 0 42px;
font-weight:600}
.trusted h2{
text-align:center;
font-size:48px}
.benefits{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
text-align:center}
.benefit-icon{
height:90px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:18px}
.benefit-icon svg{
width:80px;
height:80px;
stroke:var(--blue);
stroke-width:3;
fill:none;
stroke-linecap:round;
stroke-linejoin:round}
.exchange-icon svg{
stroke:var(--green)}
.wallet-icon svg{
stroke:var(--orange)}
h3{
font-size:23px;
font-weight:500;
margin:0 0 14px}
.benefits p{
color:var(--muted);
font-size:16px;
margin:0}

.transactions,.faq-section,.news-section,.guides-section{
padding:48px 0 50px;
border-top:1px solid #ffffff07}
.section-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:35px}
.section-heading h2{
margin:0}
.demo-pill{
font-size:11px;
color:#73b9a5;
background:#48b4990a;
border:1px solid #48b49924;
border-radius:20px;
padding:5px 12px;
white-space:nowrap}
.demo-pill i{
display:inline-block;
background:var(--green);
width:5px;
height:5px;
border-radius:50%;
margin:0 5px 1px 0}
.transaction-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px 20px}
.transaction-row{
display:flex;
align-items:center;
background:#171724;
border:1px solid #242431;
border-radius:7px;
padding:17px 20px;
gap:12px}
.transaction-row .coin{
width:25px;
height:25px;
font-size:19px}
.transaction-time{
font-size:11px;
color:#858697;
flex:1;
white-space:nowrap}
.transaction-amount{
white-space:nowrap;
font-size:14px}
.transaction-arrow{
color:#6b7183;
margin:0 3px}
.transaction-speed{
font-size:12px;
color:#78bba9;
white-space:nowrap;
margin-left:auto}
.demo-note{
font-size:11px;
color:#6d7184;
text-align:center;
margin-top:18px}
.faq-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px}
.faq-section h2{
text-align:center}
.faq-grid details{
border-top:2px solid #232739;
padding-top:20px}
.faq-grid summary{
font-size:19px;
font-weight:600;
list-style:none;
cursor:pointer;
display:flex;
justify-content:space-between;
gap:10px;
line-height:1.5}
.faq-grid summary::-webkit-details-marker{
display:none}
.faq-grid summary span{
color:var(--blue);
font-size:22px;
transition:transform .2s}
.faq-grid details[open] summary span{
transform:rotate(45deg)}
.faq-grid p{
font-size:14px;
color:#b0b0c0;
line-height:1.8}
.faq-grid .muted{
font-size:11px;
color:#777c91}
.center{
text-align:center;
margin-top:34px}
.outline-button{
border:1px solid var(--blue);
color:var(--blue);
background:none;
padding:11px 28px;
border-radius:5px;
font-size:14px}
.outline-button span{
padding-left:18px}
.slider-controls{
display:flex;
gap:10px}
.slider-controls button{
background:#191b2a;
border:1px solid #303244;
color:#bcc2d6;
border-radius:5px;
width:38px;
height:34px;
font-size:20px}
.card-slider{
display:flex;
gap:24px;
overflow:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none}
.card-slider::-webkit-scrollbar{
display:none}
.article-card{
flex:0 0 calc((100% - 48px)/3);
background:#171824;
border-radius:8px;
overflow:hidden;
border:1px solid #252838;
scroll-snap-align:start}
.article-image{
height:188px;
position:relative;
background-size:cover;
background-position:center}
.article-image:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(transparent,#11132099)}
.article-image span{
position:absolute;
z-index:1;
left:20px;
bottom:15px;
color:white;
font-size:12px;
letter-spacing:2px;
font-weight:bold}
.news-one{
background-color:#252449}
.news-two{
background-color:#193847}
.news-three{
background-color:#31345d}
.article-copy{
padding:22px}
.article-copy time{
font-size:11px;
color:#747d93}
.article-copy h3{
font-size:19px;
line-height:1.5;
margin:9px 0 12px;
font-weight:600}
.article-copy p{
font-size:13px;
line-height:1.8;
color:#979dae;
min-height:94px;
margin-bottom:15px}
.read-link{
color:var(--blue);
background:none;
padding:0;
display:flex;
align-items:center;
gap:18px;
font-size:14px}
.guide-card .article-copy h3{
min-height:58px}
.guide-card .read-link{
margin-top:18px}
.guides-section{
padding-bottom:90px}
footer{
background:#141622;
border-top:1px solid #272a3b;
padding:48px 0 22px}
.footer-grid{
display:grid;
grid-template-columns:2fr repeat(3,1fr);
gap:36px}
.footer-tagline{
font-size:12px;
color:#777e94;
margin:17px 0}
.social-links{
display:flex;
gap:12px}
.social-links a{
border:1px solid #34384d;
width:30px;
height:30px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
color:#98a3bb;
font-family:Arial,sans-serif;
font-weight:bold}
.footer-links{
display:flex;
flex-direction:column;
gap:10px;
font-size:13px;
color:#979daf}
.footer-links h4{
color:#d2d9e9;
font-size:15px;
margin:0 0 7px}
.footer-links button{
background:none;
text-align:left;
padding:0;
color:inherit}
.footer-demo{
font-size:11px;
color:#686e84}
.copyright{
border-top:1px solid #272a3b;
margin-top:36px;
padding-top:22px;
color:#737b91;
font-size:11px;
display:flex;
justify-content:space-between;
gap:20px}
.cookie-banner{
position:fixed;
z-index:10;
bottom:14px;
left:14px;
width:282px;
background:#20284a;
border-radius:6px;
padding:14px;
box-shadow:0 5px 30px #0003;
font-size:13px;
color:white}
.cookie-banner p{
margin:0 0 12px;
line-height:1.5}
.cookie-banner p button{
padding:0;
background:none;
color:var(--green);
font-size:inherit}
.cookie-banner .primary{
width:100%;
padding:10px;
font-size:12px}
.chat-launcher{
position:fixed;
right:22px;
bottom:22px;
width:60px;
height:60px;
background:#0085b8;
border-radius:50% 10px 50% 50%;
z-index:8;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 5px 20px #0004}
.chat-launcher svg{
width:23px;
height:23px;
fill:white;
stroke:#0085b8;
stroke-width:1.5;
stroke-linecap:round}
.toast{
position:fixed;
bottom:100px;
left:50%;
transform:translate(-50%,15px);
background:#243248;
color:white;
border:1px solid #41546d;
padding:12px 20px;
border-radius:7px;
opacity:0;
pointer-events:none;
transition:all .2s;
z-index:30;
max-width:90%;
font-size:13px}
.toast.visible{
opacity:1;
transform:translate(-50%,0)}
dialog{
background:#191e2b;
color:var(--text);
border:1px solid #3b4559;
border-radius:12px;
width:min(480px,calc(100% - 32px));
padding:24px;
max-height:85vh;
box-shadow:0 25px 100px #0008}
dialog::backdrop{
background:#060914b5;
backdrop-filter:blur(5px)}
.dialog-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin-bottom:18px}
.dialog-head h3{
margin:0;
font-size:21px}
.dialog-close{
background:none;
font-size:28px;
color:#9ca6bb;
line-height:1}
.search-input{
width:100%;
padding:12px 15px;
background:#0e1420;
border:1px solid #364358;
border-radius:5px;
margin-bottom:15px;
color:var(--text)}
#currency-list{
max-height:49vh;
overflow:auto}
.currency-option{
width:100%;
display:flex;
align-items:center;
gap:14px;
border-radius:5px;
padding:12px;
background:none;
text-align:left}
.currency-option:hover{
background:#263247}
.currency-option .coin{
width:34px;
height:34px}
.currency-option .currency-code{
margin-left:auto;
color:#8a94aa;
font-size:12px}
.currency-option.selected{
background:#21344a}
.currency-option:disabled{
opacity:.35;
cursor:not-allowed}
.empty-state{
color:var(--muted);
padding:16px;
text-align:center}
#dialog-content{
color:#aeb7ca;
font-size:14px;
line-height:1.8}
#dialog-content h4{
color:var(--text);
margin-bottom:5px}
#dialog-content .primary{
margin-top:18px;
width:100%}
.demo-notice{
background:#0098df13;
border-left:3px solid var(--blue);
padding:12px 14px;
color:#bcd9ef;
margin:18px 0}
.order-preview{
background:#101622;
border-radius:6px;
padding:16px;
overflow-wrap:anywhere}
.order-preview p{
margin:6px 0}
.language-option{
display:block;
width:100%;
background:none;
padding:12px;
border-radius:5px;
text-align:left}
.language-option:hover{
background:#263247}

@media(min-width:1450px){
.hero{
min-height:700px}
.hero h1{
font-size:49px}
.hero-content{
padding-top:60px}
}

@media(max-width:1150px){
.nav-wrap{
gap:20px}
nav{
gap:17px;
font-size:12px}
.logo{
font-size:22px}
.nav-right{
gap:14px}
.login{
padding:8px 12px}
.rate-toggle button{
padding:0 23px}
.exchange-button{
width:190px}
.hero h1{
font-size:40px}
.transaction-row{
padding:15px 14px;
gap:9px}
.transaction-time{
font-size:10px}
.transaction-amount{
font-size:12px}
}

@media(max-width:900px){
.container{
width:calc(100% - 52px)}
.site-header{
height:52px}
.nav-wrap{
width:calc(100% - 38px);
justify-content:space-between;
position:relative}
.menu-toggle{
display:block}
.logo{
font-size:21px}
.logo b{
font-size:31px}
.nav-right .login,.language span{
display:none}
.language{
font-size:20px}
nav{
display:none;
position:absolute;
top:52px;
left:-19px;
right:-19px;
background:#171e2b;
padding:24px;
box-shadow:0 15px 30px #0006;
flex-direction:column;
align-items:flex-start;
font-size:16px;
gap:20px}
nav.open{
display:flex}
.hero{
min-height:603px}
.hero-content{
padding-top:22px}
.hero h1{
font-size:34px;
margin-bottom:57px;
letter-spacing:0}
.exchange-grid{
grid-template-columns:1fr 37px 1fr;
gap:12px}
.amount-box{
height:47px;
padding:0 14px}
.amount-box input{
font-size:23px}
.currency-select{
font-size:18px;
gap:4px;
padding-left:5px}
.coin{
width:24px;
height:24px;
font-size:21px}
.field-label{
font-size:12px}
.rate-info{
font-size:10px;
padding:7px 15px 0}
.swap{
width:37px;
font-size:29px}
.destination{
margin-top:22px}
.address-box{
height:48px}
.address-box input{
font-size:14px}
.order-row{
gap:6px;
margin-top:10px}
.order-label{
font-size:13px;
margin-right:4px}
.rate-toggle{
height:47px}
.rate-toggle button{
padding:0 27px;
font-size:12px}
.exchange-button{
width:145px;
height:47px;
font-size:13px;
padding:10px}
.terms{
font-size:11px;
margin-top:9px}
.hero-art{
height:300px}
.trusted{
padding-top:13px;
padding-bottom:48px}
.trusted h2{
font-size:43px}
.benefits{
gap:22px}
.benefits h3{
font-size:21px}
.benefits p{
font-size:14px}
h2{
font-size:34px}
.transaction-grid{
grid-template-columns:1fr}
.transaction-row{
padding:16px 20px}
.transaction-time{
font-size:12px}
.transaction-amount{
font-size:15px}
.faq-grid{
gap:22px}
.faq-grid summary{
font-size:16px}
.faq-grid p{
font-size:12px}
.article-card{
flex-basis:calc((100% - 24px)/2)}
.article-copy h3{
font-size:17px}
.article-image{
height:170px}
.footer-grid{
grid-template-columns:2fr 1fr 1fr;
gap:25px}
.footer-grid>.footer-links:last-child{
display:none}
.copyright{
flex-direction:column;
gap:8px}
.cookie-banner{
width:282px}
.section-heading{
margin-bottom:26px}
}

@media(max-width:620px){
html{
scroll-padding-top:65px}
.container{
width:calc(100% - 36px)}
.hero h1{
font-size:30px;
line-height:1.3;
margin:0 auto 30px;
max-width:370px}
.hero-content{
padding-top:26px}
.hero{
min-height:795px}
.exchange-grid{
grid-template-columns:1fr;
gap:0}
.amount-box{
height:57px}
.amount-box input{
font-size:26px}
.currency-select{
font-size:21px}
.field-label{
font-size:12px;
padding-left:13px;
padding-right:13px}
.coin{
width:27px;
height:27px;
font-size:23px}
.rate-info{
font-size:11px;
padding:7px 12px 0}
.swap{
align-self:center;
justify-self:center;
height:40px;
padding:0;
width:34px;
transform:rotate(90deg);
font-size:27px;
justify-content:center;
margin:4px 0}
.destination{
margin-top:23px}
.address-box{
height:52px;
padding-left:12px}
.address-box input{
font-size:13px}
.order-row{
flex-wrap:wrap;
gap:8px;
margin-top:12px}
.order-label{
width:100%;
margin-bottom:2px}
.rate-toggle{
flex:1;
height:44px}
.rate-toggle button{
padding:0 10px;
font-size:12px;
flex:1}
.help{
width:27px;
height:27px}
.exchange-button{
width:100%;
margin:9px 0 0;
height:49px;
font-size:15px}
.terms{
line-height:1.6;
padding:0 5px;
font-size:10px}
.hero-art{
height:270px}
.trusted{
padding-top:0;
padding-bottom:36px}
.trusted h2{
font-size:34px;
margin-bottom:30px}
.benefits{
grid-template-columns:1fr;
gap:27px}
.benefits article{
display:grid;
grid-template-columns:75px 1fr;
text-align:left;
column-gap:16px;
align-items:center}
.benefit-icon{
grid-row:1/3;
height:70px;
margin:0}
.benefit-icon svg{
width:65px;
height:65px}
.benefits h3{
font-size:20px;
margin:0 0 5px;
align-self:end}
.benefits p{
font-size:13px;
line-height:1.6;
align-self:start}
.desktop-break{
display:none}
h2{
font-size:28px}
.transactions,.faq-section,.news-section,.guides-section{
padding-top:32px;
padding-bottom:32px}
.section-heading{
gap:8px;
margin-bottom:22px}
.transactions .section-heading h2{
font-size:25px}
.demo-pill{
font-size:9px;
padding:4px 8px}
.transaction-row{
padding:13px 10px;
gap:7px;
flex-wrap:wrap}
.transaction-time{
font-size:10px;
flex:0 0 100%;
margin-bottom:1px}
.transaction-amount{
font-size:13px}
.transaction-speed{
font-size:11px}
.transaction-row .coin{
width:23px;
height:23px;
font-size:18px}
.transaction-grid .transaction-row:nth-child(n+7){
display:none}
.demo-note{
font-size:10px}
.faq-grid{
grid-template-columns:1fr;
gap:17px}
.faq-section h2{
text-align:left;
margin-bottom:24px}
.faq-grid details{
padding-top:15px;
border-top-width:1px}
.faq-grid summary{
font-size:17px}
.faq-grid p{
font-size:13px;
line-height:1.75}
.center{
margin-top:24px}
.outline-button{
font-size:13px;
padding:10px 24px}
.article-card{
flex-basis:86%;
}
.card-slider{
gap:15px}
.article-image{
height:180px}
.article-copy{
padding:19px}
.article-copy h3{
font-size:18px}
.article-copy p{
min-height:0;
font-size:13px}
.guides-section .section-heading h2{
font-size:25px}
.slider-controls{
gap:6px}
.slider-controls button{
width:30px;
height:30px;
font-size:17px}
.guides-section{
padding-bottom:48px}
footer{
padding-top:34px}
.footer-grid{
grid-template-columns:1fr 1fr;
gap:28px 16px}
.footer-grid>div:first-child{
grid-column:1/-1}
.footer-grid>.footer-links:last-child{
display:flex;
grid-column:1/-1}
.footer-tagline{
margin:12px 0}
.copyright{
margin-top:26px;
font-size:10px}
.cookie-banner{
bottom:10px;
left:10px;
width:min(282px,calc(100% - 83px));
padding:12px;
font-size:11px}
.chat-launcher{
width:49px;
height:49px;
right:15px;
bottom:18px}
.toast{
bottom:83px;
min-width:250px;
text-align:center}
dialog{
padding:20px}
.dialog-head h3{
font-size:19px}
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*:before,*:after{
transition:none!important;
animation:none!important}
}


/* Decorative scenery is drawn locally so the page needs no image service. */
.hero-art{
background:radial-gradient(ellipse at 25% 45%,#363a82 0,transparent 53%),radial-gradient(ellipse at 82% 60%,#372d66 0,transparent 48%);
height:330px;
opacity:1;
mask-image:linear-gradient(to bottom,transparent,black 15%)}

.planet{
position:absolute;
border-radius:50%;
box-shadow:inset -25px -15px 35px #080920,inset 3px 3px 8px #e6ddff66,0 0 24px #9c8ff536}

.planet-left{
width:170px;
height:170px;
left:8%;
bottom:102px;
background:radial-gradient(circle at 35% 25%,#66649c,#3b2e63 38%,#181329 75%)}

.planet-right{
width:140px;
height:140px;
right:8%;
bottom:130px;
background:radial-gradient(circle at 30% 30%,#666ea8,#282553 38%,#11102c 78%);
box-shadow:inset 8px 5px 10px #aeb3ff77}

.planet-ring{
width:230px;
height:48px;
position:absolute;
bottom:164px;
right:calc(8% - 45px);
border:1px solid #c6b38377;
border-radius:50%;
transform:rotate(-25deg);
box-shadow:0 0 0 5px #b1a1d207}

.ridge{
position:absolute;
border-radius:50% 50% 0 0;
box-shadow:inset 0 1px #c1a4d425}

.ridge-back{
width:125%;
height:120px;
bottom:38px;
left:-10%;
background:linear-gradient(135deg,#554a81,#38305c 45%,#74608c);
transform:rotate(-7deg)}

.ridge-middle{
width:120%;
height:115px;
bottom:23px;
left:-18%;
background:linear-gradient(15deg,#352f5d,#55456e 60%,#30274e);
transform:rotate(7deg)}

.ridge-front{
width:115%;
height:100px;
bottom:-36px;
right:-10%;
background:linear-gradient(170deg,#64638c,#202043 45%,#0d0d18 85%);
transform:rotate(-3deg)}

.ridge-back:after{
content:"";
position:absolute;
inset:15px 20% 0;
border:1px solid #cfc0ec14;
border-radius:50%;
transform:rotate(-5deg)}

.crystal{
position:absolute;
width:16px;
height:29px;
background:linear-gradient(110deg,#868bb6 0%,#e1faff 30%,#798fdb 48%,#535a91 50%,#a2c5ff 75%,#d6eeff);
clip-path:polygon(50% 0,95% 38%,80% 90%,35% 100%,5% 45%);
filter:drop-shadow(0 0 7px #82b9ff);
transform:rotate(-15deg)}

.crystal-one{
left:28%;
bottom:97px}
.crystal-two{
left:30%;
bottom:87px;
width:11px;
height:22px;
transform:rotate(20deg)}
.crystal-three{
right:23%;
bottom:111px;
width:19px;
height:35px}
.crystal-four{
right:18%;
bottom:126px;
width:14px;
height:25px;
transform:rotate(13deg)}

.article-image{
overflow:hidden;
background-image:none}

.news-one{
background:radial-gradient(ellipse at 70% 20%,#64497c,transparent 60%),repeating-linear-gradient(130deg,transparent 0 34px,#8271c314 35px 36px),#1c1935}

.news-two{
background:radial-gradient(ellipse at 75% 25%,#29656c,transparent 60%),repeating-linear-gradient(45deg,transparent 0 30px,#77c4ca12 31px 32px),#152734}

.news-three{
background:radial-gradient(ellipse at 40% 30%,#3c437a,transparent 70%),repeating-linear-gradient(30deg,transparent 0 30px,#97a3ff20 31px 32px),repeating-linear-gradient(150deg,transparent 0 30px,#97a3ff20 31px 32px),#1c203b}

.news-one:before{
content:"₿";
position:absolute;
width:105px;
height:105px;
right:28px;
top:27px;
border-radius:50%;
border:6px double #e4b862;
background:linear-gradient(135deg,#d3ad57,#765725);
color:#ffe5a0;
font:70px/105px Arial,sans-serif;
text-align:center;
transform:rotate(-20deg);
box-shadow:9px 9px 0 #5f482f,0 0 45px #ac82454d;
text-shadow:2px 3px #6b4d1b}

.news-two:before{
content:"";
position:absolute;
width:82px;
height:123px;
right:45px;
top:20px;
background:conic-gradient(from 30deg at 50% 64%,#a4dbec,#537e9b,#e1fbff,#456981,#87c6d9);
clip-path:polygon(50% 0,100% 62%,50% 100%,0 62%);
filter:drop-shadow(0 0 15px #51dcff)}

.news-three:before{
content:"";
position:absolute;
width:65px;
height:65px;
right:40px;
top:38px;
border:2px solid #b7bfff;
background:linear-gradient(140deg,#9c9ff177,#45538433);
transform:rotate(-30deg) skew(10deg,10deg);
box-shadow:-65px 25px 0 -5px #646baa55,-70px 25px 0 -3px #b0b3ee,28px 60px 0 -12px #686cab77,28px 60px 0 -10px #a1a9e0}

@media(max-width:900px){
.hero-art{
height:300px}
.planet-left{
left:1%;
width:165px;
height:165px;
bottom:85px}
.planet-right{
right:6%;
bottom:112px;
width:130px;
height:130px}
.planet-ring{
right:0;
bottom:150px;
width:210px}
.ridge-back{
bottom:32px}
.ridge-middle{
bottom:15px}
}

@media(max-width:620px){
.hero-art{
height:235px}
.planet-left{
width:130px;
height:130px;
left:-35px;
bottom:56px}
.planet-right{
width:90px;
height:90px;
bottom:85px;
right:3%}
.planet-ring{
width:145px;
height:30px;
bottom:113px;
right:-16px}
.ridge-back{
height:80px;
bottom:22px}
.ridge-middle{
height:75px;
bottom:14px}
.ridge-front{
height:65px;
bottom:-23px}
.crystal-one{
bottom:68px;
left:35%}
.crystal-two{
bottom:60px;
left:39%}
.crystal-three{
bottom:73px;
right:19%}
.crystal-four{
bottom:88px;
right:10%}
}