/* CitizenOps.AI site styles */
body{margin:0;background:#04192B}
a{color:#8FE8AE}a:hover{color:#FFFFFF}
@keyframes gridPan{from{background-position:0 0,0 0}to{background-position:64px 64px,64px 64px}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,40px) scale(1.15)}100%{transform:translate(0,0) scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes shimmer{from{background-position:0% 50%}to{background-position:200% 50%}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(94,224,138,.6)}70%{box-shadow:0 0 0 10px rgba(94,224,138,0)}100%{box-shadow:0 0 0 0 rgba(94,224,138,0)}}
@keyframes barA{0%,100%{left:30%;width:26%}50%{left:38%;width:20%}}
@keyframes barB{0%,100%{left:50%;width:16%}50%{left:46%;width:22%}}
@keyframes barC{0%,100%{left:20%;width:30%}50%{left:26%;width:24%}}
@keyframes scan{0%{top:0%}100%{top:100%}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes travel{from{left:-20%}to{left:100%}}
@keyframes ring{from{stroke-dashoffset:302}to{stroke-dashoffset:120}}
@keyframes sheen{0%{left:-60%}60%,100%{left:130%}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.grid-bg{background-image:linear-gradient(rgba(143,232,174,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(143,232,174,.07) 1px,transparent 1px);background-size:64px 64px;animation:gridPan 12s linear infinite}
.orb{animation:drift 18s ease-in-out infinite}
.r1{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.r2{animation:rise .9s .15s cubic-bezier(.2,.7,.2,1) both}
.r3{animation:rise .9s .3s cubic-bezier(.2,.7,.2,1) both}
.r4{animation:rise .9s .45s cubic-bezier(.2,.7,.2,1) both}
.r5{animation:rise 1s .35s cubic-bezier(.2,.7,.2,1) both}
.glow-text{background:linear-gradient(90deg,#5EE08A,#38BDF8,#5EE08A);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
.live{animation:pulse 2s infinite}
.bA{animation:barA 5s ease-in-out infinite}.bB{animation:barB 6s ease-in-out infinite}.bC{animation:barC 7s ease-in-out infinite}
.scan{animation:scan 3.5s linear infinite}
.marquee{animation:marquee 40s linear infinite}
.travel{animation:travel 3.2s cubic-bezier(.6,0,.4,1) infinite}
.ring{animation:ring 2.4s cubic-bezier(.2,.7,.2,1) both}
.spin{animation:spin 16s linear infinite}
.spin-slow{animation:spin 60s linear infinite}
.xbadge{display:flex}
@media (max-width: 860px){.quad-grid{grid-template-columns:1fr!important}.xbadge{display:none}.quad{padding:32px 0!important;border-right:0!important;border-bottom:1px solid #C9D6E0!important}}
.node{transition:background .3s,border-color .3s,box-shadow .3s,transform .3s}
.sheen{animation:sheen 3.5s ease-in-out infinite}
.card{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.card:hover{transform:translateY(-6px);border-color:rgba(94,224,138,.55)!important;box-shadow:0 20px 50px -20px rgba(94,224,138,.35)}
.btn{transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(94,224,138,.6)}
.navlink{transition:color .2s}.navlink:hover{color:#FFFFFF!important}
.tab{transition:background .25s,color .25s,border-color .25s}
@supports (animation-timeline: view()){
.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
.fillbar{animation:fill linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
}
@media (max-width: 760px){.why-wheel{order:0}.why-right{order:1}.why-left{order:2;flex-direction:column-reverse!important}.why-left > div{align-items:flex-start!important;text-align:left!important}.why-left > div > div{flex-direction:row!important}.node-label{display:none!important}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

html{scroll-behavior:smooth;scroll-padding-top:80px}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}
.dc-for{display:contents}
input:focus,textarea:focus{outline:2px solid #5EE08A;outline-offset:1px}
a:focus-visible,button:focus-visible{outline:2px solid #5EE08A;outline-offset:3px}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,0.25);border-radius:10px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
@media (max-width: 1080px){
  #site-header .menu-btn{display:inline-flex;margin-left:auto}
  #site-header .site-nav{display:none!important;width:100%;flex-direction:column;align-items:stretch!important;gap:4px!important;padding:8px 0 4px}
  #site-header.open .site-nav{display:flex!important}
  #site-header .site-nav a{padding:12px 4px}
  #site-header .site-nav .nav-cta{text-align:center;margin-top:8px;padding:14px 18px!important}
}
@media (max-width: 760px){
  h1{font-size:44px!important}
  h2{font-size:34px!important}
  [style*="padding: 120px 24px"]{padding-top:72px!important;padding-bottom:72px!important}
  [style*="padding: 112px 24px 120px"]{padding-top:64px!important;padding-bottom:80px!important}
  [style*="padding: 72px 56px"]{padding:40px 22px!important}
  [style*="padding: 0 24px 120px"]{padding-bottom:72px!important}
  .hero-badge{left:12px!important}
  .node-label{display:none!important}
  .wedge-label{font-size:11px!important;width:76px!important}
  [style*="font-size: 44px; line-height: 1.15"]{font-size:28px!important}
}