@property --orbit-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --title-accent: #9270f5; }
em { color: var(--title-accent); }
.light-field { background: radial-gradient(ellipse at 85% 30%,#44258266 0,transparent 54%),radial-gradient(ellipse at 15% 80%,#212bb855 0,transparent 54%),linear-gradient(130deg,#0e1020,#12102a 55%,#100c22); animation: universe-breathe 22s ease-in-out infinite alternate; }
.scene-shade { background: linear-gradient(90deg,#0d0d125c,transparent 60%),linear-gradient(0deg,#0d0d1240,transparent 25%),linear-gradient(180deg,#0d0d1250,transparent 20%); }
.work { background: linear-gradient(#0e0b19a3,#0e0b19b3 160px,#0e0b19b3 85%,#0e0b19a3); }
.hero-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:35px; }
.hero-actions .pill-button { margin-top:0; gap:24px; }
.pill-button { position:relative; isolation:isolate; overflow:hidden; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background .45s,border-color .45s; }
.pill-button > * { position:relative; z-index:2; }
.pill-button .button-label { font-size:14px; line-height:1.35; }
.pill-button .button-arrow { font-size:23px; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.pill-button::after { content:''; position:absolute; inset:0; background:radial-gradient(160px circle at var(--pointer-x,50%) var(--pointer-y,50%),#c8adff88,transparent 75%); opacity:0; transition:opacity .5s; pointer-events:none; }
.pill-button:hover { transform:translateY(-3px); box-shadow:0 8px 35px #8657e12e; }
.pill-button:hover::after { opacity:1; }
.pill-button:hover .button-arrow { transform:translate(3px,-3px); }
.hero-actions .pill-button { min-height:57px; color:#f8f4ff; border-color:#9484be52; background:#161128bc; overflow:visible; }
.hero-actions .pill-button::before { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; background:conic-gradient(from var(--orbit-angle),#6e42bc00 3%,#b9acff99 19%,#f0e9ff 24%,#6e42bc00 29%,#6e42bc00 60%,#725dff 73%,#de9bff 77%,#6e42bc00 84%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:orbit-light 8s linear infinite; pointer-events:none; }
.hero-actions .pill-button::after { border-radius:inherit; opacity:.52; background:radial-gradient(130px circle at var(--pointer-x,15%) var(--pointer-y,90%),#7860ed70,transparent 78%); }
.hero-actions .cta-create { background:linear-gradient(115deg,#392564e6,#3821a0e6); box-shadow:inset 0 1px 18px #9370f02e,0 0 30px #763ae528; }
.hero-actions .cta-create::before { animation-duration:6s; animation-direction:reverse; }
.hero-actions .cta-create::after { background:radial-gradient(180px circle at var(--pointer-x,80%) var(--pointer-y,30%),#cf9dff8c,transparent 75%); }
.hero-actions .pill-button:hover { box-shadow:inset 0 0 24px #a48ae62b,0 0 32px #8a53ee45; }
.hero-actions .pill-button:hover::after { opacity:1; }
.header-contact { position:relative; overflow:hidden; background:linear-gradient(115deg,#17142670,#2c194b66); transition:border-color .4s,box-shadow .4s; }
.header-contact:hover { border-color:#b48ff0; box-shadow:inset 0 0 20px #9e73ff20; }
.header-contact span { transition:transform .4s; }
.header-contact:hover span { transform:rotate(45deg); }
.footer-social,.footer-nav a,.footer-bottom a,.direct-contact { position:relative; width:fit-content; transition:color .4s,text-shadow .4s,transform .4s; }
.footer-social::after,.footer-nav a::after,.footer-bottom a::after,.direct-contact::after { content:''; position:absolute; bottom:-5px; left:0; width:100%; height:1px; background:linear-gradient(90deg,#7954f0,#d7b8ff); transform:scaleX(0); transform-origin:right; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.footer-social:hover::after,.footer-nav a:hover::after,.footer-bottom a:hover::after,.direct-contact:hover::after { transform:scaleX(1); transform-origin:left; }
.footer-social:hover { text-shadow:0 0 18px #c3a4ff88; transform:translateY(-2px); }
.footer-nav a:hover { color:#d8bdff; }
.footer-bottom a:hover { transform:translateY(-3px); }
.other-projects a span,.scroll-cue { transition:transform .45s; }
.other-projects a:hover span { transform:translate(4px,-3px); }
.scroll-cue:hover { transform:translateY(5px); }
.chapter-nav a:hover i { box-shadow:0 0 12px #c6a8ff; transform:scale(1.35); }
.service-list details,.faq-list details,.more-projects { overflow:hidden; }
details[data-animating] { overflow:hidden; }
.accordion-content { display:flow-root; }
.service-list summary,.faq-list summary,.more-projects>summary { transition:color .4s,background .4s,padding-left .4s; }
.service-list summary:hover,.faq-list summary:hover,.more-projects>summary:hover { color:#cebaff; padding-left:7px; }
.plus::before,.plus::after { transition:transform .5s cubic-bezier(.22,1,.36,1),background .4s; }
summary[aria-expanded=true] .plus::after { transform:rotate(0); }
summary[aria-expanded=false] .plus::after { transform:rotate(90deg); }
.menu-toggle span { transition:transform .4s; }
.menu-toggle[aria-expanded=true] span:first-child { transform:translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-4px) rotate(-45deg); }
.experience-controls button { transition:transform .4s,border-color .4s,box-shadow .4s; }
.experience-controls button:hover { transform:scale(1.08); border-color:#b88df7; box-shadow:0 0 18px #9a5af530; }
.title-lens { position:relative; --lens-radius:0px; --lens-x:-500px; --lens-y:-500px; }
.title-copy { display:block; mask-image:radial-gradient(circle at var(--lens-x) var(--lens-y),transparent max(0px,calc(var(--lens-radius) - 5px)),#000 var(--lens-radius)); }
.title-stroke,.title-trace { display:block;position:absolute;inset:0;pointer-events:none;color:transparent!important;-webkit-text-stroke:.8px #eee4ff;clip-path:circle(var(--lens-radius) at var(--lens-x) var(--lens-y));opacity:.24; }
.title-stroke *,.title-trace * { color:transparent!important; -webkit-text-stroke:inherit; }
.title-trace { opacity:.95; -webkit-text-stroke:.85px #f6f0ff; mask-image:var(--trace-field,none); clip-path:circle(var(--lens-radius) at var(--lens-x) var(--lens-y)); }
.lead-assistant .lead-brand { width:140px; height:46px; object-fit:contain; object-position:left center; margin-bottom:16px; }
.lead-assistant .lead-primary { position:relative; transition:box-shadow .4s,transform .4s,background .4s; background:linear-gradient(110deg,#f5f1fc,#d9c4ff); }
.lead-assistant .lead-primary:hover { transform:translateY(-2px); box-shadow:0 0 25px #b088f537; filter:none; }
.lead-assistant .lead-choice { transition:border-color .35s,background .35s,transform .35s,box-shadow .35s; }
.lead-assistant .lead-choice:hover { transform:translateY(-2px); box-shadow:inset 0 0 20px #9467ef16; background:radial-gradient(120px circle at var(--pointer-x,50%) var(--pointer-y,50%),#9764d725,transparent),var(--lead-surface); }
.lead-assistant .lead-submit { transition:background .4s,border-color .4s,box-shadow .4s; }
.lead-assistant .lead-submit:hover { background:#aa82eb15; box-shadow:inset 0 0 18px #aa82eb15; }
.lead-close { transition:transform .4s,color .4s; }
.lead-close:hover { transform:rotate(90deg); color:var(--lead-accent); }
.lead-direct,.lead-text-button { transition:color .3s,text-shadow .3s; }
.lead-direct:hover,.lead-text-button:hover { color:var(--lead-accent); text-shadow:0 0 12px #b282ed55; }
.chat-launcher { position:fixed; bottom:74px; right:28px; z-index:38; display:flex; align-items:center; gap:13px; border:0; background:none; padding:0; color:#f4edff; }
.chat-question { padding:12px 17px; border:1px solid #b692ee50; border-radius:18px 18px 3px 18px; background:#19102cde; backdrop-filter:blur(18px); font-size:13px; box-shadow:0 8px 35px #0003; transform-origin:right bottom; transition:transform .5s,background .5s; }
.chat-avatar { position:relative; display:block; width:76px; height:76px; border:1px solid #ba8df699; border-radius:50%; background:radial-gradient(circle at 50% 70%,#5931a8,#171021 72%); box-shadow:0 0 26px #8550d72e,inset 0 0 20px #b481e324; animation:mascot-float 6s ease-in-out infinite; }
.chat-avatar::after { content:''; position:absolute; inset:-5px; border:1px solid #ae86f535; border-radius:50%; animation:mascot-halo 5s ease-out infinite; pointer-events:none; }
.chat-avatar canvas,.chat-avatar img { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:contain; }
.chat-avatar img { padding:0; object-fit:cover; }
.chat-avatar.is-rendered img { display:none; }
.chat-launcher:hover .chat-question { transform:translateX(-4px); background:#2d194c; }
.chat-launcher:hover .chat-avatar { box-shadow:0 0 35px #a275ed66,inset 0 0 22px #b481e337; }
.chat-launcher:active { transform:scale(.98); }
.client-logos { grid-template-columns:repeat(4,minmax(0,1fr)); gap:50px 42px; }
.client-logos img { max-width:155px; justify-self:center; transition:opacity .5s,transform .5s,filter .5s; }
.client-logos img:hover { opacity:1; transform:translateY(-4px); }
.client-wordmark { text-align:center; font:500 20px var(--heading); color:#e2d7ed; opacity:.75; letter-spacing:.03em; }
@keyframes orbit-light { to { --orbit-angle:360deg; } }
@keyframes universe-breathe { to { transform:translate3d(3%,-2%,0) scale(1.04); } }
@keyframes mascot-float { 50% { transform:translateY(-5px); } }
@keyframes mascot-halo { 0%,20% { transform:scale(.96); opacity:0; } 35% { opacity:.6; } 100% { transform:scale(1.26); opacity:0; } }
@media(max-width:760px) {
  .hero { padding-bottom:175px; }
  .hero .scroll-cue { bottom:132px; }
  .hero-actions { gap:13px; margin-top:28px; align-items:flex-start; flex-direction:column; }
  .hero-actions .pill-button { min-height:53px; gap:22px; padding:13px 20px; }
  .scene-shade { background:linear-gradient(90deg,#0d0d1260,transparent),linear-gradient(0deg,#0d0d1240,#0d0d1250); }
  .chat-launcher { right:17px; bottom:61px; gap:9px; }
  .chat-avatar { width:58px; height:58px; }
  .chat-question { font-size:12px; padding:10px 12px; }
  .client-logos { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 22px; }
  .client-logos img { max-width:110px; }
  .client-wordmark { font-size:16px; }
  .lead-assistant .lead-brand { width:118px; height:35px; margin-bottom:12px; }
}
@media(max-height:700px) and (max-width:760px) { .hero { min-height:770px; } }
@media(prefers-reduced-motion:reduce) {
  .light-field,.title-trace,.chat-avatar,.chat-avatar::after,.hero-actions .pill-button::before { animation:none!important; }
  .pill-button,.pill-button *,.lead-assistant button,.lead-assistant a,.chat-launcher *,.footer-social,.footer-nav a,.footer-bottom a { transition:none!important; }
}
.motion-paused .light-field,.motion-paused .title-trace,.motion-paused .chat-avatar,.motion-paused .chat-avatar::after,.motion-paused .hero-actions .pill-button::before { animation-play-state:paused; }

.hero-note { text-shadow:0 2px 12px #06020dee; }
.pill-button::after { z-index:-1; }

/* Two shadow layers crossfade with the camera instead of swapping gradients. */
.scene-shade,html[data-scene-side="right"] .scene-shade { background:linear-gradient(180deg,#0d0d122a,transparent 24%,transparent 78%,#0d0d122b); transition:none; }
.scene-shade::before,.scene-shade::after { content:"";position:absolute;inset:0; }
.scene-shade::before { background:linear-gradient(90deg,#0d0d128c,transparent 65%);opacity:var(--shade-left,1); }
.scene-shade::after { background:linear-gradient(270deg,#0d0d129c,transparent 65%);opacity:var(--shade-right,0); }

.work { background:linear-gradient(transparent,#0e0b19b3 220px,#0e0b19b3 calc(100% - 220px),transparent); }
.faq { background:linear-gradient(transparent,#151121d9 110px,#151121d9 calc(100% - 110px),transparent);border-color:transparent; }

/* A quiet, dark surround directs attention without full-screen animated filters. */
.universe { background:#030408; }
.light-field { inset:0; animation:none; transition:none; background:radial-gradient(ellipse at 83% 35%,#271b483d,transparent 55%),radial-gradient(ellipse at 22% 79%,#171b4936,transparent 52%),#04050b; }
.scene-focus { position:absolute;inset:-18%;pointer-events:none;will-change:transform;background:radial-gradient(ellipse 46% 44% at 50% 49%,transparent 20%,#02030920 43%,#020309c9 80%,#020309fa 100%); }
.scene-shade::before { background:linear-gradient(90deg,#020309b3,transparent 65%); }
.scene-shade::after { background:linear-gradient(270deg,#020309b3,transparent 65%); }
.hero:not(.is-in-view) .hero-actions .pill-button::before { animation-play-state:paused; }
@media(max-width:760px) { .scene-focus { background:radial-gradient(ellipse at 54% 47%,transparent 20%,#02030928 47%,#020309de 85%,#020309fa 100%); } }