/* Green palette based on Arcsegma: primary 600 #16a34a, primary 500 #22c55e. */
:root{--blue:#16a34a;--cyan:#4ade80;--arcseg-green:#22c55e}
#heroArt canvas,.svc2-gl,.ads-gl,.ci-grid{filter:hue-rotate(-75deg)}
::selection{background:#16a34a;color:#fff}
/* First fold: apply the green treatment to the desktop portrait video and
   its still-image fallback as well as the mobile canvas. */
#heroArt .fg-clip,#heroArt .face-grid::before{filter:hue-rotate(-75deg)}
#top.hero{background:radial-gradient(1100px 620px at 18% 30%,rgba(22,163,74,.3),transparent 65%),radial-gradient(900px 520px at 85% 75%,rgba(34,197,94,.22),transparent 68%),#020f08}
#heroArt .art-glow{background:radial-gradient(circle at 50% 46%,rgba(34,197,94,.38),transparent 62%);filter:blur(30px)}
/* Interactive camera replaces the portrait on desktop and mobile. */
#heroArt{display:block;min-height:0;width:min(43vw,640px);height:min(72vh,690px);aspect-ratio:auto;right:3vw;top:52%;opacity:1;cursor:default;perspective:1100px}
#heroArt .glass-lens-ball{display:none!important}
#heroArt .art-glow{inset:-8% -20%;opacity:.75;background:radial-gradient(ellipse at 50% 50%,rgba(34,197,94,.3),transparent 66%)}
.camera-object{position:absolute;inset:0;transform-origin:50% 65%;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 0 26px rgba(34,197,94,.15)) drop-shadow(var(--camera-shadow-x,0px) 32px 24px rgba(0,0,0,.5))}
.camera-view{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;opacity:0;filter:none;-webkit-user-drag:none}
.camera-front{opacity:1}
@media(max-width:820px){
 #top.hero{padding-top:calc(100px + min(80vw,420px));padding-bottom:44px}
 #heroArt{top:88px;left:50%;right:auto;transform:translateX(-50%);width:min(75vw,370px);height:min(80vw,420px);z-index:1;opacity:1;pointer-events:none}
 #heroArt .art-glow{inset:-12% -15%}
}
@media(prefers-reduced-motion:reduce){.camera-object{will-change:auto;transform:none!important}}

/* Green pointer and trail match the Arcsegma palette. */
@media(hover:hover) and (pointer:fine){
 html,body,main,header,nav,section,a,button,[role="button"],#heroArt,.hero-art{
 cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M3 2L3 25L9 19L14 29L19 26L14 17L23 17Z' fill='%2322c55e' stroke='%23052e16' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,auto;
 }
}
/* ARCSEG navigation, matching the supplied reference. */
#nav.arcseg-nav{height:96px;padding:0 clamp(24px,3.3vw,68px);gap:clamp(20px,2vw,38px);background:linear-gradient(180deg,rgba(2,10,13,.9),rgba(2,10,13,.2));z-index:60}
#nav.arcseg-nav.is-stuck{background:rgba(2,12,13,.95);backdrop-filter:blur(16px)}
#nav .nav-logo{border:0;padding:0;min-height:0;flex:0 0 auto;border-radius:0}
#nav .nav-logo img{display:block;width:clamp(160px,13vw,240px);height:auto;max-height:64px;object-fit:contain}
#nav .nav-links{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.45vw,30px);margin-left:auto;font-family:Inter,Arial,sans-serif;letter-spacing:0}
#nav .nav-links a{position:relative;display:block;padding:13px 0;color:#c4cbd0;font:600 clamp(13px,.95vw,18px)/1.2 Inter,Arial,sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap;text-decoration:none}
#nav .nav-links a:hover,#nav .nav-links a.is-active{color:#fff}
#nav .nav-links a.is-active::after{content:"";position:absolute;bottom:2px;left:50%;width:24px;height:3px;border-radius:2px;background:#00c991;transform:translateX(-50%)}
#nav .nav-cta,#navDrawer .nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex-shrink:0;margin:0;padding:12px 20px;border:1px solid #00b880;border-radius:999px;background:rgba(0,187,127,.08);color:white;font:600 clamp(13px,.95vw,18px)/1.2 Inter,Arial,sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap;text-decoration:none;transition:background .2s,box-shadow .2s}
#nav .nav-cta:hover,#navDrawer .nav-cta:hover{background:#009b68;box-shadow:0 0 24px #00bb7f33}
.nav-cta svg{width:25px;height:25px;flex-shrink:0}
#nav .nav-toggle{display:none}
#navDrawer{top:95px;z-index:59;background:rgba(2,14,15,.98);max-height:calc(100dvh - 95px);overflow:auto}
#navDrawer[hidden]{display:none}
#navDrawer a{font:600 15px/1.4 Inter,Arial,sans-serif;letter-spacing:0;color:#d6dedb;min-height:48px}
#navDrawer a.is-active{color:#22c55e}
#navDrawer .nav-cta{margin-top:18px;color:#fff}
#top.hero{padding-top:126px;scroll-margin-top:96px}
@media(max-width:1180px){
 #nav.arcseg-nav{height:82px;gap:18px}
 #nav .nav-links{display:none}
 #nav .nav-cta{margin-left:auto}
 #nav .nav-toggle{display:flex;margin-left:0;flex-shrink:0}
 #navDrawer{top:81px;max-height:calc(100dvh - 81px)}
}
@media(max-width:640px){
 #nav.arcseg-nav{height:76px;padding:0 20px}
 #nav .nav-logo img{width:164px;max-height:52px}
 #nav>.nav-cta{display:none}
 #nav .nav-toggle{margin-left:auto}
 #navDrawer{top:75px;max-height:calc(100dvh - 75px)}
 #top.hero{padding-top:calc(100px + min(80vw,420px))}
}
@media(max-width:820px){#top.hero{padding-top:calc(100px + min(80vw,420px))}}