@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-bottom > a { position:relative;inset:auto;justify-self:start;max-width:100%; }
.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%); } }

/* Crystal universe: keep the vignette at the edges and the subject readable. */
.light-field { background:radial-gradient(ellipse at 48% 40%,#77144455,transparent 60%),radial-gradient(ellipse at 85% 70%,#1927b055,transparent 55%),#050610; }
.scene-focus { background:radial-gradient(ellipse 49% 48% at 50% 50%,transparent 50%,#03030b18 66%,#0203099e 90%,#020309d9 100%); }
.scene-shade { background:linear-gradient(0deg,#03030b32,transparent 18%,transparent 84%,#03030b25); }
.scene-shade::before { background:linear-gradient(90deg,#04040c9c,transparent 54%); }
.scene-shade::after { background:linear-gradient(270deg,#04040c9c,transparent 54%); }
.connections { background:transparent; }
.work { background:linear-gradient(180deg,#09081318,#08061032 25%,#08061073 72%,#080610b0 93%,#08061028); }
.clients { position:relative; isolation:isolate; }
.clients::before { content:'';position:absolute;inset:-60px -3vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,#080610b8,transparent 74%); }
.scene-poster { width:54%;height:88%;right:2%;top:6%;filter:brightness(1.08);mix-blend-mode:normal; }
.scene-fallback .scene-poster { opacity:.92; }
@media(max-width:760px) {
  .universe canvas { opacity:var(--scene-opacity); }
  .scene-focus { background:radial-gradient(ellipse at 50% 48%,transparent 40%,#03030b28 68%,#020309c4 100%); }
  .scene-shade { background:linear-gradient(90deg,#03030b7a,transparent 78%); }
  .work { background:linear-gradient(#08061060,#080610b8 85%,#08061055); }
  .scene-poster { width:90%;height:75%;right:-12%;top:15%; }
}

/* Small vector gestures: each action keeps its own semantic icon. */
[data-button-icon] { align-items:center;gap:14px; }
.button-icon { width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;vertical-align:middle; }
.button-icon svg { width:24px;height:24px;overflow:visible;transition:transform .48s cubic-bezier(.2,.8,.2,1); }
.button-icon .icon-detail { transform-origin:12px 12px;transition:transform .48s cubic-bezier(.2,.8,.2,1),stroke-dashoffset .6s; }
:is(a,button):is(:hover,:focus-visible) .icon-projects svg { transform:translateY(-2px) rotate(-7deg); }
:is(a,button):is(:hover,:focus-visible) .icon-projects .icon-detail { transform:translateY(-1px); }
:is(a,button):is(:hover,:focus-visible) .icon-create .icon-detail { transform:rotate(-9deg) scale(1.12); }
:is(a,button):is(:hover,:focus-visible) .icon-chat svg { transform:rotate(-6deg) scale(1.06); }
:is(a,button):is(:hover,:focus-visible) .icon-chat .icon-detail { transform:translateX(1px); }
:is(a,button):is(:hover,:focus-visible) .icon-view .icon-detail { transform:translateY(-1px); }
:is(a,button):is(:hover,:focus-visible) .icon-home svg { transform:translateY(-3px); }
:is(a,button):is(:hover,:focus-visible) .icon-send svg { transform:translate(2px,-2px) rotate(5deg); }
.header-contact:hover .button-icon,.other-projects a:hover .button-icon { transform:none; }
.direct-contact,[data-button-icon="home"],.mobile-nav [data-button-icon],.lead-assistant .lead-primary,.lead-assistant .lead-direct,.lead-assistant .lead-submit { display:inline-flex;align-items:center;gap:12px; }
.lead-assistant .lead-primary,.lead-assistant .lead-submit { justify-content:center; }
.visit-circle .button-icon { pointer-events:none; }
.chat-avatar { background:#ffd9e6;border-color:#f6a9ca; }
.chat-avatar img { width:100%;height:100%;object-fit:cover;object-position:center;filter:none; }
@media(prefers-reduced-motion:reduce) { .button-icon svg,.button-icon .icon-detail { transition:none;transform:none!important; } }
.motion-paused .button-icon svg,.motion-paused .button-icon .icon-detail { transition:none;transform:none!important; }

/* Contact actions have separate breathing room, including after icon enhancement. */
.contact .section-content>.pill-button { display:flex;width:fit-content;max-width:100%; }
.contact .direct-contact { display:flex;width:fit-content;max-width:100%;margin-top:50px; }
.crystal-cursor { position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:0; }
.crystal-cursor.is-visible { opacity:1; }
.crystal-cursor-tip { position:absolute;left:0;top:0;width:25px;height:31px;will-change:transform; }
.crystal-cursor-tip svg { width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 5px #9e83fa77);transform-origin:1px 1px;transition:transform .3s,filter .3s; }
.crystal-cursor.is-action .crystal-cursor-tip svg { transform:rotate(-12deg) scale(1.16);filter:drop-shadow(0 0 8px #debaffaa); }
.crystal-cursor-light { position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#f6edff 0 12%,#b6a1ff99 32%,#8b63f033 57%,transparent 74%);will-change:transform; }
html.crystal-pointer-active,html.crystal-pointer-active * { cursor:none!important; }
@media(max-width:760px) {
  .scene-poster { width:60%;height:43%;right:-7%;top:46%; }
  .contact .direct-contact { margin-top:50px;line-height:1.6; }
}
@media(prefers-reduced-motion:reduce),(pointer:coarse) { .crystal-cursor { display:none; } }

/* Overscan exceeds every camera offset, keeping vignette edges off-screen. */
.universe { overflow:hidden; }
.scene-focus { inset:-50%;background:radial-gradient(ellipse 33.3% 32.6% at 50% 50%,transparent 50%,#03030b18 66%,#0203099e 90%,#020309d9 100%); }
.connections::before,.essence::before { content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,#897db342,#c9b6edb8 28%,#eee5ffe6 50%,#bca4eeb8 72%,#897db342);box-shadow:0 0 14px #a78adb65; }
.work { background:linear-gradient(180deg,transparent 0,#08061018 240px,#08061073 72%,#080610b0 93%,transparent 100%); }
@media(max-width:760px) {
  .scene-focus { background:radial-gradient(ellipse 34% 34% at 50% 50%,transparent 40%,#03030b28 68%,#020309c4 100%); }
  .work { background:linear-gradient(180deg,transparent 0,#08061060 200px,#080610b8 85%,transparent 100%); }
}
@media(hover:none) and (pointer:coarse) {
  .chapter,.footer { touch-action:pan-y pinch-zoom; }
  .scene-poster { width:120%;height:80%;right:-38%;top:33%; }
}