:root{
  --c-primary:#00B4FF;
  --c-secondary:#39FF14;
  --c-accent:#FFD700;
  --c-bg:#0A0E17;
  --c-surface:#111827;
  --c-surface-alt:#1A2234;
  --c-text:#FFFFFF;
  --c-text-mid:#A0AEC0;
  --c-text-low:#718096;
  --c-border:#232A3D;
  --c-glow:rgba(0,180,255,0.3);
  --font-display:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:"JetBrains Mono", "Fira Code", monospace;
  --container:1440px;
  --gutter:clamp(20px, 4vw, 56px);
  --section-space:clamp(64px, 10vw, 120px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--c-bg); scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:transparent;
  color:var(--c-text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(0,180,255,0.16), transparent 60%),
    radial-gradient(900px 600px at -5% 110%, rgba(57,255,20,0.07), transparent 55%),
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size:auto,auto,64px 64px,64px 64px;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0}
img{max-width:100%; display:block}
a{color:var(--c-primary); text-decoration:none}
a:hover{color:var(--c-secondary)}
button{font:inherit; -webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--c-accent); outline-offset:3px; border-radius:2px}
::selection{background:var(--c-primary); color:#001}
[hidden]{display:none !important}
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.main-content{width:100%; flex:1; outline:none}
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:linear-gradient(180deg, rgba(10,14,23,0.98), rgba(10,14,23,0.9));
  border-bottom:1px solid var(--c-border);
  backdrop-filter:blur(14px);
  transition:box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header[data-scrolled]{
  border-bottom-color:rgba(0,180,255,0.35);
  box-shadow:0 12px 40px rgba(0,0,0,0.45);
}
.site-header::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, var(--c-primary), var(--c-secondary) 45%, transparent 80%);
  z-index:1;
}
.site-header::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  width:22%;
  height:1px;
  background:var(--c-primary);
  opacity:0.65;
  transform:skewX(-18deg);
  transform-origin:left;
}
.header-shell{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(12px, 2vw, 32px);
  min-height:76px;
}
.brand-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--c-text);
}
.brand-link:hover{color:var(--c-text)}
.brand-mark{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  background:linear-gradient(135deg, var(--c-primary), #3a6fff 55%, var(--c-secondary));
  color:#001;
  font-family:var(--font-mono);
  font-size:17px;
  font-weight:800;
  letter-spacing:0.04em;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  filter:drop-shadow(0 0 10px rgba(0,180,255,0.25));
}
.brand-text{display:flex; flex-direction:column; line-height:1.1; gap:2px}
.brand-name{font-size:18px; font-weight:800; letter-spacing:0.12em; color:var(--c-text)}
.brand-sub{font-family:var(--font-mono); font-size:10px; letter-spacing:0.22em; color:var(--c-text-mid); text-transform:uppercase}

.primary-nav{display:flex; justify-content:flex-end; align-items:center}
.nav-list{display:flex; align-items:center; justify-content:flex-end; gap:4px; list-style:none}
.nav-item{position:relative}
.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:0.4rem 0.75rem;
  color:var(--c-text-mid);
  font-weight:600;
  font-size:15px;
  letter-spacing:0.04em;
  white-space:nowrap;
}
.nav-link::before{
  content:"";
  position:absolute;
  left:0.5rem;
  right:0.5rem;
  bottom:2px;
  height:2px;
  background:linear-gradient(90deg, var(--c-primary), var(--c-secondary));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.25s ease;
}
.nav-link:hover,
.nav-link[aria-current="page"]{
  color:var(--c-text);
}
.nav-link:hover::before,
.nav-link[aria-current="page"]::before{
  transform:scaleX(1);
}
.nav-link[aria-current="page"]{
  text-shadow:0 0 12px var(--c-glow);
}

.header-actions{display:flex; align-items:center; justify-content:flex-end; gap:8px}
.header-live{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.16em;
  color:var(--c-secondary);
  border:1px solid rgba(57,255,20,0.28);
  background:rgba(57,255,20,0.06);
  padding:0.4rem 0.6rem;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--c-secondary);
  animation:live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(57,255,20,0.55)}
  50%{box-shadow:0 0 0 6px rgba(57,255,20,0)}
}
.header-search{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--c-border);
  background:rgba(17,24,39,0.7);
  min-height:40px;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.header-search:focus-within{
  border-color:rgba(0,180,255,0.6);
  box-shadow:0 0 0 3px rgba(0,180,255,0.12);
}
.search-symbol{padding-left:0.6rem; color:var(--c-text-low); font-family:var(--font-mono); font-size:18px}
.search-input{
  width:150px;
  min-width:0;
  background:transparent;
  border:0;
  outline:0;
  color:var(--c-text);
  font:inherit;
  font-size:14px;
  padding:0.45rem 0.6rem;
}
.search-input::placeholder{color:var(--c-text-low)}

