*, *:before, *:after {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
	background:transparent;
	border:0;
	margin:0;
	padding:0;
	vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,nav,section{
	display:block
}
del {
  text-decoration: line-through;
}
a {
	text-decoration:none;
	color: inherit;
}
a:hover {
	color: inherit;
	text-decoration:none;
}
a:focus, img:focus, button:focus {
    outline: revert !important;
}
a img {
  border: none;
}
img {
  height: auto;
  max-width: 100%;
}
iframe {
  max-width: 100%;
}
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
html:focus-within { 
    scroll-behavior: smooth; 
}
body {
    position:relative;
    margin: 0;
    padding:0;
    border:0;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;  
    width:100%;
    font-family: Inter, Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility;
    color: #e8ecef; 
    background: #0d1117;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.022) 0 1px,
        transparent 1px 64px
        ),
        repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.022) 0 1px,
        transparent 1px 64px
        ),
        linear-gradient(135deg, #0b1c2c 0%, #0d1117 100%);
}
p {
	margin-bottom: 20px;
}
h1,h2,h3,h4,h5,h6 {
  margin: 15px 0 20px;
  font-weight:700;
}
strong, b {
	font-weight: 700;
}
.skip-link{
    position:absolute; 
    left:-9999px; 
    top:auto; 
    width:1px; 
    height:1px; 
    overflow:hidden;
}
.skip-link:focus{
    left:1rem; 
    top:1rem; 
    width:auto; 
    height:auto; 
    padding:.6rem .9rem;
    background:#111827; 
    color:#fff; 
    border:2px solid #4db2ff; 
    border-radius:.5rem;
    z-index:10;
}
.bg{ 
    position:absolute; 
    inset:0; 
    z-index:-1; 
    pointer-events:none;
    overflow:hidden;
}
.corner{ 
    position:absolute; 
    width:min(44vw,560px); 
    height:min(44vw,560px); 
    object-fit:fill; 
    will-change: transform, opacity;
}
.corner.tl{ 
    left:0; 
    top:0;
    transform: translate(-25%, -25%) rotate(20deg);
    opacity:.32;
}
.corner.br{ 
    right:0; 
    bottom:0;
    transform: translate(25%, 25%) rotate(-20deg);
    opacity:.32;
}

main{
    width:min(92vw, 840px);
    padding: clamp(0.625rem, 4vw, 3rem);
    text-align:center;
}

header .logo{
    position:relative;
    overflow:visible; 
    display:flex;
    justify-content:center;
    align-items:center;
    width:88px; 
    height:88px; 
    border:2px solid #e8ecef; 
    border-radius:50%;
    font-weight:700; 
    letter-spacing:.5px; 
    margin: 0 auto 1.75rem;
    font-size: 2.6rem;
}
header .logo .ring{
  position:absolute; 
  inset:0;
  width:100%; 
  height:100%;
  transform-origin:50% 50%;
  shape-rendering:geometricPrecision;
  pointer-events:none;
}

header .logo .arc{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:24 76;
}

header .logo .arc.blue  { 
    stroke:#4DB2FF; 
    stroke-dashoffset:0;
}
header .logo .arc.green { 
    stroke:#1DBF73; 
    stroke-dashoffset:50; 
}

h1{
    position: relative;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.1; 
    margin: 0 0 .4rem; 
    color:#f5f7fa; 
    font-weight:800;
}
h1::after{
  content:"";
  display:block;
  height:3px;
  width:min(56%, 260px);
  margin:3px auto 16px;
  background: linear-gradient(90deg,#4db2ff 0%,#1dbf73 100%);
  border-radius:999px;
  transform: scaleX(0);
  transform-origin:center;
  box-shadow: 0 0 18px rgba(77,178,255,.18);
  opacity:.95;
}

.subtitle{
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color:#1dbf73; 
    font-weight:600; 
    letter-spacing:.02em; 
    margin-bottom: 2rem;
}
p.lead{
    margin: 0 auto 2rem; 
    max-width: 60ch;
    font-size: 1.05rem; 
    line-height: 1.6;
    color:#cfd8df;
}

.contact{
    display:flex; 
    gap: 2rem; 
    justify-content:center; 
    align-items:center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.contact a{
    display:inline-flex; 
    align-items:center; 
    gap:.6rem;
    text-decoration:none; 
    color:#e8ecef; 
    font-size:1.05rem;
    padding:.6rem .9rem; 
    border-radius:.65rem; 
    border:1px solid #999;
    transition: transform .2s ease, 
    border-color .2s ease, 
    background-color .2s ease;
    outline: none;
}
.contact a svg{ 
    width:22px; 
    height:22px; 
    flex: 0 0 22px; 
}
.contact a:hover{ 
    border-color:#2b8bdc; 
    background-color: rgba(77,178,255,.08); 
}
.contact a:focus-visible{ 
    border-color:#4db2ff; 
    box-shadow: 0 0 0 4px rgba(77,178,255,.25); 
}

footer{ 
    margin-top: 2.25rem; 
    font-size:.9rem; 
    color:#98a6b3; 
}
footer small{
    opacity:.65;
    letter-spacing:.2px;
    font-size:.75rem;
}
footer a{ 
    color:#98a6b3; 
    text-decoration: underline; 
    text-decoration-color: rgba(152,166,179,.5); 
}
footer a:hover{ 
    color:#cfd8df; 
}

@media (prefers-reduced-motion: no-preference){
    header .logo .ring{ 
        animation: logo-ring-spin 5s linear infinite; 
    }
    @keyframes logo-ring-spin{ 
        to { 
            transform: rotate(360deg); 
        } 
    }

    h1::after{ 
        animation: accent-in .8s cubic-bezier(.22,.8,.2,1) 1s forwards; 
    }
    @keyframes accent-in{ 
        to{ 
            transform: scaleX(1); 
        } 
    }

    .corner.tl, .corner.br{
        animation: startanim .5s ease-in-out .3s both;
    }
    @keyframes startanim{
        to { 
            transform: translate(0,0) rotate(0deg); 
            opacity:1;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within { 
        scroll-behavior: auto; 
    } 
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .corner.tl, .corner.br{
        transform: translate(0,0) rotate(0deg); 
        opacity:1;
    }
    h1::after{ 
        transform: scaleX(1); 
    }
}

@media (forced-colors: active){
    .contact a { 
        border: 1px solid ButtonText; 
    }
    .contact a:focus-visible{ 
        outline: 2px solid Highlight; 
        box-shadow: none; 
    }
}