:root{
  --color-bg:#0A0A0F;
  --color-bg-card:#1A1A2E;
  --color-accent:#FF6B00;
  --color-accent-blue:#00D4FF;
  --color-text:#F5F5F7;
  --color-text-dim:#A0A0B0;
  --color-positive:#00E676;
  --color-warn:#FF3860;
  --font-heading:'Orbitron','Rajdhani','Arial Black','PingFang SC','Noto Sans SC',sans-serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --container-max:1200px;
  --space-xl:80px;
  --space-lg:48px;
  --shadow:0 8px 32px rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{
  min-height:100vh;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
ul,ol{list-style:none;}
img{max-width:100%;display:block;}
a{color:var(--color-accent-blue);text-decoration:none;}
a:hover{color:var(--color-accent);}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:800;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--color-text);
}
h1{font-size:clamp(2.2rem,5vw,4rem);}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem);}
h3{font-size:1.35rem;}
h4{font-size:1.1rem;}
#main-content{scroll-margin-top:96px;}
.container{max-width:var(--container-max);margin-inline:auto;padding-inline:24px;}
.section{padding-block:var(--space-xl);}
.section--wide{padding-block:var(--space-lg);}
.section--narrow{padding-block:var(--space-lg);max-width:840px;margin-inline:auto;}
.btn{
  display:inline-block;
  padding:12px 24px;
  background:transparent;
  border:1px solid transparent;
  border-radius:40px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  text-align:center;
  line-height:1.2;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s;
}
.btn:active{transform:translateY(1px);}
.btn--primary{
  background:linear-gradient(135deg,var(--color-accent),#ff8e3c);
  color:#0A0A0F;
  box-shadow:0 6px 18px rgba(255,107,0,.35);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(255,107,0,.45);
  color:#0A0A0F;
}
.btn--ghost{
  color:var(--color-accent-blue);
  border-color:var(--color-accent-blue);
  background:rgba(0,212,255,.04);
}
.btn--ghost:hover{
  background:rgba(0,212,255,.12);
  color:var(--color-text);
}
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  padding-block:24px;
  font-size:.9rem;
  color:var(--color-text-dim);
}
.breadcrumbs a{color:var(--color-accent-blue);}
.breadcrumbs a[aria-current="page"]{color:var(--color-text);}
.data-card{
  background:var(--color-bg-card);
  border:1px solid rgba(255,107,0,.15);
  border-radius:16px;
  padding:24px;
  box-shadow:var(--shadow);
}
.tag{
  display:inline-block;
  padding:4px 12px;
  border-radius:40px;
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:rgba(0,212,255,.12);
  color:var(--color-accent-blue);
  border:1px solid rgba(0,212,255,.3);
}
.img-frame{
  background:var(--color-bg-card);
  border:1px dashed var(--color-accent-blue);
  border-radius:8px;
  overflow:hidden;
  position:relative;
  aspect-ratio:16/9;
}
.img-frame::before{
  content:"IMAGE";
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  font-family:var(--font-heading);
  font-size:.8rem;
  letter-spacing:.2em;
  color:var(--color-text-dim);
}
.img-frame--wide{aspect-ratio:21/9;}
.img-frame--tall{aspect-ratio:4/5;}
.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  z-index:2000;
  padding:12px 24px;
  background:var(--color-accent);
  color:#0A0A0F;
  font-weight:800;
  border-radius:0 0 12px 0;
}
.skip-link:focus{
  left:0;
}
.site-header{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 32px);
  max-width:1180px;
  z-index:1000;
  background:rgba(10,10,15,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,107,0,.25);
  box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 24px rgba(0,212,255,.08);
  border-radius:60px;
}
.site-header__inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 16px 10px 20px;
  position:relative;
}
.site-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:1.2rem;
  letter-spacing:.06em;
  color:var(--color-text);
  text-transform:uppercase;
  line-height:1;
}
.site-brand__mark{
  width:26px;
  height:26px;
  background:linear-gradient(135deg,var(--color-accent),var(--color-accent-blue));
  transform:rotate(45deg);
  border-radius:5px;
  box-shadow:0 0 12px rgba(0,212,255,.5);
  position:relative;
}
.site-brand__mark::after{
  content:"";
  position:absolute;
  inset:6px;
  background:var(--color-bg);
  border-radius:2px;
}
.site-brand__name{font-size:1.15rem;}
.site-nav{
  display:flex;
  align-items:center;
  margin-left:auto;
}
.site-nav__list{
  display:flex;
  gap:2px;
}
.site-nav__link{
  display:block;
  padding:8px 16px;
  border-radius:40px;
  color:var(--color-text-dim);
  font-weight:700;
  font-size:.875rem;
  letter-spacing:.02em;
  transition:color .2s,background .2s;
}
.site-nav__link:hover{
  color:var(--color-text);
  background:rgba(255,107,0,.14);
}
.site-nav__link[aria-current="page"]{
  color:#0A0A0F;
  background:linear-gradient(135deg,var(--color-accent),#ff8e3c);
  box-shadow:0 4px 14px rgba(255,107,0,.35);
}
.site-header__cta{margin-left:4px;}
.site-header__toggle{
  display:none;
  background:transparent;
  border:1px solid rgba(255,107,0,.3);
  border-radius:30px;
  padding:6px 10px;
  cursor:pointer;
  align-items:center;
  gap:4px;
}
.site-header__toggle-bar{
  display:block;
  width:18px;
  height:2px;
  background:var(--color-text);
  border-radius:2px;
  transition:transform .3s,opacity .3s;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2){
  transform:translateY(6px) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3){
  opacity:0;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(4){
  transform:translateY(-6px) rotate(-45deg);
}
.site-header__progress{
  --scroll-progress:0;
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  background:rgba(255,255,255,.08);
  border-radius:0 0 60px 60px;
  overflow:hidden;
  pointer-events:none;
}
.site-header__progress::after{
  content:"";
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg,var(--color-accent),var(--color-accent-blue));
  transform-origin:left;
  transform:scaleX(var(--scroll-progress,0));
  transition:transform .05s linear;
}
.site-footer{
  background:linear-gradient(180deg,#0A0A0F 0%,#12121F 100%);
  border-top:1px solid rgba(255,107,0,.18);
  padding-top:64px;
}
.site-footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1.3fr;
  gap:40px;
  padding-bottom:48px;
}
.site-footer__brand{display:block;}
.site-footer__logo{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:1.5rem;
  color:var(--color-text);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.site-footer__trust{
  margin-top:16px;
  color:var(--color-text-dim);
  font-size:.95rem;
  line-height:1.7;
  max-width:38em;
}
.site-footer__links{display:block;}
.site-footer__contact{display:block;}
.site-footer__heading{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1rem;
  color:var(--color-accent);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:16px;
}
.site-footer__grid ul{
  display:grid;
  gap:10px;
}
.site-footer__grid a{
  color:var(--color-text-dim);
  line-height:1.5;
}
.site-footer__grid a:hover{
  color:var(--color-accent-blue);
}
.site-footer__contact li{
  color:var(--color-text-dim);
  line-height:1.7;
}
.site-footer__email,.site-footer__phone{
  color:var(--color-text);
  font-family:var(--font-heading);
  letter-spacing:.02em;
}
.site-footer__bottom{
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.3);
  padding:16px 0;
}
.site-footer__bottom-inner{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 16px;
  font-size:.85rem;
  color:var(--color-text-dim);
}
.site-footer__copyright [data-year]{color:var(--color-text);}
:focus-visible{
  outline:3px solid var(--color-accent-blue);
  outline-offset:3px;
}
a:focus-visible,button:focus-visible{
  border-radius:8px;
}
@supports selector(:focus-visible){
  :focus:not(:focus-visible){outline:none;}
}
@media (max-width:1023px){
  .site-header__toggle{
    display:inline-flex;
    margin-left:auto;
  }
  .site-nav{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    width:min(280px,92vw);
    background:rgba(26,26,46,.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,107,0,.2);
    border-radius:16px;
    padding:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .25s,transform .25s,visibility .25s;
  }
  .site-nav[data-open]{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .site-nav__list{
    flex-direction:column;
    gap:2px;
  }
  .site-nav__link{
    padding:12px 16px;
    border-radius:10px;
  }
  .site-header__cta{display:none;}
}
@media (max-width:767px){
  .container{padding-inline:16px;}
  .section{padding-block:48px;}
  .site-footer__grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .site-footer__bottom-inner{
    flex-direction:column;
    text-align:center;
  }
}
@media (max-width:640px){
  .site-header{
    top:8px;
    width:calc(100% - 16px);
    border-radius:40px;
  }
  .site-header__inner{
    padding:8px 12px;
  }
  .site-brand__name{font-size:1rem;}
  .site-brand__mark{
    width:22px;
    height:22px;
  }
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}