.nav-toggle{
  display:none;
  position:relative;
  width:48px;
  height:48px;
  margin-left:2px;
  padding:12px;
  background:var(--c-surface-alt);
  border:1px solid var(--c-border);
  color:var(--c-text);
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.nav-toggle:hover{border-color:var(--c-primary)}
.nav-toggle-line{
  display:block;
  width:20px;
  height:2px;
  background:currentColor;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle .line-1,
.nav-toggle .line-2,
.nav-toggle .line-3{display:block}
.nav-toggle[aria-expanded="true"] .line-1{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .line-2{opacity:0}
.nav-toggle[aria-expanded="true"] .line-3{transform:translateY(-7px) rotate(-45deg)}

.header-progress{
  position:relative;
  height:3px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
}
.header-progress span{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, var(--c-primary), var(--c-secondary));
  transform:scaleX(0);
  transform-origin:left;
  box-shadow:0 0 12px var(--c-secondary);
}

.site-footer{
  position:relative;
  margin-top:auto;
  background:linear-gradient(180deg, #0b101c 0%, #06090f 100%);
  border-top:1px solid var(--c-border);
  color:var(--c-text-mid);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:-2px;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, var(--c-secondary), rgba(57,255,20,0.2) 35%, transparent 75%);
  z-index:1;
}
.site-footer::after{
  content:"";
  position:absolute;
  top:22px;
  right:0;
  width:18%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--c-primary));
  transform:skewX(-20deg);
}
.footer-shell{
  max-width:var(--container);
  margin-inline:auto;
  padding:clamp(48px, 8vw, 96px) var(--gutter) 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.2fr;
  gap:clamp(24px, 5vw, 80px);
}
.footer-panel{display:grid; align-content:start; gap:1rem}
.footer-brand{gap:1.25rem}
.footer-brand .brand-link{color:var(--c-text)}
.footer-trust{
  max-width:46rem;
  color:var(--c-text-mid);
  font-size:15px;
  line-height:1.8;
}
.footer-heading{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 0.2rem;
  color:var(--c-text);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.footer-heading::before{
  content:"";
  width:16px;
  height:2px;
  background:var(--c-secondary);
  display:block;
}
.footer-links{display:grid; gap:0.55rem; list-style:none}
.footer-links a{color:var(--c-text-mid); font-size:15px}
.footer-links a::before{
  content:"→";
  color:var(--c-primary);
  margin-right:0.4rem;
  font-family:var(--font-mono);
}
.footer-links a:hover{color:var(--c-text)}
.footer-contact-list{display:grid; gap:0.7rem; list-style:none; margin:0}
.contact-label{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  color:var(--c-text-low);
  text-transform:uppercase;
}
.contact-detail{
  display:inline-block;
  color:var(--c-text-mid);
  font-size:15px;
  line-height:1.6;
}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
  margin-top:clamp(36px, 6vw, 72px);
  padding-top:24px;
  border-top:1px solid var(--c-border);
}
.footer-copy{margin:0; color:var(--c-text-mid); font-size:13px}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem 1.2rem;
  list-style:none;
  margin:0;
  padding:0;
}
.footer-legal a{color:var(--c-text-low); font-size:13px; letter-spacing:0.04em}
.footer-legal a:hover{color:var(--c-text)}
.footer-icp{
  width:100%;
  text-align:center;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--c-text-low);
  letter-spacing:0.06em;
  margin-top:0.25rem;
}

.section{position:relative; padding-block:var(--section-space)}
.section-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:0 1.5rem;
  align-items:start;
  margin-bottom:clamp(2rem, 4vw, 3.5rem);
}
.section-index{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:start;
  margin-top:0.4rem;
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:0.06em;
  color:var(--c-primary);
  background:rgba(0,180,255,0.08);
  border-left:2px solid var(--c-primary);
  padding:0.2rem 0.65rem;
  line-height:1.6;
}
.section-title{
  grid-column:2;
  font-family:var(--font-display);
  font-size:clamp(2rem, 4.5vw, 3.5rem);
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--c-text);
  text-wrap:balance;
}
.section-desc{
  grid-column:2;
  margin-top:0.75rem;
  max-width:56rem;
  color:var(--c-text-mid);
  font-size:16px;
}

