/* Fonts, self-hosted (same files Google Fonts serves; SIL Open Font License): Poppins, Hanken Grotesk, JetBrains Mono. Latin + Latin Extended only (Hanken italic: about.html only);
   unicode-range means a page downloads only the faces and subsets its text uses. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:200 600;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:200 600;font-display:swap;src:url(/fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#000F17;--tx:#C7CFDA;--hi:#EEF1F5;--mu:#8A96A8;--bd:#AEB8C6;--ac:#0DC3E2;--ln:rgba(199,207,218,.15);--pad:clamp(22px,5vw,72px);--mono:'JetBrains Mono',monospace}
html,body{margin:0;background:var(--bg);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body{color:var(--tx);font-family:'Hanken Grotesk',sans-serif;overflow-x:clip}
a{color:var(--tx);text-decoration:none}a:hover{color:#fff}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
h2{margin:0;font-weight:200;color:var(--hi)}p{margin:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mono{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.k{font:11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}
.fx{position:fixed;inset:0}
#stage{z-index:0}canvas{width:100%;height:100%;display:block}
.hero{z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* Hero lockup, rendered like live jaura.net: transparent mark PNG + live text (no box). Positions are the original 491px lockup's, in cqw.
   Entrance = what live actually plays: mark glow pulse, wordmark text-reveal, TECHNOLOGY tech-reveal. */
