*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg-deep:#0A1128;
  --bg-panel:#1E1B2E;
  --bg-card:#121A38;
  --bg-foot:#050816;
  --accent-purple:#6D28D9;
  --accent-purple-bright:#7C3AED;
  --accent-green:#A3E635;
  --accent-blue:#38BDF8;
  --text-bright:#F8F9FC;
  --text-muted:#9CA3AF;
  --text-mist:#C4B5FD;
  --border-purple:#4C1D95;
  --font-head:"Archivo Black","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;
  --font-num:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --container-w:1240px;
  --gutter:24px;
  --radius-md:14px;
  --radius-lg:20px;
  --transition-fast:150ms ease;
  --transition:220ms ease
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.75;
  color:var(--text-bright);
  background-color:var(--bg-deep);
  background-image:
    repeating-linear-gradient(0deg,rgba(56,189,248,.02) 0,rgba(56,189,248,.02) 1px,transparent 1px,transparent 4px),
    radial-gradient(ellipse at 18% 10%,rgba(109,40,217,.16),transparent 52%),
    radial-gradient(ellipse at 85% 22%,rgba(56,189,248,.06),transparent 45%),
    linear-gradient(180deg,rgba(10,17,40,0),rgba(5,8,22,.4));
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(56,189,248,.022) 3px,rgba(56,189,248,.022) 4px)
}

h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;letter-spacing:-.01em;font-weight:900}

a{color:var(--text-mist);text-decoration-thickness:1px;text-underline-offset:3px}

a:focus-visible,button:focus-visible{outline:2px solid var(--accent-green);outline-offset:3px;border-radius:4px}

::selection{background:var(--accent-purple);color:var(--text-bright)}

#main-content{padding-top:96px;min-height:60vh}

.container{width:min(100% - 48px,var(--container-w));margin-inline:auto}

.section{padding-block:80px}

.section-head{margin-bottom:48px}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-num);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-green);
  margin-bottom:14px
}

.eyebrow::before{content:"";width:28px;height:2px;background:var(--accent-green);border-radius:2px;display:inline-block}

.section-title{font-size:clamp(2rem,4vw,3.25rem);max-width:18em}

.section-note{color:var(--text-muted);margin-top:8px;max-width:42em}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:.9375rem;
  font-weight:600;
  line-height:1.5;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--transition),border-color var(--transition),box-shadow var(--transition),transform var(--transition-fast),color var(--transition)
}

.btn:focus-visible{outline:2px solid var(--accent-green);outline-offset:3px}

.btn-primary{background-color:var(--accent-purple);color:var(--text-bright)}

.btn-primary:hover{background-color:var(--accent-purple-bright);box-shadow:0 0 28px rgba(109,40,217,.35);transform:translateY(-1px)}

.btn-outline{border-color:var(--border-purple);color:var(--text-mist);background-color:transparent}

.btn-outline:hover{border-color:var(--accent-purple);color:var(--text-bright);background-color:rgba(109,40,217,.1)}

.breadcrumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:.8125rem;color:var(--text-muted);margin-bottom:24px}

.breadcrumbs a{color:var(--text-muted);text-decoration:none}

.breadcrumbs a:hover{color:var(--text-mist)}

.breadcrumbs .sep{color:var(--border-purple)}

.media-frame{position:relative;overflow:hidden;border-radius:var(--radius-md);background-color:var(--bg-panel);display:block;aspect-ratio:16/9}

.media-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(109,40,217,.18),transparent 45%,rgba(56,189,248,.06));pointer-events:none}

.media-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 400ms ease}

.media-frame:hover img{transform:scale(1.02)}

.media-hero{aspect-ratio:21/9;border-radius:var(--radius-lg)}

.media-card{aspect-ratio:4/3}

.media-wide{aspect-ratio:16/7}

.card-panel{
  position:relative;
  background:var(--bg-panel);
  border:1px solid rgba(76,29,149,.4);
  border-radius:var(--radius-md);
  padding:26px 28px;
  box-shadow:0 4px 14px rgba(2,4,16,.15);
  transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)
}

.card-panel::before{content:"";position:absolute;top:0;left:0;width:4px;height:44px;background:linear-gradient(180deg,var(--accent-purple),transparent);border-radius:0 0 4px 4px}

.card-panel:hover{border-color:rgba(109,40,217,.65);box-shadow:0 8px 30px rgba(2,4,16,.35),0 0 18px rgba(109,40,217,.08);transform:translateY(-2px)}

.timeline{position:relative;list-style:none;display:flex;flex-direction:column;gap:24px}

.timeline-item{position:relative;padding-left:28px}

.timeline-item::before{content:"";position:absolute;left:6px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--accent-green);box-shadow:0 0 8px rgba(163,230,53,.4)}

