:root{--bg:#050508;--panel:#0d0b16;--ink:#f1eefb;--dim:#a6a2c0;--accent:#c4a8ff;--accent-2:#f2a7d0;--on-accent:#140a26;--line:rgba(255,255,255,.12);--grid:rgba(196,168,255,.05);--bar:rgba(6,5,12,.7);--glass:.5;--nebula-a:rgba(150,110,255,.22);--nebula-b:rgba(242,167,208,.13);--aurora:.6;--star:rgba(255,255,255,.75);
--display:"Syne","Plus Jakarta Sans",system-ui,sans-serif;--sans:"Plus Jakarta Sans",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;color-scheme:dark}
:root[data-theme="light"]{--bg:#f6f2fc;--panel:#ffffff;--ink:#1a1230;--dim:#5b5476;--accent:#6d3fd1;--accent-2:#c2437f;--on-accent:#ffffff;--line:rgba(26,18,48,.14);--grid:rgba(109,63,209,.07);--bar:rgba(246,242,252,.82);--glass:.62;--nebula-a:rgba(160,120,255,.2);--nebula-b:rgba(242,167,208,.28);--aurora:.42;--star:rgba(109,63,209,.5);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;color:var(--ink);font:400 16px/1.65 var(--sans);overflow-x:hidden;background:radial-gradient(1100px 700px at 82% 4%,var(--nebula-a),transparent 62%),radial-gradient(900px 650px at 6% 96%,var(--nebula-b),transparent 60%),var(--bg);background-attachment:fixed;transition:color .5s}
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main{position:relative;z-index:1}
section{padding:clamp(80px,14vh,150px) clamp(20px,5vw,60px)}
.wrap{max-width:1100px;margin:0 auto;position:relative}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.03em}
p{margin:0 0 14px;color:var(--dim)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Header */
.bar{position:fixed;z-index:20;top:0;left:0;right:0;height:calc(64px + env(safe-area-inset-top,0px));display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top,0px) max(clamp(20px,5vw,60px),env(safe-area-inset-right,0px)) 0 max(clamp(20px,5vw,60px),env(safe-area-inset-left,0px));background:var(--bar);border-bottom:1px solid var(--line);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);font-family:var(--mono);font-size:.78rem}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700}
#menu{display:flex;gap:24px}
#menu a{text-decoration:none;text-transform:uppercase;letter-spacing:.04em;color:var(--dim);transition:color .3s}
#menu a:hover,#menu a.active{color:var(--accent)}
.bar-actions{display:flex;align-items:center;gap:8px}
.chip{display:grid;place-items:center;height:32px;padding:0 12px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:border-color .3s}
.chip:hover{border-color:var(--accent)}
.chip.square{width:32px;padding:0}
.menu-button{display:none}
.clock{display:flex;align-items:center;gap:8px;margin:0 6px 0 0;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;color:var(--dim)}
.clock time{color:var(--ink);font-variant-numeric:tabular-nums}

/* Hero */
.hero{display:flex;align-items:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent);pointer-events:none}
.coord{position:absolute;font-family:var(--mono);font-size:.7rem;color:var(--dim);opacity:.7}
.coord-x{top:92px;right:clamp(20px,5vw,60px)}
.coord-y{left:14px;top:50%;writing-mode:vertical-rl;transform:rotate(180deg)}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 60%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;color:var(--ink);margin-bottom:28px}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--accent-2);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-2)}70%{box-shadow:0 0 0 9px transparent}}
h1{font-size:clamp(2.1rem,5.2vw,4.3rem);line-height:1.04;max-width:21ch;min-height:3.15em}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.caret{display:inline-block;width:.06em;height:.78em;margin-left:.05em;background:var(--accent-2);vertical-align:-.04em;text-decoration:none;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.sub{font-size:clamp(1rem,1.9vw,1.2rem);line-height:1.6;max-width:52ch;margin:24px 0 30px}
.hint{font-family:var(--mono);font-size:.7rem;margin-top:34px}

/* Shared blocks */
.section-head{display:flex;align-items:baseline;gap:22px;padding-bottom:18px;margin-bottom:clamp(24px,4vh,44px);border-bottom:1px solid var(--line)}
.section-head span{font-family:var(--mono);font-size:.75rem;color:var(--accent-2)}
h2{font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.05}
.statement{font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--ink);line-height:1.45;max-width:38em;font-weight:500}
.detail{font-size:1rem;line-height:1.7;max-width:62ch;margin-top:18px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.btn{display:inline-block;padding:11px 18px;border:1px solid var(--line);font-family:var(--mono);font-size:.74rem;text-transform:uppercase;text-decoration:none;background:color-mix(in srgb,var(--panel) 60%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .3s,transform .25s ease-out,translate .3s}
.btn:hover{border-color:var(--accent);translate:0 -2px}
.btn.solid{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);border-color:transparent;font-weight:700}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:14px 0 0;margin:14px 0 0;border-top:1px solid var(--line)}
.tags li{padding:3px 8px;border:1px solid var(--line);font-family:var(--mono);font-size:.68rem;color:var(--ink)}
.kind{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;text-align:right;margin:4px 0 0;max-width:14ch;color:var(--accent)}

