*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:root{
  --night-blue:#0B1D3A;
  --pitch-green:#0E4D3A;
  --signal-orange:#FF6B00;
  --lime-flash:#C6FF00;
  --cyan-pulse:#00E5FF;
  --violet-zone:#7A5CFF;
  --paper-white:#F5F7FA;
  --ink-black:#111318;
  --muted-gray:#8A94A6;
  --header-height-desktop:76px;
  --header-height-mobile:64px;
  --container-width:1280px;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:8px;
  --radius-pill:999px;
  --font-heading:'Oswald','Arial Narrow',Impact,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-data:'JetBrains Mono','SF Mono',Monaco,'Cascadia Code','Roboto Mono',monospace
}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--paper-white);
  background-color:var(--night-blue);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased
}
body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:3px;
  height:100vh;
  z-index:200;
  background:linear-gradient(180deg,var(--signal-orange) 0,var(--signal-orange) 32px,var(--cyan-pulse) 32px,var(--cyan-pulse) 100%);
  pointer-events:none
}
img,svg,video{display:block;max-width:100%}
a{color:var(--cyan-pulse);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--lime-flash)}
ul,ol{list-style:none}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
#main-content{flex:1;width:100%}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--paper-white);
  line-height:1.15;
  font-weight:600
}
h1{font-size:3.5rem;letter-spacing:.01em}
h2{font-size:2.5rem}
h3{font-size:1.75rem}
h4{font-size:1.25rem}
@media(max-width:768px){
  h1{font-size:2.5rem}
  h2{font-size:2rem}
  h3{font-size:1.5rem}
}
:focus-visible{
  outline:3px solid var(--cyan-pulse);
  outline-offset:2px;
  border-radius:4px
}
.skip-link{
  position:fixed;
  top:-100px;
  left:16px;
  z-index:300;
  padding:12px 24px;
  background:var(--signal-orange);
  color:var(--ink-black);
  font-weight:600;
  font-size:14px;
  border-radius:var(--radius-pill);
  transition:top .2s ease;
  box-shadow:0 4px 20px rgba(255,107,0,.3)
}
.skip-link:focus{top:16px}
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:transparent;
  transition:background-color .3s ease,box-shadow .3s ease
}
.site-header[data-scrolled]{
  background:var(--night-blue);
  box-shadow:0 1px 0 rgba(0,229,255,.15),0 8px 32px rgba(0,0,0,.35)
}
.scroll-progress{
  position:absolute;
  bottom:0;
  left:0;
  height:2px;
  width:0;
  background:linear-gradient(90deg,var(--lime-flash),var(--cyan-pulse));
  z-index:10;
  transition:width .05s linear;
  pointer-events:none
}
.header-container{
  max-width:1440px;
  margin:0 auto;
  height:var(--header-height-desktop);
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.header-brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0
}
.brand-symbol{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:var(--radius-md);
  background:var(--signal-orange);
  color:var(--ink-black);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:18px;
  letter-spacing:.02em;
  box-shadow:0 4px 16px rgba(255,107,0,.35);
  transition:transform .2s ease,box-shadow .2s ease
}
a:hover .brand-symbol{
  transform:scale(1.05) rotate(-3deg);
  box-shadow:0 6px 20px rgba(255,107,0,.45)
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1
}
.brand-text strong{
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:600;
  color:var(--paper-white);
  letter-spacing:.05em
}
.brand-text small{
  font-size:11px;
  color:var(--cyan-pulse);
  font-weight:500;
  letter-spacing:.08em
}
.site-nav{
  flex:1;
  display:flex;
  justify-content:center
}
.nav-list{
  display:flex;
  align-items:center;
  gap:4px
}
.nav-link{
  display:inline-block;
  padding:8px 18px;
  border-radius:var(--radius-pill);
  font-size:15px;
  font-weight:500;
  color:var(--paper-white);
  position:relative;
  transition:background-color .2s ease,color .2s ease
}
.nav-link::after{
  content:'';
  position:absolute;
  left:18px;
  right:18px;
  bottom:5px;
  height:2px;
  background:var(--lime-flash);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease
}
.nav-link:hover{color:var(--cyan-pulse)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{
  color:var(--cyan-pulse);
  background:rgba(0,229,255,.08)
}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.header-actions{
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 24px;
  border-radius:var(--radius-pill);
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  transition:transform .15s ease,background-color .2s ease,box-shadow .2s ease,color .2s ease,border-color .2s ease
}
.btn:active{transform:scale(.96)}
.btn-accent{
  background:var(--signal-orange);
  color:var(--ink-black);
  box-shadow:0 4px 20px rgba(255,107,0,.25)
}
.btn-accent:hover{
  background:#ff8533;
  color:var(--ink-black);
  box-shadow:0 6px 24px rgba(255,107,0,.35)
}
.btn-ghost{
  border:1px solid rgba(245,247,250,.3);
  color:var(--paper-white);
  background:transparent
}
.btn-ghost:hover{
  border-color:var(--cyan-pulse);
  color:var(--cyan-pulse);
  background:rgba(0,229,255,.06)
}
.btn-sm{
  padding:8px 18px;
  font-size:13px
}
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:10px;
  border-radius:var(--radius-sm);
  transition:background-color .2s ease
}
.nav-toggle:hover{background:rgba(0,229,255,.08)}
.nav-toggle-line{
  display:block;
  height:2px;
  width:100%;
  background:var(--paper-white);
  border-radius:2px;
  transition:transform .25s ease,opacity .25s ease,background-color .25s ease
}
.nav-toggle:hover .nav-toggle-line{background:var(--cyan-pulse)}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1){
  transform:translateY(7px) rotate(45deg)
}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2){
  opacity:0
}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3){
  transform:translateY(-7px) rotate(-45deg)
}
.site-footer{
  background:linear-gradient(180deg,var(--night-blue) 0,#060f1f 100%);
  border-top:1px solid rgba(0,229,255,.2);
  margin-top:auto;
  padding-top:64px
}
.footer-container{
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:48px
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px
}
.footer-brand .brand-symbol{
  width:40px;
  height:40px;
  font-size:16px
}
.footer-note{
  font-size:14px;
  line-height:1.7;
  color:var(--muted-gray);
  margin-bottom:20px;
  max-width:380px
}
.footer-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.footer-heading{
  font-family:var(--font-heading);
  font-size:14px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cyan-pulse);
  margin-bottom:16px
}
.footer-list{
  display:flex;
  flex-direction:column;
  gap:10px
}
.footer-list a{
  color:var(--muted-gray);
  font-size:14px;
  transition:color .2s ease
}
.footer-list a:hover{color:var(--paper-white)}
.contact-line{
  font-size:14px;
  color:var(--muted-gray);
  line-height:1.6;
  margin-bottom:8px
}
.contact-line-muted{
  color:var(--muted-gray);
  opacity:.6;
  font-size:13px
}
.footer-bottom{
  margin-top:48px;
  border-top:1px solid rgba(245,247,250,.08);
  padding:24px 0
}
.footer-bottom-inner{
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:13px;
  color:var(--muted-gray)
}
.container{
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 24px
}
.section{
  padding:96px 0
}
.section-pitch{
  background:var(--pitch-green)
}
.content-wrap{
  display:flex;
  gap:40px;
  align-items:flex-start
}
.content-main{
  flex:1;
  min-width:0
}
.content-side{
  width:260px;
  flex-shrink:0
}
.page-header{
  padding:calc(var(--header-height-desktop) + 48px) 0 40px;
  border-bottom:1px solid rgba(0,229,255,.15);
  margin-bottom:48px
}
.page-title{
  font-size:3rem;
  margin-bottom:8px
}
.page-subtitle{
  color:var(--muted-gray);
  font-size:18px;
  line-height:1.5
}
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:16px 0;
  font-size:13px;
  color:var(--muted-gray)
}
.breadcrumb-link{
  color:var(--muted-gray);
  transition:color .2s ease
}
.breadcrumb-link:hover{color:var(--cyan-pulse)}
.breadcrumb-current{color:var(--paper-white)}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
@media(max-width:768px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}
.hero-frame{
  position:relative;
  border:2px solid rgba(0,229,255,.3);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(14,77,58,.35) 0,rgba(11,29,58,.9) 60%,rgba(17,19,24,.7) 100%);
  box-shadow:0 0 0 4px rgba(11,29,58,.8),0 0 60px rgba(0,229,255,.08);
  padding:calc(var(--header-height-desktop) + 60px) 56px 56px
}
.hero-frame::before{
  content:'';
  position:absolute;
  top:-2px;
  left:-2px;
  width:64px;
  height:64px;
  border-top:4px solid var(--signal-orange);
  border-left:4px solid var(--signal-orange);
  border-radius:calc(var(--radius-lg) - 2px) 0 0 0;
  pointer-events:none
}
.hero-frame::after{
  content:'';
  position:absolute;
  bottom:-2px;
  right:-2px;
  width:64px;
  height:64px;
  border-bottom:4px solid var(--signal-orange);
  border-right:4px solid var(--signal-orange);
  border-radius:0 0 calc(var(--radius-lg) - 2px) 0;
  pointer-events:none
}
.tick-bar{
  display:block;
  height:8px;
  background:repeating-linear-gradient(90deg,var(--cyan-pulse) 0,var(--cyan-pulse) 2px,transparent 2px,transparent 12px);
  opacity:.4;
  border-radius:4px
}
.panel{
  background:rgba(245,247,250,.03);
  border:1px solid rgba(245,247,250,.08);
  border-radius:var(--radius-md);
  overflow:hidden
}
.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  cursor:pointer;
  transition:background-color .2s ease
}
.panel-header:hover{background:rgba(0,229,255,.05)}
.panel-title{
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:600;
  color:var(--paper-white)
}
.panel-icon{
  width:20px;
  height:20px;
  position:relative;
  flex-shrink:0
}
.panel-icon::before,.panel-icon::after{
  content:'';
  position:absolute;
  background:var(--cyan-pulse);
  transition:transform .25s ease;
  border-radius:2px
}
.panel-icon::before{
  top:50%;
  left:0;
  right:0;
  height:2px;
  transform:translateY(-50%)
}
.panel-icon::after{
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-50%)
}
.panel[data-open] .panel-icon::after{
  transform:translateX(-50%) scaleY(0)
}
.panel-content{
  max-height:0;
  overflow:hidden;
  padding:0 24px;
  transition:max-height .3s ease,padding .3s ease
}
.panel[data-open] .panel-content{
  max-height:600px;
  padding:0 24px 24px
}
.tag{
  display:inline-flex;
  align-items:center;
  padding:4px 14px;
  border-radius:var(--radius-pill);
  font-size:12px;
  font-weight:600;
  color:var(--paper-white);
  background:var(--violet-zone);
  letter-spacing:.06em;
  text-transform:uppercase
}
.data-badge{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  padding:4px 14px;
  border-radius:var(--radius-pill);
  background:rgba(198,255,0,.12);
  border:1px solid rgba(198,255,0,.3);
  font-family:var(--font-data);
  font-size:14px;
  font-weight:500;
  color:var(--lime-flash)
}
.img-placeholder{
  position:relative;
  width:100%;
  overflow:hidden;
  background:linear-gradient(135deg,var(--pitch-green) 0,var(--night-blue) 100%);
  border-radius:var(--radius-lg);
  border:1px solid rgba(0,229,255,.15);
  min-height:200px
}
.img-placeholder::before{
  content:attr(data-label);
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-data);
  font-size:12px;
  color:var(--muted-gray);
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap
}
@media(min-width:901px){
  .site-nav[data-open]{
    display:flex
  }
}
@media(max-width:1080px){
  .header-container{padding:0 20px}
  .nav-link{padding:8px 12px;font-size:14px}
  .footer-container{grid-template-columns:1fr 1fr;gap:32px}
  .footer-contact-col{grid-column:1/-1}
}
@media(max-width:900px){
  .header-container{
    height:var(--header-height-mobile);
    padding:0 16px
  }
  .site-nav{
    position:fixed;
    top:var(--header-height-mobile);
    left:0;
    right:0;
    background:var(--night-blue);
    border-bottom:1px solid rgba(0,229,255,.2);
    padding:16px 24px 24px;
    transform:translateY(-100%);
    opacity:0;
    visibility:hidden;
    transition:transform .3s ease,opacity .3s ease,visibility .3s ease;
    display:block;
    height:auto;
    box-shadow:0 16px 32px rgba(0,0,0,.3);
    border-radius:0 0 var(--radius-lg) var(--radius-lg)
  }
  .site-nav[data-open]{
    transform:translateY(0);
    opacity:1;
    visibility:visible
  }
  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:4px
  }
  .nav-link{
    display:block;
    padding:14px 16px;
    border-radius:var(--radius-md);
    font-size:16px
  }
  .nav-toggle{
    display:flex
  }
  .page-header{
    padding:calc(var(--header-height-mobile) + 40px) 0 32px
  }
  .content-wrap{
    flex-direction:column
  }
  .content-side{
    width:100%
  }
}
@media(max-width:640px){
  .header-cta{display:none}
  .footer-container{
    grid-template-columns:1fr;
    gap:32px
  }
  .footer-links{
    grid-template-columns:1fr 1fr;
    gap:16px
  }
  .footer-bottom-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:8px
  }
  .hero-frame{
    padding:calc(var(--header-height-mobile) + 40px) 24px 32px
  }
  .section{
    padding:64px 0
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important
  }
}