:root {
  /* Brand colors: swap in ArcSpan's exact hex codes here */
  --navy: #0E2240;
  --accent: #1F5FBF;
  --accent-bright: #8EBEFF;
}
html { scroll-behavior: smooth; }
body{margin:0}
a{color:var(--accent)}a:hover{color:var(--navy)}
.arc-flow{animation:arcDrift 14s ease-in-out infinite alternate;transform-origin:50% 50%}
.arc-flow-2{animation:arcDrift2 18s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes arcDrift{from{transform:translate(0,0) scaleY(1)}to{transform:translate(-30px,14px) scaleY(1.06)}}
@keyframes arcDrift2{from{transform:translate(0,0)}to{transform:translate(40px,-18px)}}

/* Home hero: the ribbon drifts while the stroke gradient sweeps along it */
.arc-hero .arc-flow{animation:arcDriftHome 18s ease-in-out infinite;transform-origin:50% 55%}
.arc-hero .arc-flow-2{animation:arcDriftHome2 22s ease-in-out infinite;transform-origin:42% 70%}
@keyframes arcDriftHome{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1,1)}
  28%{transform:translate3d(-78px,26px,0) rotate(-1.1deg) scale(1.03,1.07)}
  55%{transform:translate3d(-18px,40px,0) rotate(0.35deg) scale(0.99,1.02)}
  78%{transform:translate3d(54px,-16px,0) rotate(0.9deg) scale(1.04,0.97)}
  100%{transform:translate3d(0,0,0) rotate(0deg) scale(1,1)}
}
@keyframes arcDriftHome2{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  35%{transform:translate3d(64px,-30px,0) rotate(0.8deg)}
  68%{transform:translate3d(10px,24px,0) rotate(-0.45deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}
@media (prefers-reduced-motion: reduce){
  .arc-flow,.arc-flow-2{animation:none}
}
.arc-logo{height:46px;width:auto;display:block}
.arc-logo-footer{height:38px}
@media (max-width: 760px){.arc-navlinks{display:none !important}.arc-span{display:none !important}.arc-logo{height:34px}.arc-logo-footer{height:30px}}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--accent) !important}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:disabled{opacity:0.6;cursor:default}