.timeline-item::after{content:"";position:absolute;left:9px;top:28px;bottom:-24px;width:2px;background:rgba(76,29,149,.4)}

.timeline-item:last-child::after{display:none}

.cut-corner{clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}

.cut-corner-sm{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);border:0;padding:0;margin:-1px}

.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:9999;
  padding:10px 18px;
  background:var(--accent-purple);
  color:#fff;
  border-radius:8px;
  font-size:.875rem;
  font-weight:600;
  text-decoration:none;
  transform:translateY(-180%);
  transition:transform 180ms ease
}

.skip-link:focus-visible{transform:translateY(0)}

.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px var(--gutter) 0}

.nav-capsule{
  position:relative;
  max-width:1160px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px 10px 10px;
  background:rgba(10,17,40,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(76,29,149,.65);
  box-shadow:0 12px 40px rgba(2,4,16,.45);
  border-radius:999px;
  transition:box-shadow var(--transition)
}

.nav-capsule::before{
  content:"";
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:18px;
  border-radius:3px;
  background:linear-gradient(180deg,var(--accent-green),var(--accent-blue));
  opacity:.8;
  pointer-events:none
}

.nav-capsule:hover{box-shadow:0 12px 44px rgba(2,4,16,.55),0 0 0 1px rgba(109,40,217,.2)}

.brand-mark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
  padding-right:10px;
  position:relative
}

.brand-glyph{
  font-family:var(--font-num);
  font-weight:700;
  font-size:1.5rem;
  line-height:1;
  color:var(--accent-green);
  text-shadow:0 0 16px rgba(163,230,53,.35)
}

.brand-caption{display:flex;flex-direction:column;line-height:1.2}

.brand-name{
  font-family:var(--font-head);
  font-size:1.125rem;
  font-weight:900;
  color:var(--text-bright);
  letter-spacing:.02em
}

.brand-slogan{font-size:.6875rem;color:var(--text-muted);font-style:normal;letter-spacing:.06em}

.site-nav{margin-inline:auto}

.nav-list{display:flex;gap:2px;list-style:none}

.nav-item{padding:0}

.nav-link{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  font-size:.875rem;
  font-weight:500;
  color:var(--text-muted);
  text-decoration:none;
  transition:color var(--transition),background-color var(--transition),box-shadow var(--transition)
}

.nav-link:hover{color:var(--text-bright);background-color:rgba(109,40,217,.22)}

.nav-link:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}

.nav-link[aria-current="page"]{
  color:var(--text-bright);
  background-color:rgba(109,40,217,.34);
  box-shadow:inset 0 0 0 1px rgba(196,181,253,.16)
}

.btn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 20px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent-purple),var(--accent-purple-bright));
  color:var(--text-bright);
  font-size:.875rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid rgba(196,181,253,.2);
  box-shadow:0 0 18px rgba(109,40,217,.25);
  transition:box-shadow var(--transition),transform var(--transition-fast);
  flex-shrink:0
}

.btn-cta::after{content:"→";font-size:1.125rem;line-height:1;transition:transform var(--transition-fast)}

.btn-cta:hover{box-shadow:0 0 28px rgba(109,40,217,.45);transform:translateY(-1px)}

.btn-cta:hover::after{transform:translateX(2px)}

.btn-cta:focus-visible{outline:2px solid var(--accent-green);outline-offset:3px}

.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(76,29,149,.6);
  background:rgba(30,27,46,.8);
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  transition:background-color var(--transition),border-color var(--transition)
}

.nav-toggle:hover{background:rgba(109,40,217,.2);border-color:rgba(109,40,217,.5)}

.toggle-bar{
  position:absolute;
  left:50%;
  width:18px;
  height:2px;
  border-radius:2px;
  background-color:var(--text-mist);
  transform:translateX(-50%);
  transition:transform 220ms ease,opacity 150ms ease,top 220ms ease
}

.toggle-bar:nth-child(1){top:14px}
.toggle-bar:nth-child(2){top:20px}
.toggle-bar:nth-child(3){top:26px}

.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(1){top:20px;transform:translateX(-50%) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(3){top:20px;transform:translateX(-50%) rotate(-45deg)}

.site-footer{
  background-color:var(--bg-foot);
  border-top:1px solid rgba(76,29,149,.45);
  padding-top:72px;
  position:relative;
  margin-top:80px
}

.site-footer::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,var(--accent-green),var(--accent-purple) 45%,transparent 92%);
  opacity:.5;
  pointer-events:none
}

.footer-frame{width:min(100% - 48px,var(--container-w));margin-inline:auto}

.footer-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);gap:56px;padding-bottom:54px}

.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}

.footer-logo{
  font-family:var(--font-num);
  font-size:1.75rem;
  font-weight:700;
  color:var(--accent-green);
  text-shadow:0 0 18px rgba(163,230,53,.35);
  line-height:1.2
}

