/* AJSH.AI motion layer — lightweight, responsive, reduced-motion aware */
:root{--motion-ease:cubic-bezier(.16,1,.3,1);--motion-line:rgba(196,181,253,.22)}
:root[data-theme="light"]{--motion-line:rgba(109,40,217,.14)}
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero>.fx{position:absolute;inset:-42px 0 0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint;mask-image:linear-gradient(#000 78%,transparent)}
.hero>.wrap{position:relative;z-index:1}
.fx>*{position:absolute;pointer-events:none}
.fx-glow{inset:-10%;background:radial-gradient(46% 58% at 80% 24%,rgba(124,58,237,.30),transparent 70%),radial-gradient(34% 44% at 6% 80%,rgba(99,102,241,.17),transparent 70%);animation:ajGlow 17s ease-in-out infinite alternate;will-change:transform,opacity}
.fx-glow.alt{background:radial-gradient(40% 52% at 60% 14%,rgba(167,139,250,.22),transparent 70%),radial-gradient(36% 46% at 94% 72%,rgba(244,114,182,.14),transparent 70%);animation:ajGlowAlt 19s ease-in-out infinite alternate}
.fx-beam{top:-24%;right:-6%;width:72%;height:140%;background:linear-gradient(104deg,transparent 38%,rgba(196,181,253,.12) 47%,transparent 56%);mask-image:linear-gradient(#000,transparent 86%);transform-origin:82% 0;animation:ajBeam 15s ease-in-out infinite alternate}
.fx-tech{inset:0;background-image:linear-gradient(rgba(167,139,250,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.055) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(46% 64% at 77% 36%,#000,transparent 74%)}
.fx-grid{left:-12%;right:-12%;bottom:0;height:48%;mask-image:linear-gradient(to top,#000 8%,rgba(0,0,0,.6) 50%,transparent 92%)}
.fx-grid i{position:absolute;left:0;right:0;bottom:0;height:230%;overflow:hidden;transform-origin:50% 100%;transform:perspective(360px) rotateX(70deg)}
.fx-grid b{position:absolute;inset:-72px 0 0;background-image:linear-gradient(var(--motion-line) 1px,transparent 1px),linear-gradient(90deg,var(--motion-line) 1px,transparent 1px);background-size:72px 72px;animation:ajGrid 7s linear infinite}
.fx-hz{left:6%;right:6%;bottom:42%;height:140px;background:radial-gradient(55% 100% at 50% 100%,rgba(124,58,237,.2),transparent 72%)}
.fx-cv{left:0;top:0;width:100%;height:100%}
.fx-scrim{inset:0;background:radial-gradient(58% 74% at 24% 48%,color-mix(in srgb,var(--bg) 74%,transparent),transparent 74%)}
@keyframes ajGlow{to{opacity:.55;transform:translate3d(-2%,2%,0) scale(1.06)}}
@keyframes ajGlowAlt{from{opacity:.25;transform:translate3d(1%,0,0)}to{opacity:.8;transform:translate3d(-1%,-2%,0)}}
@keyframes ajBeam{from{transform:rotate(-2deg);opacity:.45}to{transform:rotate(2deg);opacity:.9}}
@keyframes ajGrid{to{transform:translateY(72px)}}
@keyframes ajRise{from{opacity:0;translate:0 22px}}
@keyframes ajHeroShow{from{opacity:0;translate:0 34px;scale:.97}}
.hero .eyebrow,.hero h1,.hero .lead,.hero .cta,.hero .show{animation:ajRise .9s var(--motion-ease) both}
.hero .eyebrow{animation-delay:.05s}.hero h1{animation-delay:.13s}.hero .lead{animation-delay:.28s}.hero .cta{animation-delay:.38s}.hero .show{animation:ajHeroShow 1.15s var(--motion-ease) .2s both}
.hero .eyebrow i{position:relative}
.hero .eyebrow i:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pink);animation:ajPing 2.6s ease-out 1s infinite}
@keyframes ajPing{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(3);opacity:0}}
header{transition:background-color .35s,box-shadow .35s,border-color .35s}
header.sc{background:color-mix(in srgb,var(--bg) 93%,transparent);border-bottom-color:color-mix(in srgb,var(--violet) 22%,var(--line));box-shadow:0 12px 32px -22px rgba(0,0,0,.65);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--purple),var(--violet) 55%,var(--pink));transform-origin:0 50%;transform:scaleX(var(--motion-progress,0));opacity:0;transition:opacity .3s;pointer-events:none}
header.sc:after{opacity:1}
.logo{transition:transform .4s var(--motion-ease)}header.sc .logo{transform:scale(.97);transform-origin:left center}
.logo .mk{transition:transform .5s var(--motion-ease)}.logo:hover .mk{transform:rotate(-8deg) scale(1.08)}
.btn{transition:transform .22s var(--motion-ease),border-color .2s,box-shadow .25s,background-color .2s,translate .3s var(--motion-ease)}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.98)}
.btn .go{transition:transform .3s var(--motion-ease)}.btn:hover .go{transform:translateX(4px)}
.btn.p:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);translate:-130% 0;transition:translate .75s var(--motion-ease)}
.btn.p:hover:before{translate:130% 0}
@media(min-width:861px){nav.ix ul{position:relative}nav.ix a{position:relative;z-index:1}nav.ix a:hover,nav.ix a.on{background:transparent}.ni{position:absolute;left:0;top:0;z-index:0;width:var(--w,0);height:var(--h,0);border-radius:10px;background:var(--card2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--violet) 22%,transparent);transform:translate(var(--x,0),var(--y,0));opacity:0;transition:transform .42s var(--motion-ease),width .42s var(--motion-ease),height .42s var(--motion-ease),opacity .25s;pointer-events:none}.ni.on{opacity:1}.ni.nt{transition:opacity .25s}}
@media(max-width:860px){.ni{display:none}header.open nav{animation:ajMenuIn .35s var(--motion-ease)}header.open nav li{animation:ajRise .45s var(--motion-ease) backwards}header.open nav li:nth-child(2){animation-delay:.04s}header.open nav li:nth-child(3){animation-delay:.08s}header.open nav li:nth-child(4){animation-delay:.12s}}
@keyframes ajMenuIn{from{opacity:0;translate:0 -8px}}
.svc .card{position:relative;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s var(--motion-ease),box-shadow .3s,border-color .3s}
.svc .card:hover,.svc .card:focus-visible{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px);box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--cc,var(--violet)) 25%,transparent)}
.svc .card:before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(240px 190px at var(--mx,50%) var(--my,0%),rgba(167,139,250,.18),transparent 72%)}
.svc .card:hover:before,.svc .card:focus-visible:before{opacity:1}
.svc .card h3,.svc .card .chip{transition:translate .35s var(--motion-ease)}.svc .card:hover h3{translate:0 -2px}.svc .card:hover .chip{translate:0 -3px}
.step,.fr,.about,.loop{transition:transform .3s var(--motion-ease),border-color .3s}.step:hover{transform:translateY(-3px)}.fr:hover{transform:translateX(3px)}.about .chip{transition:transform .45s var(--motion-ease)}.about:hover .chip{transform:rotate(-7deg) scale(1.05)}
details{transition:border-color .25s,background-color .25s}details[open]{background:color-mix(in srgb,var(--card) 93%,var(--violet))}summary{transition:color .2s}summary:hover{color:var(--acc)}details[open] p{animation:ajRise .45s var(--motion-ease) .04s both}
.loop{position:relative;overflow:hidden}.loop:before{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(244,114,182,.24),transparent 70%);translate:0 calc(var(--motion-parallax,0)*38px);pointer-events:none}
html.mo :where(.svc .card,.about,.fq details,.band .cg .btn,.fr,.step,.sh .eyebrow,.sh h2,.lui,.loop,.band){transition:opacity .85s var(--motion-ease) var(--motion-delay,0ms),translate .85s var(--motion-ease) var(--motion-delay,0ms),scale .85s var(--motion-ease) var(--motion-delay,0ms),clip-path .95s var(--motion-ease) var(--motion-delay,0ms)}
html.mo :where(.svc .card,.about,.fq details,.band .cg .btn,.fr,.step,.loop){opacity:0;translate:0 24px}
html.mo .fr{translate:26px 0}html.mo .step{scale:.96;translate:0 16px}
html.mo .sh .eyebrow{opacity:0;translate:-14px 0}
html.mo .sh h2{opacity:0;translate:-14px 0;clip-path:inset(-10px 100% -10px -10px)}
html.mo .lui,html.mo .band{clip-path:inset(-50px 100% -50px -50px round 20px)}
html.mo .vs{opacity:1!important;translate:0 0!important;scale:1!important;clip-path:inset(-60px)!important}
html.mo .fr .fn{opacity:0;translate:-8px 0;transition:opacity .45s var(--motion-ease) calc(.25s + var(--n,0)*.08s),translate .45s var(--motion-ease) calc(.25s + var(--n,0)*.08s)}
html.mo .fr.vs .fn{opacity:1;translate:0 0}
.fn:nth-child(2){--n:1}.fn:nth-child(3){--n:2}.fn:nth-child(4){--n:3}.fn:nth-child(5){--n:4}.fn:nth-child(6){--n:5}
@keyframes ajRevealSafe{to{opacity:1;translate:0 0;scale:1;clip-path:inset(-60px)}}
html.mo:not(.rvr) :where(.svc .card,.about,.fq details,.band .cg .btn,.fr,.step,.sh .eyebrow,.sh h2,.lui,.loop,.band){animation:ajRevealSafe 0s 3.5s forwards}
.hero.off .fx,.hero.off .fx *{animation-play-state:paused}
html.lp .fx-beam,html.lp .fx-glow.alt{display:none}html.lp .fx-glow,html.lp .fx-grid b{animation:none}
@media(max-width:900px){.fx-grid{height:42%}.fx-scrim{background:radial-gradient(92% 62% at 50% 28%,color-mix(in srgb,var(--bg) 78%,transparent),transparent 76%)}}
@media(prefers-reduced-motion:reduce){.fx-glow,.fx-glow.alt,.fx-beam,.fx-grid b,.hero .eyebrow i:after{animation:none!important}.hero .eyebrow,.hero h1,.hero .lead,.hero .cta,.hero .show{animation:none!important}.btn,.card,header,.logo{transition:none!important}html.mo :where(.svc .card,.about,.fq details,.band .cg .btn,.fr,.step,.sh .eyebrow,.sh h2,.lui,.loop,.band){opacity:1!important;translate:none!important;scale:1!important;clip-path:none!important}}
/* Phones/tablets: keep the motion, drop the expensive parts (blur, clip-path, 3D, animated grid/beams, canvas while scrolling). */
@media(max-width:900px),(pointer:coarse){
.hero>.fx{mask-image:none;-webkit-mask-image:none}
.hero>.fx:after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(transparent,var(--bg))}
.fx-beam,.fx-glow.alt,.fx-tech{display:none}
.fx-grid b{animation:none}
header.sc{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--bg) 97%,transparent)}
.svc .card,.svc .card:hover,.svc .card:focus-visible{transform:none;transform-style:flat}
.svc .card:before{display:none}
.hero .show{animation-duration:.8s}
html.mo :where(.svc .card,.about,.fq details,.band .cg .btn,.fr,.step,.sh .eyebrow,.sh h2,.lui,.loop,.band){transition:opacity .55s var(--motion-ease) var(--motion-delay,0ms),translate .55s var(--motion-ease) var(--motion-delay,0ms)}
html.mo .sh h2{clip-path:none}
html.mo .lui,html.mo .band{clip-path:none;opacity:0;translate:0 22px}
html.mo .step{scale:1}
html.mo .vs{clip-path:none!important}
}

/* Brand colours: real logo colours for social/contact icons (app-icon style, readable in both themes) */
:root .ib.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);border-color:transparent;color:#fff}
:root .ib.li{background:#0A66C2;border-color:transparent;color:#fff}
:root .ib.ig:hover{border-color:transparent;box-shadow:0 8px 20px -8px #d6249f}
:root .ib.li:hover{border-color:transparent;box-shadow:0 8px 20px -8px #0A66C2}
.band .cg .btn .ic{box-sizing:content-box;width:18px;height:18px;padding:6px;border-radius:10px;color:#fff}
.band .cg .btn[href*="wa.me"] .ic{background:#25D366}
.band .cg .btn[href^="mailto"] .ic{background:#EA4335}
.band .cg .btn[href*="instagram.com"] .ic{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.band .cg .btn[href*="linkedin.com"] .ic{background:#0A66C2}