body{margin:0;background:#FBF6EC}
a{color:#0E7C73}a:hover{color:#12403C}
@keyframes udraUp{from{opacity:0;transform:translateY(70px) scale(.97)}to{opacity:1;transform:none}}
@keyframes udraZoom{from{transform:scale(1.3)}to{transform:scale(1)}}
@keyframes udraClip{from{clip-path:inset(18% 18% 18% 18% round 48px);opacity:.4}to{clip-path:inset(0 0 0 0 round 0);opacity:1}}
@keyframes udraGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes udraDrift{from{transform:translateY(60px)}to{transform:translateY(-60px)}}
@keyframes udraHero{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes udraHeroImg{from{opacity:0;transform:scale(1.08);clip-path:inset(0 0 100% 0 round 32px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 32px)}}
@keyframes udraBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes udraMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero-in{animation:udraHero .9s cubic-bezier(.2,.7,.2,1) both}
.hero-img{animation:udraHeroImg 1.2s cubic-bezier(.7,0,.2,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.2s}.d3{animation-delay:.32s}.d4{animation-delay:.44s}.d5{animation-delay:.6s}
.bob{animation:udraBob 4s ease-in-out infinite}
.marquee{animation:udraMarquee 28s linear infinite}
.progress{transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline: view()){
.reveal{animation:udraUp linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.zoom{animation:udraZoom linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
.clip{animation:udraClip linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
.drift{animation:udraDrift linear both;animation-timeline:view()}
.progress{animation:udraGrow linear both;animation-timeline:scroll(root)}
}
@property --depth{syntax:'<integer>';inherits:true;initial-value:0}
@keyframes udraDepth{from{--depth:0}to{--depth:100}}
@keyframes udraMarker{from{top:0%}to{top:100%}}
@keyframes udraDive{
0%{transform:translate(0,12vh) rotate(-4deg) scale(1.1)}
20%{transform:translate(-3vw,24vh) rotate(3deg) scale(1.05)}
40%{transform:translate(-1vw,36vh) rotate(-2deg) scale(1)}
60%{transform:translate(-4vw,46vh) rotate(3deg) scale(1)}
80%{transform:translate(-2vw,54vh) rotate(-2deg) scale(1)}
100%{transform:translate(-5vw,60vh) rotate(1deg) scale(1.05)}}
@keyframes udraHover{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(1.5deg)}}
@keyframes udraBubble{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translate(-14px,-120px) scale(1.2);opacity:0}}
@keyframes udraSwimIn{from{opacity:0;transform:translateX(45%) rotate(-14deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes udraBeam{0%,100%{opacity:.35}50%{opacity:.7}}
.companion{position:fixed;top:0;right:2vw;width:190px;z-index:40;pointer-events:none;transform:translate(0,12vh) rotate(-6deg) scale(1.15)}
.companion-inner{animation:udraHover 3.6s ease-in-out infinite}
.companion img{width:100%;display:block;filter:drop-shadow(0 18px 24px rgba(18,64,60,.35))}
.bubble{position:absolute;border:2px solid #7FE0D4;border-radius:999px;animation:udraBubble 2.8s ease-out infinite}
.gauge{display:none;position:fixed;z-index:40;pointer-events:none;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#0E7C73;left:max(14px,calc((100vw - 1240px) / 2 - 64px));top:22vh;height:56vh;flex-direction:column;gap:10px}
.gauge-track{position:relative;flex-grow:1;width:3px;border-radius:3px;background:#CFE6E1}
.gauge-marker{position:absolute;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:999px;background:#17A398;border:3px solid #FBF6EC;box-shadow:0 0 0 2px #17A398}
.depth-num{background:#12403C;color:#7FE0D4;padding:6px 8px;border-radius:8px;font-size:13px;min-width:44px;text-align:center}
@keyframes udraMarkerX{from{left:0%}to{left:100%}}
.beam{animation:udraBeam 3s ease-in-out infinite}
@supports (animation-timeline: view()){
.companion{animation:udraDive linear both;animation-timeline:scroll(root)}
.gauge{display:flex}
.gauge-marker{animation:udraMarker linear both;animation-timeline:scroll(root)}
.depth-num{animation:udraDepth linear both;animation-timeline:scroll(root);counter-reset:d var(--depth)}
.depth-num::after{content:counter(d) " m"}
.swim-in{animation:udraSwimIn linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
}
@keyframes udraWiggle{0%,100%{rotate:0deg}20%{rotate:-9deg}40%{rotate:7deg}60%{rotate:-5deg}80%{rotate:3deg}}
@keyframes udraBurst{0%{transform:translate(0,0) scale(.4);opacity:1}100%{transform:translate(var(--bx),var(--by)) scale(1.3);opacity:0}}
.drone-btn{pointer-events:auto;display:block;position:relative;width:100%;padding:0;margin:0;border:none;background:none;cursor:pointer;border-radius:40px}
.drone-btn:focus-visible{outline:3px solid #17A398;outline-offset:6px}
@keyframes udraSalto{0%{transform:none}35%{transform:translateY(-70px) rotate(-150deg) scale(1.1)}70%{transform:translateY(-30px) rotate(-300deg) scale(1.05)}100%{transform:rotate(-360deg)}}
.drone-btn.salto{animation:udraSalto 1s cubic-bezier(.45,0,.2,1)}
.salto-on .burst{animation:udraBurst .6s ease-out 2}
.companion img{transition:scale .35s cubic-bezier(.3,1.6,.5,1)}
.companion-inner:hover img,.drone-btn:focus-visible img{scale:1.12;animation:udraWiggle .9s ease-in-out infinite}
.companion-inner:hover .bubble{animation-duration:.8s}
.glow{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:999px;background:#FFF6C9;box-shadow:0 0 24px 10px rgba(255,240,170,.9);opacity:0;transition:opacity .25s;pointer-events:none}
.companion-inner:hover .glow{opacity:1}
.burst{position:absolute;left:50%;top:40%;width:8px;height:8px;border:2px solid #17A398;border-radius:999px;opacity:0;pointer-events:none}
.companion-inner:hover .burst{animation:udraBurst .7s ease-out infinite}
.flee{transition:translate .55s cubic-bezier(.2,.9,.25,1),rotate .55s cubic-bezier(.2,.9,.25,1)}
.fleeing .burst{animation:udraBurst .7s ease-out infinite}
.fleeing .glow{opacity:1}
.fleeing .bubble{animation-duration:.7s}
.tech-stage img{transition:scale .9s ease}
.tech-stage:hover img{scale:1.04}
.tech-stage .glow{width:40px;height:40px;margin:-20px 0 0 -20px}
.tech-stage:hover .glow{opacity:1}
@media (max-width: 1379px) and (min-width: 761px){.page{padding-left:72px;box-sizing:border-box}.gauge{left:14px}}
.abyss{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:0;background:radial-gradient(ellipse 70% 65% at 50% 45%,rgba(3,20,26,0) 30%,rgba(3,20,26,.92) 100%),linear-gradient(rgba(5,38,46,.28),rgba(5,38,46,.28))}
.drone-night{position:absolute;left:50%;top:50%;width:92%;translate:-50% -50%;opacity:0;pointer-events:none}
.companion .drone-night img{width:100%;display:block}
.drone-beam{position:absolute;left:18%;top:62%;width:110%;height:70%;border-radius:999px;background:rgba(235,250,255,.55);filter:blur(28px);rotate:35deg;pointer-events:none}
@keyframes udraNight{0%,45%{opacity:0}65%,100%{opacity:1}}
@keyframes udraDay{0%,45%{opacity:1}65%,100%{opacity:0}}
@supports (animation-timeline: view()){.drone-night{animation:udraNight linear both;animation-timeline:scroll(root)}.drone-day{animation:udraDay linear both;animation-timeline:scroll(root)}}
@keyframes udraAbyss{0%{opacity:0}12%{opacity:0}100%{opacity:1}}
.tint{position:fixed;inset:0;pointer-events:none;z-index:30;background:#A6CFD8;mix-blend-mode:multiply;opacity:0}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:31;opacity:0;background:radial-gradient(ellipse 90% 85% at 50% 50%,rgba(2,22,30,0) 68%,rgba(2,22,30,.38) 100%)}
@property --deep{syntax:'<number>';inherits:true;initial-value:0}
@property --ink{syntax:'<color>';inherits:true;initial-value:#12403C}
@property --acc{syntax:'<color>';inherits:true;initial-value:#0E7C73}
@keyframes udraDeep{0%,30%{--deep:0;--ink:#12403C;--acc:#0E7C73}45%{--deep:.32;--ink:#12403C;--acc:#0E7C73}49%{--deep:.74;--ink:#EAF6F3;--acc:#7FE0D4}66%,100%{--deep:1;--ink:#EAF6F3;--acc:#7FE0D4}}
.page{background:color-mix(in oklab,#FBF6EC,#06262E calc(var(--deep) * 100%)) !important;color:var(--ink) !important}
.page{--mint:color-mix(in oklab,#E3F3EF,#0B3943 calc(var(--deep) * 100%))}
@supports (animation-timeline: view()){.page{animation:udraDeep linear both;animation-timeline:scroll(root)}}
.grab .drone-day{opacity:0 !important}
.grab .drone-night{opacity:1 !important}
.grab .drone-btn{scale:1.06}
.rays{position:fixed;left:0;right:0;top:0;height:100vh;pointer-events:none;z-index:31;overflow:hidden;mix-blend-mode:screen;opacity:0}
.ray{position:absolute;top:-20vh;width:9vw;height:130vh;background:rgba(190,240,235,.14);filter:blur(22px);transform-origin:50% 0;animation:udraRay 7s ease-in-out infinite alternate}
@keyframes udraRay{from{rotate:-14deg;opacity:.5}to{rotate:-6deg;opacity:1}}
.snow{position:fixed;inset:0;pointer-events:none;z-index:31;overflow:hidden;opacity:0}
.flake{position:absolute;bottom:-10px;border-radius:999px;background:rgba(220,250,245,.85);animation-name:udraFlake;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes udraFlake{0%{transform:translate(0,0);opacity:0}10%{opacity:1}50%{transform:translate(18px,-55vh)}90%{opacity:1}100%{transform:translate(-10px,-110vh);opacity:0}}
@keyframes udraTint{0%,6%{opacity:0}100%{opacity:1}}
@keyframes udraRays{0%{opacity:0}5%{opacity:1}35%{opacity:.6}70%,100%{opacity:0}}
@keyframes udraSnow{0%,10%{opacity:0}40%{opacity:.35}100%{opacity:.6}}
@supports (animation-timeline: view()){
.tint,.vignette{animation:udraTint linear both;animation-timeline:scroll(root)}
.rays{animation:udraRays linear both;animation-timeline:scroll(root)}
.snow{animation:udraSnow linear both;animation-timeline:scroll(root)}
}
@media (prefers-reduced-motion: reduce){.ray,.flake{animation:none !important}.snow{display:none}}
@media (max-width: 760px){.companion{width:110px}.gauge{display:none}}
@media (max-width: 760px){
.nav-link{display:none}
.logo-svg{width:150px;height:54px}
.page section{padding-top:56px !important;padding-bottom:56px !important;padding-left:18px !important;padding-right:18px !important}
.page header{padding:12px 18px !important}
.hero-visual{min-height:360px !important}
.hero-main{width:100% !important;height:300px !important}
.hero-small{width:52% !important;height:170px !important}
.vol-text{padding:28px !important}
.page form{padding:22px !important}
.companion{right:0}
.drone-btn{pointer-events:none}
.tech-stage{height:280px !important}
}
@media (prefers-reduced-motion: reduce){.companion,.companion-inner,.bubble,.gauge-marker,.depth-num,.swim-in,.beam{animation:none !important}.swim-in{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.hero-in,.hero-img,.bob,.marquee,.reveal,.zoom,.clip,.drift{animation:none !important;opacity:1 !important;transform:none !important;clip-path:none !important}}
html{scroll-behavior:smooth}
input,textarea{box-sizing:border-box;width:100%}
/* depth in calm steps (JS sets data-deep); replaces the per-frame scroll animation */
.page{animation:none !important;transition:--deep .9s ease,--ink .9s ease,--acc .9s ease}
.page[data-deep="0"]{--deep:0;--ink:#12403C;--acc:#0E7C73}
.page[data-deep="1"]{--deep:.3;--ink:#12403C;--acc:#0E7C73}
.page[data-deep="2"]{--deep:.72;--ink:#EAF6F3;--acc:#7FE0D4}
.page[data-deep="3"]{--deep:.88;--ink:#EAF6F3;--acc:#7FE0D4}
.page[data-deep="4"]{--deep:1;--ink:#EAF6F3;--acc:#7FE0D4}
.wander{will-change:transform}
/* phones & tablets: free-floating draggable drone, lighter effects for smooth scrolling */
.touch .companion{animation:none !important;transform:none !important;top:0;left:0;right:auto;width:120px}
.touch .wander{translate:none !important}
.touch .drone-btn{pointer-events:auto !important;touch-action:none;cursor:grab}
.touch .companion img{filter:none}
.touch .companion-inner:hover img{scale:1;animation:none}
.touch .companion-inner:hover .burst{animation:none}
.touch .rays{display:none}
.touch .clip,.touch .zoom,.touch .drift{animation:none !important;clip-path:none !important;transform:none !important;opacity:1 !important}
.touch .beam{animation:none}
@media (max-width: 760px){.ray{display:none}}