.footer-logo span{
  font-family:var(--font-head);
  color:var(--text-bright);
  font-size:1.25rem;
  margin-left:4px
}

.footer-slogan{color:var(--text-mist);font-size:.875rem;letter-spacing:.18em}

.footer-about{color:var(--text-muted);font-size:.875rem;max-width:30em}

.footer-trust{
  color:var(--text-muted);
  font-size:.75rem;
  line-height:1.8;
  border-left:2px solid var(--border-purple);
  padding-left:14px;
  max-width:32em
}

.footer-index{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}

.footer-heading{
  font-family:var(--font-num);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-green);
  margin-bottom:18px;
  position:relative;
  padding-bottom:10px
}

.footer-heading::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:28px;
  height:2px;
  background:linear-gradient(90deg,var(--accent-purple),transparent);
  border-radius:2px
}

.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}

.footer-links a{color:var(--text-muted);text-decoration:none;font-size:.875rem;transition:color var(--transition),padding-left var(--transition-fast)}

.footer-links a:hover{color:var(--text-mist);padding-left:4px}

.footer-links a:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px;border-radius:4px}

.footer-contact{
  position:relative;
  background:rgba(30,27,46,.5);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  padding:22px 24px
}

.footer-address{display:flex;flex-direction:column;gap:12px;font-style:normal;color:var(--text-muted);font-size:.8125rem}

.footer-address p{display:flex;flex-direction:column;gap:2px}

.contact-label{
  font-family:var(--font-num);
  font-size:.6875rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-mist);
  opacity:.8
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding-block:20px;
  border-top:1px solid rgba(76,29,149,.3);
  color:var(--text-muted);
  font-size:.75rem
}

.footer-copy,.footer-icp{font-family:var(--font-num);letter-spacing:.04em}

.top-gauge{
  position:fixed;
  right:28px;
  bottom:28px;
  width:56px;
  height:56px;
  border-radius:50%;
  border:none;
  background:rgba(10,17,40,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 24px rgba(2,4,16,.5),0 0 0 1px rgba(76,29,149,.6);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:90;
  opacity:0;
  transform:scale(.9);
  pointer-events:none;
  transition:opacity 280ms ease,transform 280ms ease,box-shadow var(--transition)
}

.top-gauge[data-top-state="active"]{opacity:1;transform:scale(1);pointer-events:auto}

.top-gauge:hover{box-shadow:0 4px 28px rgba(2,4,16,.6),0 0 0 1px rgba(109,40,217,.6),0 0 20px rgba(109,40,217,.15)}

.top-gauge:focus-visible{outline:2px solid var(--accent-green);outline-offset:3px}

.top-gauge-svg{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}

.top-gauge-track{fill:none;stroke:rgba(156,163,175,.12);stroke-width:3}

.top-gauge-fill{
  fill:none;
  stroke:var(--accent-green);
  stroke-width:3;
  stroke-linecap:round;
  transform:rotate(-90deg);
  transform-origin:50% 50%;
  stroke-dasharray:150.8px;
  stroke-dashoffset:150.8px;
  transition:stroke-dashoffset 80ms linear
}

.top-gauge-value{
  font-family:var(--font-num);
  font-size:.625rem;
  font-weight:700;
  color:var(--text-mist);
  position:relative;
  z-index:1;
  pointer-events:none
}

@media (max-width:920px){
  .site-header{padding:12px 16px 0}

  .nav-capsule{
    flex-wrap:wrap;
    border-radius:20px;
    padding:12px;
    gap:10px
  }

  .nav-capsule::before{display:none}

  .brand-mark{margin-right:auto;padding-right:6px}

  .btn-cta{order:2;margin-left:auto;padding:7px 16px;font-size:.8125rem}

  .nav-toggle{order:3;display:block}

  .site-nav{
    order:4;
    width:100%;
    display:none;
    margin-inline:0;
    padding-top:12px;
    border-top:1px solid rgba(76,29,149,.5)
  }

  .nav-capsule[data-open="true"] .site-nav{display:block}

  .nav-list{flex-direction:column;gap:2px}

  .nav-link{display:block;padding:12px 16px;border-radius:12px}

  .footer-split{grid-template-columns:1fr;gap:40px}

  .footer-index{grid-template-columns:1fr 1fr;gap:28px}

  .brand-slogan{display:none}

  .top-gauge{right:20px;bottom:20px}
}

@media (max-width:560px){
  .footer-index{grid-template-columns:1fr}

  .footer-bottom{flex-direction:column;align-items:flex-start}

  .brand-glyph{font-size:1.25rem}

  .brand-name{font-size:1rem}

  .btn-cta{padding:6px 12px;font-size:.75rem}

  .section{padding-block:56px}

  .footer-contact{padding:20px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important
  }

  .top-gauge-fill{transition:none}
}