html{scroll-behavior:smooth}
body{margin:0;background:#000}
a{color:#22D3D8}a:hover{color:#7CEBEE}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:8px;font:600 16px Inter,sans-serif;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-teal{background:#22D3D8;color:#00181A}.btn-teal:hover{color:#00181A;box-shadow:0 8px 28px rgba(34,211,216,.35)}
.btn-line{border:1px solid #3A4A50;color:#FFFFFF}.btn-line:hover{color:#FFFFFF;border-color:#F5A033}
.navlink{color:#C9D2D6;text-decoration:none;font:500 15px Inter,sans-serif;min-height:44px;display:inline-flex;align-items:center}
.navlink:hover{color:#22D3D8}
.card{display:flex;flex-direction:column;gap:14px;padding:28px;background:#0B0F12;border:1px solid #1C262B;border-radius:14px;text-decoration:none;color:#FFFFFF;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-6px);border-color:#22D3D8;color:#FFFFFF}
.mark{width:44px;height:44px;border-radius:10px;background:#000 url(/logo.jpg) no-repeat 50% 9%;background-size:150% auto;flex:none}
.trace{height:1px;background:#14262A;position:relative;overflow:hidden}
.trace::after{content:"";position:absolute;top:0;left:-160px;width:160px;height:1px;background:#22D3D8;animation:run 5s linear infinite}
.trace.o::after{background:#F5A033;animation-duration:7s}
input[type=range]{width:100%;height:44px;accent-color:#22D3D8;margin:0}
@keyframes run{to{left:100%}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 0 rgba(34,211,216,0))}50%{filter:drop-shadow(0 0 34px rgba(34,211,216,.35))}}
.in{animation:rise .8s ease both}.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}
.logo{-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 48%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 50% 48%,#000 70%,transparent 100%)}
@supports (animation-timeline: view()){.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}}
@media (prefers-reduced-motion: reduce){.in,.logo,.reveal,.trace::after{animation:none}}
.f{transition:transform .25s,border-color .25s}.f:hover{transform:translateY(-6px);border-color:#22D3D8}
@media (prefers-reduced-motion: reduce){.in,.reveal,.trace::after{animation:none}}
@media (max-width:720px){header nav{gap:0 18px!important}header nav .btn{display:none}}
.js-reveal .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js-reveal .reveal.shown{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js-reveal .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}