/* OffboardSafe premium motion layer */
:root{--obs-ease:cubic-bezier(.22,1,.36,1);--obs-ease-soft:cubic-bezier(.16,1,.3,1)}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* Scroll progress */
.obs-scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:2000;pointer-events:none;background:transparent}
.obs-scroll-progress>span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--navy,#04455d),var(--teal,#00a9a3));will-change:transform}

/* Header polish */
.site-header{transition:box-shadow .35s var(--obs-ease),background-color .35s ease,border-color .35s ease,transform .35s var(--obs-ease)}
.site-header.obs-scrolled{box-shadow:0 10px 30px rgba(17,55,73,.08);border-color:transparent;background:rgba(255,255,255,.94);backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px)}
.site-header .brand img,.site-header .logo img{transition:transform .35s var(--obs-ease)}
.site-header.obs-scrolled .brand img,.site-header.obs-scrolled .logo img{transform:scale(.96)}
.main-nav a::before{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:2px;border-radius:999px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .35s var(--obs-ease)}
.main-nav a:hover::before{transform:scaleX(1);transform-origin:left center}
.main-nav a.active::before{display:none}

/* Reveal system */
.obs-reveal{opacity:0;transform:translate3d(0,32px,0);filter:blur(7px);transition:opacity .8s var(--obs-ease),transform .8s var(--obs-ease),filter .8s var(--obs-ease);transition-delay:var(--obs-delay,0ms);will-change:opacity,transform}
.obs-reveal.obs-reveal-left{transform:translate3d(-38px,0,0)}
.obs-reveal.obs-reveal-right{transform:translate3d(38px,0,0)}
.obs-reveal.obs-reveal-scale{transform:translate3d(0,20px,0) scale(.965)}
.obs-reveal.obs-in{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}

/* Section headings */
.section-label,.eyebrow{position:relative}
.section-label::after,.eyebrow::after{content:"";display:block;width:28px;height:2px;margin:9px auto 0;border-radius:99px;background:currentColor;transform:scaleX(0);transition:transform .7s var(--obs-ease) .18s}
.obs-in .section-label::after,.section-label.obs-in::after,.obs-in .eyebrow::after,.eyebrow.obs-in::after{transform:scaleX(1)}

/* Hero entrance + ambient motion */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(4px)}
.hero::before{width:420px;height:420px;right:-150px;top:-160px;background:radial-gradient(circle,rgba(0,169,163,.13),rgba(0,169,163,0) 68%);animation:obsGlowFloat 10s ease-in-out infinite alternate}
.hero::after{width:360px;height:360px;left:-180px;bottom:-200px;background:radial-gradient(circle,rgba(4,69,93,.10),rgba(4,69,93,0) 70%);animation:obsGlowFloat 12s ease-in-out infinite alternate-reverse}
.hero-text>*{opacity:0;transform:translateY(22px);animation:obsHeroIn .82s var(--obs-ease) forwards}
.hero-text>*:nth-child(1){animation-delay:.06s}.hero-text>*:nth-child(2){animation-delay:.14s}.hero-text>*:nth-child(3){animation-delay:.22s}.hero-text>*:nth-child(4){animation-delay:.30s}.hero-text>*:nth-child(5){animation-delay:.38s}
.hero-media{opacity:0;transform:translate3d(24px,16px,0) scale(.98);animation:obsHeroMedia .95s var(--obs-ease) .22s forwards;will-change:transform}
.hero-dashboard-wrap,.media img,.demo-preview-shell{transition:transform .45s var(--obs-ease),box-shadow .45s var(--obs-ease)}
.hero-dashboard-wrap:hover,.media img:hover,.demo-preview-shell:hover{transform:translateY(-5px) scale(1.008)}