.grid{display:grid; gap:clamp(1rem, 2.5vw, 1.5rem)}
.grid-cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4, minmax(0,1fr))}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  background:linear-gradient(180deg, rgba(17,24,39,0.9), rgba(10,14,23,0.92));
  border:1px solid var(--c-border);
  padding:clamp(1rem, 2.5vw, 1.5rem);
  transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:56%;
  height:2px;
  background:linear-gradient(90deg, var(--c-primary), transparent);
}
.card:hover{
  border-color:rgba(0,180,255,0.45);
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(0,0,0,0.4), 0 0 28px rgba(0,180,255,0.06);
}
.card-title{font-size:1.1rem; line-height:1.35; letter-spacing:0.01em; margin:0}
.card-meta{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--c-text-low);
  text-transform:uppercase;
}
.card-body{color:var(--c-text-mid); font-size:15px; line-height:1.7}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  min-height:44px;
  padding:0.6rem 1.2rem;
  border:1px solid var(--c-border);
  background:var(--c-surface-alt);
  color:var(--c-text);
  font-weight:600;
  font-size:15px;
  letter-spacing:0.04em;
  cursor:pointer;
  text-decoration:none;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn:hover{border-color:var(--c-primary); color:var(--c-text); transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg, var(--c-primary), #4d7fff); color:#001; border:0}
.btn-primary:hover{box-shadow:0 8px 30px rgba(0,180,255,0.25)}
.btn-secondary{background:var(--c-secondary); color:#001; border:0}
.btn-secondary:hover{box-shadow:0 8px 30px rgba(57,255,20,0.2)}
.btn-ghost{background:transparent}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  list-style:none;
  margin:0 0 2rem;
  padding:0;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--c-text-low);
}
.breadcrumbs li{display:flex; align-items:center}
.breadcrumbs li + li::before{content:"/"; margin-right:0.5rem; color:var(--c-text-low)}
.breadcrumbs a{color:var(--c-text-mid)}
.breadcrumbs a:hover{color:var(--c-text)}
.breadcrumbs a[aria-current="page"]{color:var(--c-text)}

.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-bottom:2rem;
}
.filter-button{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0.3rem 0.8rem;
  border:1px solid var(--c-border);
  background:rgba(10,14,23,0.4);
  color:var(--c-text-mid);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.06em;
  cursor:pointer;
}
.filter-button::before{
  content:"#";
  color:var(--c-text-low);
  margin-right:0.4rem;
}
.filter-button:hover{border-color:var(--c-primary); color:var(--c-text)}
.filter-button[aria-pressed="true"]{
  border-color:var(--c-primary);
  background:rgba(0,180,255,0.12);
  color:var(--c-text);
  box-shadow:0 0 0 1px rgba(0,180,255,0.18);
}

.image-frame{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:16/9;
  background:linear-gradient(135deg, rgba(0,180,255,0.14), rgba(57,255,20,0.05) 55%, rgba(255,215,0,0.07));
  border:1px solid var(--c-border);
  color:var(--c-text-low);
}
.image-frame::after{
  content:"IMAGE";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.28em;
  color:var(--c-text-low);
  background:linear-gradient(135deg, rgba(0,180,255,0.04), rgba(57,255,20,0.02));
}
.image-frame img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}
.image-frame[data-ratio="4/3"]{aspect-ratio:4/3}
.image-frame[data-ratio="1/1"]{aspect-ratio:1/1}
.image-frame[data-ratio="21/9"]{aspect-ratio:21/9}

@media (max-width:1100px){
  .header-shell{grid-template-columns:auto 1fr}
  .primary-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:1001;
    display:block;
    background:rgba(10,14,23,0.98);
    border-top:1px solid var(--c-border);
    border-bottom:1px solid var(--c-border);
    box-shadow:0 24px 48px rgba(0,0,0,0.45);
    visibility:hidden;
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  }
  .primary-nav[data-open]{
    visibility:visible;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0.5rem 0;
  }
  .nav-item{border-bottom:1px solid rgba(255,255,255,0.05)}
  .nav-link{
    width:100%;
    min-height:52px;
    padding:0 var(--gutter);
    justify-content:flex-start;
  }
  .nav-link::before{
    left:var(--gutter);
    right:auto;
    width:2px;
    height:16px;
    bottom:auto;
    top:50%;
    transform:translateY(-50%) scaleY(0);
    transform-origin:center;
  }
  .nav-link:hover::before,
  .nav-link[aria-current="page"]::before{
    transform:translateY(-50%) scaleY(1);
  }
  .nav-toggle{display:inline-flex; gap:5px; flex-direction:column}
  .grid-cols-4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}

@media (max-width:720px){
  .header-shell{grid-template-columns:auto 1fr; gap:8px}
  .header-live{display:none}
  .search-input{width:110px}
  .brand-sub{display:none}
  .brand-mark{width:38px; height:38px; font-size:15px}
  .brand-name{font-size:16px; letter-spacing:0.08em}
  .nav-toggle{width:44px; height:44px}
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .section-head{grid-template-columns:1fr}
  .section-index{grid-row:auto; grid-column:1; margin-bottom:0.75rem}
  .section-title{grid-column:1}
  .section-desc{grid-column:1}
}

@media (max-width:480px){
  .header-shell{min-height:64px}
  .search-input{width:90px; padding:0.4rem 0.4rem}
  .search-symbol{padding-left:0.45rem}
  .footer-bottom{flex-direction:column; align-items:flex-start}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  .live-dot{animation:none}
}