:root{
--bg:#071428;
--panel:#0b1f3a;
--text:#e9f0ff;
--darktext:rgb(6, 19, 39);
--darktexthighlight:rgb(55, 66, 82);
--muted:#9fb3d9;
--blue:#3fa9f5;
--indigo:#5b6cff;
--teal:#27d3c3;
--active: #FF5722;
--important: #FF5722;
--visited:#5b6cff;
--line: rgba(255,255,255,.14);
--shadow: 0 20px 60px rgba(0,0,0,.45);
--radius: 18px;
--max: 1180px;
}

*{box-sizing:border-box}
body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
background: linear-gradient(180deg, #050f20, var(--bg));
color:var(--text);
line-height:1.55;
}

a{color:inherit; text-decoration:none}
a:link {color: var(--muted); text-decoration: underline}
a:hover, a:focus {color: var(--text)}
a:visited {color: var(--visited)}
a:active {color: var(--active)}

.container{max-width:var(--max); margin:0 auto; padding:0 20px}

header{
position:sticky; top:0; z-index:20;
background: rgba(7,20,40,.8);
backdrop-filter: blur(10px);
border-bottom:1px solid var(--line);
}
.header-inner{height:72px; display:flex; align-items:center; justify-content:space-between}
.brand{display:grid; grid-template-columns:0.1fr 0.9fr; gap:12px; align-items:center; font-weight:900}
.brand a{font-size:22px; color:var(--muted); text-decoration: none}
a:hover.brand, a:focus.brand {color:var(--text)}
a:visited.brand {color: var(--muted)}
.logo{width:38px; height:38px; border-radius:12px; background: linear-gradient(135deg, var(--blue), var(--indigo))}

.btn{padding:12px 16px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.06); font-weight:800}
.btn-row{height:60px}
a:link.btn{text-decoration: none}
a:visited.btn {color: var(--muted)}
a:hover.btn, a:focus.btn{color: var(--text); border:1px solid var(--text)}
.btn.primary{background: linear-gradient(135deg, var(--blue), var(--indigo)); color: var(--darktext); border:1px solid transparent}
a:hover.btn.primary, a:focus.btn.primary{color: var(--darktexthighlight)}
a:visited.btn.primary{color: var(--darktext)}

nav.page-nav {display:flex; gap:18px; align-items:center; height:60px;}
nav.page-nav a {color:var(--muted); font-weight:700; font-size:14px}
nav.page-nav a[aria-current="page"] {background: var(--blue); color: var(--darktext) }
nav.page-nav a[aria-current="page"]:visited {color: var(--darktext) }
nav.page-nav a[aria-current="page"]:hover {color: var(--darktexthighlight) }
nav.page-nav a:hover {color:var(--text)}
nav.page-nav a:visited {color: var(--muted)}
nav.page-nav span.btn {color:var(--text); background:var(--darktexthighlight); font-weight:700; font-size:14px}
nav.page-nav ol {
    display: flex;
    float: left;
    white-space: nowrap;
    height: 60px;
    width: 100%;
    list-style-type: none;
    margin: auto;
    align-items: center;
    justify-content: center;
}
nav.page-nav ol .btn {padding:9px 12px; margin: 2px; border-radius:10px;}
nav.page-nav li {float: left; line-height: 46px;}
.hero{padding:72px 0 44px}
.hero h1{
font-size:clamp(48px,6vw,72px);
line-height:1.02;
margin:0 0 10px;
letter-spacing:-.02em;
}
.hero h2{
font-size:clamp(18px,2.2vw,22px);
font-weight:600;
color:var(--muted);
margin:0 0 20px;
max-width:80ch;
}
.hero-cta{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap}