/* Cards */
.benefit,.built-card,.feature-card,.pricing-card,.value-card,.pillar,.contact-card,.faq-item{transition:transform .4s var(--obs-ease),box-shadow .4s var(--obs-ease),border-color .35s ease,background-color .35s ease}
.benefit:hover,.built-card:hover,.feature-card:hover,.value-card:hover,.pillar:hover,.contact-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(15,51,69,.10)}
.b-icon,.feature-icon,.value-icon,.pillar-icon{transition:transform .45s var(--obs-ease)}
.benefit:hover .b-icon,.feature-card:hover .feature-icon,.value-card:hover .value-icon,.pillar:hover .pillar-icon{transform:translateY(-2px) rotate(-3deg) scale(1.08)}
.pricing-card:hover{transform:translateY(-8px);box-shadow:0 24px 54px rgba(15,51,69,.12)}
.pricing-card.featured:hover{transform:translateY(-8px) scale(1.02)}

/* Buttons */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s var(--obs-ease),box-shadow .3s ease,background-color .25s ease,border-color .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;left:var(--ripple-x,50%);top:var(--ripple-y,50%);background:rgba(255,255,255,.28);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;z-index:-1}
.btn.obs-ripple::after{animation:obsRipple .58s ease-out}

/* Image/media reveal mask */
.media,.about-image,.contact-photo,.demo-showcase-visual{position:relative}
.media::after,.about-image::after,.demo-showcase-visual::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,var(--navy,#04455d),var(--teal,#00a9a3));transform:scaleX(0);transform-origin:left center;opacity:.07;pointer-events:none;transition:transform .9s var(--obs-ease)}
.media.obs-in::after,.about-image.obs-in::after,.demo-showcase-visual.obs-in::after{transform:scaleX(1);transform-origin:right center}

/* How-it-works */
.hiw-tab{transition:transform .3s var(--obs-ease),background-color .3s ease,color .3s ease,box-shadow .3s ease}
.hiw-tab:hover{transform:translateY(-2px)}
.hiw-screen{animation-duration:.5s;animation-timing-function:var(--obs-ease)}
.hiw-screen.active{animation-name:obsScreenIn}

/* CTA band */
.cta-band,.cta-section{position:relative;overflow:hidden;isolation:isolate}
.cta-band::after,.cta-section::after{content:"";position:absolute;width:520px;height:520px;right:-260px;top:-300px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 54px rgba(255,255,255,.035),0 0 0 108px rgba(255,255,255,.025);z-index:-1;animation:obsSlowSpin 22s linear infinite}

/* Scroll-to-top */
.obs-to-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border:0;border-radius:50%;background:var(--navy,#04455d);color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px rgba(4,69,93,.22);cursor:pointer;z-index:1200;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .3s ease,transform .35s var(--obs-ease),background-color .25s ease}
.obs-to-top.obs-show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.obs-to-top:hover{transform:translateY(-3px) scale(1.03);background:var(--teal,#00a9a3)}
.obs-to-top svg{width:18px;height:18px}

/* Mobile nav animation */
.nav-toggle span{transition:transform .3s var(--obs-ease),opacity .2s ease}
.site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.nav-open .nav-toggle span:nth-child(2){opacity:0}
.site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){.site-header.nav-open .main-nav,.site-header.nav-open .nav-right{animation:obsMenuIn .35s var(--obs-ease) both}}

@keyframes obsHeroIn{to{opacity:1;transform:translateY(0)}}
@keyframes obsHeroMedia{to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes obsGlowFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-26px,26px,0) scale(1.08)}}
@keyframes obsRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:.65}100%{transform:translate(-50%,-50%) scale(22);opacity:0}}
@keyframes obsScreenIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes obsSlowSpin{to{transform:rotate(360deg)}}
@keyframes obsMenuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media(max-width:700px){.obs-reveal,.obs-reveal-left,.obs-reveal-right{transform:translate3d(0,22px,0);filter:blur(4px)}.hero::before{width:280px;height:280px}.obs-to-top{right:16px;bottom:16px}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.obs-reveal,.hero-text>*,.hero-media{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}.hero::before,.hero::after,.cta-band::after,.cta-section::after{animation:none!important}.btn,.benefit,.built-card,.feature-card,.pricing-card,.value-card,.pillar,.contact-card,.hero-dashboard-wrap,.media img,.demo-preview-shell{transition:none!important}.obs-scroll-progress{display:none}}