/* Glass cards (about specialities and gallery) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.card{position:relative;display:flex;flex-direction:column;padding:26px 26px 22px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) calc(var(--glass) * 100%),transparent);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);overflow:hidden;text-decoration:none;transition:border-color .4s,translate .4s}
.card:hover{border-color:var(--accent);translate:0 -3px}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}
.card h3{font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.15}
.card>p:not(.card-link){font-size:.95rem;line-height:1.65;flex:1}
.card>p.plain{flex:none;margin:6px 0 0;padding:10px 0 2px 14px;border-left:2px solid var(--accent-2);color:var(--ink);font-size:.93rem}
.plain b{display:block;font:700 .72rem var(--mono);color:var(--accent-2);margin-bottom:3px}
.card-link{display:inline-block;align-self:flex-start;margin:16px 0 0;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px}
.card-link.muted{color:var(--dim);text-decoration:none}
.index{position:absolute;right:20px;bottom:10px;font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--ink);opacity:.09}
.card::before,.inventory li::before,.demo::before{content:"";position:absolute;inset:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover::before,.inventory li:hover::before,.demo:hover::before{opacity:1}
.more-card{border-color:var(--accent-2)}

/* Project gallery */
.gallery-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:22px 0 14px}
.gallery-counter{font-family:var(--mono);font-size:.78rem;color:var(--accent-2)}
.gallery-buttons{display:flex;gap:8px}
.gallery-hint{font-family:var(--mono);font-size:.7rem;color:var(--dim)}
.hanger{--hang-width:min(80vw,360px);position:relative;overflow:hidden;padding-bottom:28px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline-offset:6px}
.hanger.dragging{cursor:grabbing}
.rope{position:absolute;left:0;top:0;width:100%;height:90px;overflow:visible;pointer-events:none}
.rope path{fill:none;stroke-linecap:round}
.rope-base{stroke:color-mix(in srgb,var(--accent-2) 65%,var(--dim));stroke-width:3.2}
.rope-twist{stroke:var(--bg);stroke-width:3.2;stroke-dasharray:1 5;opacity:.5}
.nail{fill:var(--dim)}
.hanger-track{position:relative;display:flex;width:max-content;will-change:transform}
.hang{position:relative;display:flex;flex:0 0 var(--hang-width);width:var(--hang-width);margin-right:22px;padding-top:28px;transform-origin:50% 22px;will-change:transform}
.hang .card{flex:1;min-width:0}
.peg{position:absolute;z-index:2;top:8px;left:50%;width:14px;height:32px;margin-left:-7px;border-radius:4px 4px 3px 3px;background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 2px 6px rgba(0,0,0,.35)}
.peg::after{content:"";position:absolute;left:2px;right:2px;top:13px;height:2px;background:rgba(0,0,0,.35)}

