/* Other Dimension – interaction & animation layer (plain CSS, no build step) */
:root{--od-cyan:#08E8FF;--od-blue:#138EFF}
html{scroll-behavior:smooth}
body{user-select:auto}
::selection{background:#08e8ff55;color:#fff}

/* scroll progress */
#od-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--od-cyan),var(--od-blue));z-index:9999;pointer-events:none}

/* ambient orbs */
.od-orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.od-orbs i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28;animation:od-float 18s ease-in-out infinite}
.od-orbs i:nth-child(1){width:38vw;height:38vw;background:#06bed1;left:-10vw;top:10vh}
.od-orbs i:nth-child(2){width:34vw;height:34vw;background:#138eff;right:-8vw;top:45vh;animation-delay:-6s}
.od-orbs i:nth-child(3){width:26vw;height:26vw;background:#7c3aed;left:35vw;bottom:-12vh;animation-delay:-11s;opacity:.18}
@keyframes od-float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vw,-6vh,0) scale(1.15)}}

/* hero canvas */
#od-hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero>.flex{position:relative;z-index:1}

/* headline word reveal */
.od-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.od-w>span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*70ms)}
.od-in .od-w>span{transform:none}

/* cursor glow */
#od-glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;
  background:radial-gradient(circle,rgba(8,232,255,.14),transparent 62%);pointer-events:none;z-index:1;opacity:0;transition:opacity .4s;will-change:transform}
#od-dot{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border:1px solid var(--od-cyan);border-radius:50%;
  pointer-events:none;z-index:99999;opacity:0;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s;will-change:transform}
#od-dot.is-link{width:46px;height:46px;margin:-23px 0 0 -23px;background:rgba(8,232,255,.12)}
@media (hover:none),(pointer:coarse){#od-glow,#od-dot{display:none}}

/* buttons */
.gradient-btn{transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .3s;will-change:transform}
.gradient-btn:hover{filter:drop-shadow(0 0 18px rgba(8,232,255,.55))}

/* nav underline */
header nav a{position:relative}
header nav li a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--od-cyan);transform:scaleX(0);transform-origin:right;transition:transform .35s}
header nav li a:hover::after{transform:scaleX(1);transform-origin:left}
header{transition:top .4s cubic-bezier(.2,.8,.2,1),background .3s}
header.od-hide{top:-130px!important}
header.od-scrolled{background:#000000a8}

/* tilt + spotlight cards */
.od-tilt{transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .3s;will-change:transform}
.od-spot{position:relative;overflow:hidden}
.od-spot::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(8,232,255,.14),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.od-spot:hover::before{opacity:1}

/* image reveal */
.od-img{opacity:0;transform:translateY(24px) scale(1.04);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.od-img.od-in{opacity:1;transform:none}

/* marquee */
.od-marquee{overflow:hidden;border-block:1px solid #ffffff1f;padding:22px 0;margin:40px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.od-marquee-track{display:flex;gap:56px;width:max-content;animation:od-marquee 38s linear infinite}
.od-marquee:hover .od-marquee-track{animation-play-state:paused}
.od-marquee a{font-size:clamp(22px,3.4vw,44px);font-weight:700;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #ffffff99;transition:color .3s,-webkit-text-stroke-color .3s}
.od-marquee a:hover{color:var(--od-cyan);-webkit-text-stroke-color:var(--od-cyan)}
.od-marquee a::after{content:"✦";margin-left:56px;color:var(--od-cyan);-webkit-text-stroke:0;font-size:.6em;vertical-align:middle}
@keyframes od-marquee{to{transform:translateX(-50%)}}

/* back to top */
#od-top{position:fixed;right:18px;bottom:84px;width:48px;height:48px;border-radius:50%;border:0;background:#0b0b0bcc;backdrop-filter:blur(8px);color:#fff;cursor:pointer;z-index:50;
  opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .3s,transform .3s}
#od-top.show{opacity:1;transform:none;pointer-events:auto}
#od-top svg{position:absolute;inset:0;transform:rotate(-90deg)}
#od-top circle{fill:none;stroke-width:2}
#od-top .bg{stroke:#ffffff25}#od-top .fg{stroke:var(--od-cyan);stroke-dasharray:132;stroke-dashoffset:132}
@media(min-width:768px){#od-top{bottom:28px}}

/* floating contact bubble */
#od-wa{position:fixed;left:18px;bottom:84px;z-index:50;display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;background:linear-gradient(135deg,#06bed1,#138eff);color:#fff;font-size:14px;font-weight:600;box-shadow:0 8px 30px #06bed155;animation:od-pulse 2.6s infinite}
@keyframes od-pulse{0%{box-shadow:0 0 0 0 #08e8ff77}70%{box-shadow:0 0 0 18px #08e8ff00}100%{box-shadow:0 0 0 0 #08e8ff00}}
@media(min-width:768px){#od-wa{bottom:28px}}

/* page transition (swup) */
.transition-fade{transition:opacity .35s,transform .35s}
html.is-animating .transition-fade{opacity:0;transform:translateY(14px)}

/* floating decorative hero scroll cue */
.od-cue{position:absolute;left:50%;bottom:28px;width:24px;height:40px;border:1px solid #ffffff88;border-radius:14px;transform:translateX(-50%);z-index:1}
.od-cue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--od-cyan);animation:od-cue 1.6s infinite}
@keyframes od-cue{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(14px)}}

/* focus visibility (a11y) */
a:focus-visible,button:focus-visible{outline:2px solid var(--od-cyan);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .od-w>span{transform:none}.od-img{opacity:1;transform:none}#od-hero-canvas,.od-orbs{display:none}
}

/* sticky footer: page always fills viewport, footer sits at the bottom */
html{min-height:100%;overflow-x:clip}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main#swup{flex:1 0 auto;width:100%}
body>footer{flex-shrink:0;margin-top:auto!important;margin-bottom:0!important;padding-bottom:84px;width:100%}
@media(min-width:768px){body>footer{padding-bottom:20px}}
body>footer>.container{margin-top:64px}

/* blog article body */
.od-article{line-height:1.8;max-width:75ch}
.od-article p{font-size:16px;font-weight:300;color:#d6d6d6;margin:0 0 1.1em}
.od-article h2{font-size:clamp(22px,2.4vw,28px);font-weight:600;color:#fff;margin:1.8em 0 .6em;line-height:1.25}
.od-article h3{font-size:20px;font-weight:600;color:#08E8FF;margin:1.4em 0 .5em}
.od-article ul,.od-article ol{margin:0 0 1.2em 1.3em;color:#d6d6d6;font-weight:300}
.od-article ul{list-style:disc}.od-article ol{list-style:decimal}
.od-article li{margin:.4em 0}
.od-article a{color:#08E8FF;text-decoration:underline;text-underline-offset:3px}
.od-article strong{color:#fff;font-weight:600}