:root{--blue:#5ec8ff;--orange:#f7931a;--line:rgba(94,200,255,.28)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#000;color:#fff;font-family:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.65;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(ellipse at 70% 0%,rgba(94,200,255,.16),transparent 55%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%235ec8ff' stroke-opacity='.22' stroke-width='1'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%235ec8ff' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E");
-webkit-mask-image:linear-gradient(160deg,#000 0%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(160deg,#000 0%,rgba(0,0,0,.35) 100%)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.side{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:270px;padding:28px 22px;overflow-y:auto;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;padding-bottom:22px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.brand svg{width:54px;height:54px;flex:none}
.brand span{color:var(--orange);font-weight:700;font-size:1.25rem}
.side nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-bottom:1px solid rgba(94,200,255,.12);border-left:3px solid transparent;transition:color .15s,border-color .15s,background .15s}
.side nav a:hover{color:var(--blue);border-left-color:var(--blue);background:rgba(94,200,255,.06)}
.side nav a.active{color:var(--orange);border-left-color:var(--orange)}
.mi{width:26px;height:26px;flex:none}
.side .ic{stroke-width:4}
.side .fill{fill:var(--orange)}
.side nav a.active .ic:not(.ac){stroke:var(--orange)}

main{margin-left:270px;padding:64px 40px 80px}
.wrap{max-width:1080px;margin:0 auto}
.hero{text-align:center;margin-bottom:56px}
h1{color:var(--orange);font-weight:800;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:20px}
.lead{font-size:1.08rem;max-width:64ch;margin:0 auto 28px}
.text{max-width:62ch;margin:0 auto;color:#fff}

.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:56px}
.tile{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:10px;text-align:center;border:1px solid var(--line);background:rgba(94,200,255,.04);transition:border-color .2s,background .2s}
.tile:hover{border-color:var(--orange);background:rgba(247,147,26,.06)}
.tile svg{width:44%;height:auto}
.tile b{font-weight:600;font-size:clamp(.78rem,1.15vw,1rem);line-height:1.3}
.ic{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ac{stroke:var(--orange)}
.fill{fill:var(--orange);stroke:none}

.back{display:inline-block;margin-top:40px;color:var(--blue);border-bottom:1px solid var(--blue)}
.back:hover{color:var(--orange);border-color:var(--orange)}
.sub h1{text-align:left}
.sub .text{margin:0}

@media(max-width:860px){
.side{position:static;width:auto;border-right:0;border-bottom:1px solid var(--line)}
main{margin-left:0;padding:40px 20px 60px}
}
@media(max-width:700px){.grid{grid-template-columns:repeat(2,1fr);gap:14px}.tile b{font-size:.95rem}}

.side nav{margin-bottom:22px}
.don{margin-top:auto;display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--orange);color:var(--orange);font-weight:700;transition:background .15s}
.don svg{width:22px;height:22px;flex:none;fill:var(--orange)}
.don:hover,.don.active{background:rgba(247,147,26,.14)}
@media(max-width:860px){.side{display:block}.don{margin-top:18px}}