.top-blocks{margin-top:44px}
.blocks{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.block{border-radius:var(--radius); padding:22px; color:#041225; box-shadow:var(--shadow)}
.block h3{margin:0 0 6px; font-size:20px}
.block p{margin:0; font-size:15px}

.block.blue p{color:#111111}
.block.indigo p{color:#111111}
.block.teal p{color:#111111}
.block.blue{background:linear-gradient(135deg, #9dd7ff, var(--blue))}
.block.indigo{background:linear-gradient(135deg, #c6ccff, var(--indigo))}
.block.teal{background:linear-gradient(135deg, #bff5ef, var(--teal))}

section{padding:64px 0}
h2.section-title{margin:0 0 12px; font-size:clamp(26px,3.5vw,38px)}
section p{color:var(--muted); max-width:78ch}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.card{border:1px solid var(--line); background: rgba(255,255,255,.05); border-radius:var(--radius); padding:20px}
.card h3{margin:0 0 6px; font-size:17px}
.card p{color:var(--muted)}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom: 30px;}
.step{background: rgba(255,255,255,.05); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.step b{display:block; margin-bottom:6px}

/* Release notes */
.release-grid{display:grid; grid-template-columns: 1.6fr .9fr; gap:18px; align-items:start}
.release-list{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.release-aside{margin-top:14px}
.note{
border:1px solid var(--line);
background: rgba(255,255,255,.05);
border-radius:16px;
padding:16px 16px;
}
.note-top{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.release-top{display:grid; grid-template-columns: 12fr 1fr; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items: center;}
.badge{display:inline-flex; max-height: 32px; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid var(--line); font-weight:800; font-size:12px; color:var(--text)}
.note h3{margin:10px 0 6px; font-size:16px}
.note ul{margin:10px 0 0 0; color:var(--muted)}
.note li{margin:6px 0}

footer{border-top:1px solid var(--line); padding:40px 0 44px; color:var(--muted)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr; grid-template-rows: 2; gap:5px 22px}
.footer-copyright{grid-row:2; grid-column: 1 / span 2}
footer a{color:var(--blue); font-weight:800}
footer a:visited{color:var(--blue); font-weight:800}

.menu-container {
    display: none;
}

.menu-toggle {
    position: relative;
    border:1px solid var(--line);
    color: var(--muted);
    background: linear-gradient(135deg, var(--indigo), var(--teal));
    border-radius:8px;
    padding:2px 2px;
    top: 0;
    right: 0;
    z-index: 22;
}

.menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 21;
    
    width: 100vw;
    height: 100vh;
    
    background: rgba(0,0,0,0.95);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;

    position: fixed;
    right: 0;
    top: 64px;
    padding: 0;
    margin: 0;

    text-align: right;
    align-items: baseline;
}

.menu-item {
    padding: 5px 20px;
    font-size: 18px;
    display: block;
    text-align: left;
    max-width: 1fr;
}

.menu-item a {
    text-decoration: none;
    color: var(--text);
    display: block;
}

.menu-item .btn {
    background-color: rgb(255, 255, 255, .02);
    width: fit-content;
}

.page-nav.condensed {
    display: none;
}

.no-scroll {
    overflow: hidden;
    height: 100%;
}

@media (max-width:900px){
    .blocks,.grid3,.steps,.release-grid{grid-template-columns:1fr}

    header .page-nav {
        display: none;
    }

    .menu-container {
        display: block;
    }

    .menu.active {
        display: block;
        transform: translateX(0%);
    }

    .page-nav.expanded {
        display: none;
    }

    .page-nav.condensed {
        display: block;
    }

    .page-nav.condensed .btn-row {
        display: flex;
        margin: 40px;
        justify-content: space-evenly;
    }

    .page-nav.condensed .btn {
        height: 38px;
        width: 60px;
        padding: 6px;
        text-align: center;
    }
}

@media (max-width: 900px) and (max-height: 600px) {
    .menu-grid {grid-template-columns:repeat(2, 1fr)}
}

@media (max-width: 900px) and (max-height: 480px) {
    .menu-grid {grid-template-columns:repeat(3, 1fr)}
}