#hero{position:relative;width:min(440px,72vw);aspect-ratio:491/488;margin-top:-4vh;container-type:inline-size;transform-origin:49.57% 40.2%;font-family:Poppins,sans-serif;text-align:center}
#mark{position:absolute;left:24.81cqw;top:14.79cqw;width:49.29cqw;height:auto;animation:fade .9s ease .1s both,glow 2.5s ease-in-out 1s infinite}
#word{position:absolute;inset:69.5cqw 0 auto;margin:0}
#word b{display:block;font-weight:600;font-size:10.22cqw;line-height:1;letter-spacing:-.01em;color:#fff;text-shadow:0 0 40px #fff6,0 0 80px #ffffff1a;animation:wordin 1.4s cubic-bezier(.19,1,.22,1) .6s both}
#word small{display:block;margin-top:2.6cqw;font-size:3.5cqw;line-height:1;letter-spacing:var(--ts,.82em);text-indent:var(--ts,.82em);color:var(--ac);text-shadow:0 0 30px rgba(13,195,226,.6),0 0 60px rgba(13,195,226,.2);animation:techin 1.8s cubic-bezier(.19,1,.22,1) 1s both}
@keyframes glow{0%,to{filter:drop-shadow(0 0 20px #3b82f680) brightness(1.1) contrast(1.1)}50%{filter:drop-shadow(0 0 35px #3b82f6cc) brightness(1.3) contrast(1.15)}}
@keyframes wordin{0%{opacity:0;filter:blur(30px) brightness(2);transform:translateY(40px) scale(.8)}}
@keyframes techin{0%{opacity:0;letter-spacing:2em;filter:blur(20px) brightness(3);transform:scaleX(0)}}
/* Scroll invitation: a cyan line drawn down from under the logo; JS places it on the logo's axis and retracts it on scroll. */
#cue{position:absolute;inset:0}
#line{position:absolute;width:1px;background:linear-gradient(var(--ac),rgba(13,195,226,.12));transform-origin:top;animation:draw 1.1s cubic-bezier(.5,0,.2,1) 2.2s both}
#line:after{content:'';position:absolute;left:-1px;width:3px;height:3px;background:var(--ac);box-shadow:0 0 6px var(--ac);animation:pulse 2.8s ease-in 3.5s infinite both}
#cue span{position:absolute;bottom:36px;left:0;right:0;text-align:center;letter-spacing:.2em;color:var(--mu);animation:fade .8s ease 2.8s both}
@keyframes draw{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes pulse{0%{top:0;opacity:0}15%,80%{opacity:1}100%{top:100%;opacity:0}}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){#hero *,#cue *,#cue :after{animation:none!important}}
.rm #hero *,.rm #cue *,.rm #cue :after{animation:none!important}
/* system.js sets .idle once the logo and cue have faded out: their endless loops (glow, pulse) pause instead of repainting unseen. */
.idle #mark{animation-play-state:running,paused}.idle #line:after{animation-play-state:paused}
.skip{position:fixed;left:12px;top:-60px;z-index:7;padding:10px 14px;background:var(--hi);color:var(--bg);font:11px var(--mono)}.skip:focus{top:12px}

html{scroll-padding-top:96px} /* focused fields scroll clear of the fixed nav */
nav{position:fixed;top:0;left:0;right:0;z-index:3;padding:20px clamp(20px,4vw,48px);display:flex;justify-content:space-between;align-items:center;gap:24px}
#brand{display:flex;flex-direction:column;gap:1px;opacity:0;font-family:Poppins,sans-serif;text-transform:none;letter-spacing:0}
#brand b{font-weight:600;font-size:22px;color:#fff;letter-spacing:-.01em;line-height:1}#brand small{font-size:7px;letter-spacing:.44em;color:var(--ac)}
.links{display:none;gap:28px}@media(min-width:1000px){.links{display:flex}}
.links a{color:var(--mu)}.links a.on{color:var(--hi)}

.panels{z-index:2;pointer-events:none}
.panel{position:absolute;left:var(--pad);bottom:clamp(28px,10vh,110px);width:min(470px,calc(100vw - 44px));display:flex;flex-direction:column;gap:18px;opacity:0}
#p2{width:min(430px,calc(100vw - 44px));gap:16px}
.panel h2{font-size:clamp(30px,4.4vw,62px);letter-spacing:-.04em;line-height:1.02;text-wrap:pretty}
.panel p{font-size:clamp(15px,1.15vw,16px);line-height:1.6;color:var(--bd);text-wrap:pretty}
#layers{margin:0;padding:0;list-style:none}
#layers li{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-top:1px solid var(--ln);color:var(--mu)}#layers li:last-child{border-bottom:1px solid var(--ln)}
#layers span{display:flex;gap:14px;align-items:baseline;font-size:clamp(15px,1.3vw,18px)}
#layers i{font:normal 10px var(--mono);color:var(--ac)}
#layers small{display:none;font-size:14px;line-height:1.5;color:var(--bd);padding-left:30px}
#layers .on{color:var(--hi)}#layers .on small{display:block}

main{position:relative;z-index:0}
.s{height:200vh}
/* Closing scene (#p4), the end of the homepage: tagline, supporting line and the CTA to /contact. */
#p4{width:min(680px,calc(100vw - 44px));gap:clamp(14px,2.2vh,22px);will-change:transform,opacity}
@media (max-width:759px){#p4{top:32svh;bottom:auto;left:var(--pad);right:var(--pad);width:auto;align-items:center;text-align:center}#p4 .cta-btn{align-self:center}} /* phones: the closing composition is centred */
.cta-btn{align-self:flex-start;margin-top:clamp(10px,2.2vh,20px);display:inline-flex;align-items:center;gap:18px;min-height:60px;padding:0 10px 0 28px;box-sizing:border-box;border-radius:999px;
  color:var(--hi);font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(150,190,240,.16),rgba(150,190,240,.05));border:1px solid rgba(199,207,218,.3);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 34px rgba(0,6,12,.55);
  transition:transform .65s cubic-bezier(.2,.9,.25,1.4),scale .15s ease,border-color .3s,box-shadow .3s,background .3s}
.cta-btn i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ac);color:var(--bg);font-style:normal;
  box-shadow:0 0 18px rgba(13,195,226,.45);transition:transform .65s cubic-bezier(.2,.9,.25,1.4)}
.cta-btn svg{display:block;transition:transform .3s ease}
.cta-btn.mag,.cta-btn.mag i{transition-duration:.18s} /* follows the pointer quickly, springs back slowly */
@media (hover:hover){.cta-btn:hover{color:#fff;border-color:rgba(226,232,240,.62);background:linear-gradient(180deg,rgba(150,190,240,.22),rgba(150,190,240,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 14px 38px rgba(0,6,12,.6),0 0 28px rgba(13,195,226,.18)}.cta-btn:hover svg{transform:translateX(4px)}}
.cta-btn:active{scale:.97}.cta-btn:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
@media (max-width:759px){.cta-btn{min-height:56px;gap:14px;padding:0 8px 0 22px}.cta-btn i{width:38px;height:38px}.cta-btn:active{background:linear-gradient(180deg,rgba(150,190,240,.26),rgba(150,190,240,.1))}}
@media (prefers-reduced-motion:reduce){.cta-btn,.cta-btn i{transition:none}}
#p4 h2{font-size:clamp(38px,6vw,92px);letter-spacing:-.045em;line-height:.98;text-wrap:balance}
#p4 p{font-size:clamp(16px,1.4vw,20px);font-weight:300;line-height:1.5;color:var(--bd)}


/* Technologies we work with (js/tech.js): under the six layers, the active layer's examples light up. Groups share one grid cell, so the panel height never jumps. */
#p2>p{margin-top:-4px}
#p2 h2{font-size:clamp(28px,min(3.6vw,5.2vh),52px)}
@media (max-height:780px) and (min-width:760px){#p2{gap:10px;bottom:clamp(24px,5vh,110px)}#p2 #layers li{padding:5px 0}#p2>p{font-size:14px}}
#tech{display:flex;flex-direction:column;gap:9px;margin-top:2px}
#tech .tr{display:flex;justify-content:space-between;gap:12px;color:var(--mu)}#tech .tl{color:var(--ac);white-space:nowrap}
#tech .tb{position:relative;height:1px;background:var(--ln)}
#tech .tb i{position:absolute;left:0;top:0;width:calc(100%/6);height:1px;background:var(--ac);box-shadow:0 0 8px var(--ac);transform:translateX(calc(var(--l,0)*100%));transition:transform .7s cubic-bezier(.2,.8,.2,1)}
#tech .tg{display:grid;padding-top:3px}
#tech ul{grid-area:1/1;align-self:start;margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 20px;pointer-events:none}#tech ul.on{pointer-events:auto}
#tech li{--d:calc(.12s + var(--i)*.07s);display:flex;align-items:center;gap:8px;font-size:14px;color:var(--hi);white-space:nowrap;opacity:0;transform:translateY(6px);filter:blur(5px);transition:opacity .22s,transform .22s,filter .22s}
#tech ul.on li{opacity:1;transform:none;filter:none;transition:opacity .6s var(--d),transform .8s cubic-bezier(.2,.8,.2,1) var(--d),filter .6s var(--d)}
#tech svg{width:17px;height:17px;flex:none;fill:var(--tx)}#tech svg.nm{color:var(--mu)}#tech ul.on svg{animation:glint 1.4s ease var(--d) both}
@keyframes glint{0%,20%{fill:var(--ac);color:var(--ac);filter:drop-shadow(0 0 6px rgba(13,195,226,.8))}}
#tech .ml{display:none}
@keyframes mlin{from{opacity:0;transform:translateY(8px);filter:blur(4px)}}
/* Phones: the stack sits above (system.js lifts it); text gets a dark backing, and only the active layer is shown. */
@media (max-width:759px){#p2{gap:12px}#p2>p{font-size:14px;line-height:1.5}#p2 #layers{display:none}
  #p2:before{content:'';position:absolute;z-index:-1;left:calc(-1 * var(--pad));right:calc(-1 * var(--pad));top:-72px;bottom:-140px;background:linear-gradient(180deg,rgba(0,15,23,0),rgba(0,15,23,.9) 72px,rgba(0,15,23,.97))}
  #tech .ml{display:flex;flex-direction:column;gap:4px;padding:12px 0 6px;border-top:1px solid var(--ln)}
  #tech .ml span{color:var(--ac)}#tech .ml b{font-weight:400;font-size:20px;color:var(--hi)}#tech .ml small{min-height:3em;font-size:14px;line-height:1.5;color:var(--bd)}
  #tech .ml.go>*{animation:mlin .6s cubic-bezier(.2,.8,.2,1) both}#tech .ml.go>b{animation-delay:.08s}#tech .ml.go>small{animation-delay:.16s}
  #tech .tl{display:none}
  #tech{gap:7px}#tech li{font-size:13px;gap:6px}#tech svg{width:15px;height:15px}
  #tech ul{flex-wrap:nowrap;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0}#tech ul::-webkit-scrollbar{display:none}
  #tech ul.ov{-webkit-mask:linear-gradient(90deg,#000 80%,transparent);mask:linear-gradient(90deg,#000 80%,transparent)}}
@media (prefers-reduced-motion:reduce){#tech li,#tech .tb i{transform:none!important;filter:none!important}#tech svg,#tech .ml>*{animation:none!important}}
.rm #tech li,.rm #tech .tb i{transform:none!important;filter:none!important}.rm #tech svg,.rm #tech .ml>*{animation:none!important}

/* Keep mobile scrolling on the browser compositor; avoid animated blur layers. */
@media (max-width:759px){
  #mark{animation:none;filter:drop-shadow(0 0 12px #3b82f640)}
  #word b,#word small{animation:none;filter:none;text-shadow:none}
  #tech li{filter:none;transition:opacity .2s,transform .2s}
  #tech ul.on li{filter:none;transition:opacity .25s var(--d),transform .3s var(--d)}
  .cta-btn{-webkit-backdrop-filter:none;backdrop-filter:none}
}