/* Demo stage */
.demo{position:relative;display:grid;grid-template-columns:1.25fr 1fr;margin-top:26px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) calc(var(--glass) * 100%),transparent);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);overflow:hidden}
.stage-wrap{position:relative;aspect-ratio:16/9;border-right:1px solid var(--line);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%)}
.stage{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.stage.on{opacity:1;visibility:visible}
.stage .fa{fill:var(--accent)}.stage .fb{fill:var(--accent-2)}.stage .fd{fill:var(--dim);opacity:.5}.stage .onaccent{fill:var(--on-accent);opacity:.4}
.stage .axis{stroke:var(--line);stroke-width:1}
.stage .frame,.stage .paper,.stage .fld,.stage .bubble2,.stage .pill{fill:color-mix(in srgb,var(--panel) 70%,transparent);stroke:var(--line);stroke-width:1.2}
.stage .arrow{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stage .trend{fill:none;stroke:var(--accent-2);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.stage .ring{fill:none;stroke:var(--accent-2);stroke-width:1.5}
.stage text{font:9px var(--mono);fill:var(--dim)}
.stage text.b{fill:var(--accent-2)}.stage text.tiny{font-size:8px;fill:var(--ink)}
.stage .pt,.stage .blk{transform-box:fill-box;transform-origin:center}
.stage .bar{transform-box:fill-box;transform-origin:50% 100%}
.stage .type{opacity:0}
.stage.on .pt{animation:pop .5s both;animation-delay:var(--d)}
.stage.on .sweep{animation:sweep 3.4s linear infinite}
.stage.on .ring{transform-origin:262px 50px;animation:ring 1.7s ease-out infinite}
.stage.on .blk{animation:rise .7s both;animation-delay:var(--d)}
.stage.on .bar{animation:grow .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.stage.on .trend{stroke-dasharray:1;animation:draw 1.6s ease .9s both}
.stage.on .go{animation:go 2.2s ease-in-out infinite}
.stage.on .back{animation:back 2.2s ease-in-out .3s infinite}
.stage.on .scan{animation:scan 2.6s ease-in-out infinite alternate}
.stage.on .field{animation:field 5s infinite;animation-delay:var(--d)}
.stage.on .type{animation:typing 5s infinite}
.stage.on .say{animation:say 5s infinite;animation-delay:var(--d)}
.stage.on .prov{animation:cycle 4.5s infinite;animation-delay:var(--d)}
@keyframes pop{from{opacity:0;transform:scale(0)}}
@keyframes sweep{to{transform:translateX(320px)}}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(4.5);opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes go{to{transform:translateX(220px)}}
@keyframes back{to{transform:translateX(-220px)}}
@keyframes scan{to{transform:translateY(138px)}}
@keyframes field{0%,8%{opacity:0;transform:translateX(-10px)}22%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes typing{0%,28%{opacity:1}30%,100%{opacity:0}}
@keyframes say{0%,30%{opacity:0}42%,90%{opacity:1}100%{opacity:0}}
@keyframes cycle{0%,30%{opacity:1}34%,100%{opacity:.3}}
.demo-info{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;justify-content:center}
.demo-info .kind{text-align:left;max-width:none;margin:0 0 8px}
.demo-info h3{font-size:clamp(1.3rem,2.5vw,1.75rem);line-height:1.15;margin-bottom:12px}
.demo-info p{font-size:.98rem}
.demo.swap .demo-info>*{animation:infoIn .6s both}
.demo.swap .demo-info>*:nth-child(2){animation-delay:.06s}.demo.swap .demo-info>*:nth-child(3){animation-delay:.12s}.demo.swap .demo-info>*:nth-child(4){animation-delay:.18s}
@keyframes infoIn{from{opacity:0;transform:translateY(8px)}}
.demo-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.demo-tabs button{position:relative;overflow:hidden;padding:10px 16px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 55%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--dim);font:400 .74rem var(--mono);text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s}
.demo-tabs button:hover{border-color:var(--accent)}
.demo-tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--accent)}
.demo-tabs i{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.demo-tabs button[aria-selected="true"] i{animation:fillbar 6.5s linear forwards}
.demo-tabs.paused i{animation-play-state:paused}
@keyframes fillbar{to{width:100%}}

/* Tools */
.inventory{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.inventory li{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:176px;padding:14px 16px;border:1px solid var(--line);margin:-1px 0 0 -1px;background:color-mix(in srgb,var(--panel) calc(var(--glass) * 100%),transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .3s}
.inventory small{align-self:flex-start;font-family:var(--mono);font-size:.62rem;color:var(--dim)}
.inventory strong{margin-top:0;font-family:var(--mono);font-size:.82rem;text-transform:uppercase;text-align:center;color:var(--ink)}
.inventory span{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;text-align:center;color:var(--accent)}

/* Contact */
.contact{position:relative;overflow:hidden}
.aurora{position:absolute;inset:auto 0 0 0;height:78%;display:flex;align-items:flex-end;filter:blur(42px);opacity:var(--aurora);pointer-events:none}
.aurora i{flex:1;background:linear-gradient(to top,#7c5cff,#e9a8d8 42%,#ffd6c9 72%,#b79cff)}
.kicker{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;color:var(--accent-2)}
.big{font-size:clamp(2rem,6vw,4.4rem);line-height:1.04;max-width:16ch}
.contact footer{position:absolute;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px clamp(20px,5vw,60px);border-top:1px solid var(--line);font-family:var(--mono);font-size:.66rem;text-transform:uppercase;color:var(--ink)}

/* Slide mode */
.js,.js body{height:100%;overflow:hidden}
.js main{position:static}
.js .slide{position:fixed;inset:0;z-index:1;visibility:hidden;opacity:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:flex-start;min-height:0;padding:calc(84px + env(safe-area-inset-top,0px)) max(clamp(20px,5vw,60px),env(safe-area-inset-right,0px)) calc(84px + env(safe-area-inset-bottom,0px)) max(clamp(20px,5vw,60px),env(safe-area-inset-left,0px));border-top:0}
.js .slide>.wrap{width:100%;margin:auto}
.dots{position:fixed;right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:14px}
.dots button{width:11px;height:11px;padding:0;border:1px solid var(--dim);background:transparent;cursor:pointer;transition:.4s}
.dots button[aria-current="true"]{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;transform:scale(1.3)}

@media (max-width:860px){
  .demo{grid-template-columns:1fr}
  .stage-wrap{border-right:0;border-bottom:1px solid var(--line)}
  .inventory{grid-template-columns:repeat(2,1fr)}
  .coord-y{display:none}
  .menu-button{display:grid}
  #menu{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));left:0;right:0;flex-direction:column;gap:0;padding:8px clamp(20px,5vw,60px) 14px;background:var(--bg);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.3s}
  #menu.open{opacity:1;visibility:visible;transform:none}
  #menu a{padding:12px 0}
  .dots{flex-direction:row;top:auto;right:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(50%)}
  .card,.demo,.inventory li,.btn,.badge,.demo-tabs button{backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
}
@media (max-width:520px){.clock-label,.hide-small{display:none}}
@media (max-width:380px){.hanger{--hang-width:84vw}.card{padding:22px 20px 18px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hanger{cursor:auto}
  .badge i,.caret{animation:none}
  .stage.on *,.demo-tabs i,.demo.swap .demo-info>*{animation:none!important}
  .stage,.demo-tabs i{transition:none}
}

/* Logo */
.logo{width:30px;height:30px;flex:none;overflow:visible}
.logo .lp{fill:none;stroke:url(#brandGradient);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.logo .ln{fill:var(--accent-2)}
.brand-name{letter-spacing:.02em}

/* Loading screen */
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(900px 600px at 72% 8%,var(--nebula-a),transparent 60%),radial-gradient(700px 500px at 8% 92%,var(--nebula-b),transparent 60%),var(--bg);transition:opacity .8s ease,visibility .8s;animation:loaderFallback .01s 7s forwards}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{display:grid;justify-items:center;gap:18px;padding:24px;text-align:center}
.loader .logo{width:84px;height:84px}
.loader .logo .lp{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s ease forwards}
.loader .logo .lp.j{animation-delay:.35s}
.loader .logo .ln{transform-box:fill-box;transform-origin:center;animation:pop .5s .9s both}
.loader-name{margin:0;font:700 clamp(1.2rem,4vw,1.6rem) var(--display);letter-spacing:-.02em;color:var(--ink);animation:infoIn .8s .4s both}
.loader-bar{width:min(220px,60vw);height:2px;background:var(--line);overflow:hidden}
.loader-bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));animation:loadbar 1.8s cubic-bezier(.2,.7,.2,1) forwards}
.loader.ready .loader-bar i{animation:none;width:100%;transition:width .3s}
.loader-note{margin:0;font:.7rem var(--mono);color:var(--dim)}
@keyframes loadbar{to{width:90%}}
@keyframes loaderFallback{to{opacity:0;visibility:hidden}}

/* Contact readability */
.contact-card{max-width:780px;padding:clamp(22px,4vw,40px);border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 68%,transparent);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.contact .detail{color:var(--ink)}

/* Tool icons */
.tool-icon{width:44px;height:44px;margin:8px auto 6px;flex:none;fill:url(#iconGradient);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.inventory li:hover .tool-icon{transform:scale(1.14) rotate(-4deg)}
@media (prefers-reduced-motion:reduce){
  .loader *{animation:none!important}
  .loader .logo .lp{stroke-dasharray:none;stroke-dashoffset:0}
  .tool-icon{transition:none}
}

/* Footer link, wave emoji and lighter glass on the moving cards */
.contact footer a{color:inherit;text-decoration:underline;text-underline-offset:4px;transition:color .3s}
.contact footer a:hover{color:var(--accent)}
.wave{display:inline-block;transform-origin:70% 80%;animation:wave 2.4s ease-in-out 1.8s 2}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
.hang .card{backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}
@media (prefers-reduced-motion:reduce){.wave{animation:none}}

/* Text selection, tap highlight and scrollbars follow the page colours */
::selection{background:rgba(196,168,255,.38);background:color-mix(in srgb,var(--accent) 38%,transparent);color:var(--ink);text-shadow:none}
::-moz-selection{background:rgba(196,168,255,.38);background:color-mix(in srgb,var(--accent) 38%,transparent);color:var(--ink);text-shadow:none}
html{-webkit-tap-highlight-color:rgba(196,168,255,.14);accent-color:var(--accent);caret-color:var(--accent)}
.js .slide{scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.js .slide::-webkit-scrollbar{width:6px}
.js .slide::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}

/* Header: star speckle, a glowing edge and a neural-network style menu */
.bar{background-image:radial-gradient(1px 1px at 18% 30%,var(--star),transparent),radial-gradient(1.2px 1.2px at 34% 72%,var(--star),transparent),radial-gradient(1px 1px at 61% 26%,var(--star),transparent),radial-gradient(1.2px 1.2px at 78% 68%,var(--star),transparent),radial-gradient(1px 1px at 92% 34%,var(--star),transparent)}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent-2) 70%,transparent);opacity:.55;pointer-events:none}
#menu a::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;border:1px solid var(--dim);background:var(--bg);transition:background .3s,border-color .3s,box-shadow .3s}
#menu a:hover::after,#menu a.active::after{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent)}
@keyframes navscan{from{background-position:130% 0}to{background-position:-30% 0}}
@media (min-width:861px){
  #menu{position:relative;gap:4px;margin-top:10px;padding-bottom:10px}
  #menu::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent)}
  #menu::after{content:"";position:absolute;left:0;right:0;bottom:1.5px;height:2px;background:linear-gradient(90deg,transparent 35%,var(--accent-2) 50%,transparent 65%);background-size:260% 100%;animation:navscan 6s linear infinite;pointer-events:none}
  #menu a{position:relative;padding:8px 14px}
  #menu a::after{left:50%;top:calc(100% + 4.5px);transform:translateX(-50%)}
}
@media (max-width:860px){
  #menu{position:absolute}
  #menu::before{content:"";position:absolute;left:calc(max(clamp(20px,5vw,60px),env(safe-area-inset-left,0px)) + 3.5px);top:26px;bottom:26px;width:1px;background:var(--line)}
  #menu a{position:relative;padding:12px 0 12px 26px}
  #menu a::after{left:0;top:50%;transform:translateY(-50%)}
}

/* Footer: app status bar with a mini neural network, stars and a scanning edge */
.contact .site-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px 20px;padding:14px max(clamp(20px,5vw,60px),env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(clamp(20px,5vw,60px),env(safe-area-inset-left,0px));border-top:0;font-size:.7rem;text-transform:none;background-color:color-mix(in srgb,var(--bg) 62%,transparent);background-image:radial-gradient(1px 1px at 8% 30%,var(--star),transparent),radial-gradient(1.2px 1.2px at 27% 70%,var(--star),transparent),radial-gradient(1px 1px at 52% 25%,var(--star),transparent),radial-gradient(1.2px 1.2px at 71% 65%,var(--star),transparent),radial-gradient(1px 1px at 90% 30%,var(--star),transparent)}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);opacity:.7}
.site-footer::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent 40%,var(--accent-2) 50%,transparent 60%);background-size:260% 100%;animation:navscan 7s linear infinite;pointer-events:none}
.footer-brand{display:flex;align-items:center;gap:12px}
.mini-network{width:44px;height:26px;flex:none}
.mini-network path{fill:none;stroke:var(--accent);stroke-width:.8;opacity:.4}
.mini-network circle{fill:var(--accent);animation:nodeglow 2.4s ease-in-out infinite}
.mini-network circle:nth-of-type(2n){animation-delay:.4s}
.mini-network circle:nth-of-type(3n){animation-delay:.8s}
.mini-network circle:nth-of-type(5n){animation-delay:1.2s}
@keyframes nodeglow{0%,100%{opacity:.35}50%{opacity:1;fill:var(--accent-2)}}
.footer-status{display:flex;align-items:center;gap:8px;margin:0;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--panel) 60%,transparent);color:var(--ink);white-space:nowrap}
.footer-status i{width:7px;height:7px;border-radius:50%;background:var(--accent-2);animation:pulse 2.4s infinite}
.footer-links{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:4px 18px}
.js .contact{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
@media (max-width:700px){
  .contact .site-footer{grid-template-columns:1fr;justify-items:center;text-align:center;padding-bottom:calc(46px + env(safe-area-inset-bottom,0px))}
  .footer-links{justify-content:center}
  .js .contact{padding-bottom:calc(190px + env(safe-area-inset-bottom,0px))}
}

/* Rocket built from a neural network, launching across the contact slide */
.rocket{position:absolute;right:clamp(18px,9vw,120px);bottom:clamp(96px,18%,170px);width:clamp(52px,7vw,92px);height:auto;overflow:visible;opacity:0;pointer-events:none;will-change:transform,opacity;animation:launch 16s cubic-bezier(.45,.05,.55,.95) 3s infinite}
.rocket .rk-edge{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.rocket .rk-node circle{fill:var(--accent-2)}
.rocket .rk-signal{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.14 .86;animation:signal 1.6s linear infinite}
.rocket .rk-signal.late{animation-delay:.8s}
.rocket .rk-flame{fill:none;stroke:var(--accent-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 0;animation:flicker .18s steps(2) infinite alternate}
.rocket .rk-dust circle{fill:var(--accent);opacity:.6;animation:trail 1.2s linear infinite}
.rocket .rk-dust circle:nth-child(2n){animation-delay:.4s}
.rocket .rk-dust circle:nth-child(3n){animation-delay:.8s}
@keyframes launch{0%{transform:translate3d(0,40px,0) scale(.9);opacity:0}6%{opacity:.9}55%{transform:translate3d(0,-38vh,0) scale(1);opacity:.9}78%{transform:translate3d(0,-82vh,0) scale(.8);opacity:0}100%{transform:translate3d(0,-82vh,0);opacity:0}}
@keyframes signal{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes flicker{to{transform:scaleY(1.25)}}
@keyframes trail{from{transform:translateY(0);opacity:.7}to{transform:translateY(26px);opacity:0}}
@media (max-width:700px){.rocket{right:14px;bottom:200px;width:54px}}

/* Saves battery: animations only run on the slide you are looking at */
.js .slide:not(.is-active):not(.is-leaving) *,.js .slide:not(.is-active):not(.is-leaving) *::before,.js .slide:not(.is-active):not(.is-leaving) *::after{animation-play-state:paused!important}

/* Older browsers without color-mix get solid panels */
@supports not (color:color-mix(in srgb,red,blue)){
  .card,.demo,.inventory li,.btn,.badge,.demo-tabs button,.contact-card,.footer-status{background:var(--panel)}
  .contact .site-footer{background-color:var(--bg)}
}
@media (prefers-reduced-motion:reduce){
  .rocket{animation:none;opacity:.5}
  .rocket .rk-signal,.rocket .rk-flame,.rocket .rk-dust circle,.mini-network circle,#menu::after,.site-footer::after,.footer-status i{animation:none}
}

/* Stops pull-to-refresh and rubber-band bounce, so swiping down always moves to the previous slide */
html,body{overscroll-behavior:none}