/* Depth and motion for the existing ServiceCRM presentation. */
html{overflow-x:clip}
.hero{position:relative;isolation:isolate}
.hero::before,.hero::after{content:'';position:absolute;pointer-events:none;z-index:-2;width:650px;height:650px;border-radius:50%;opacity:.65}
.hero::before{left:-290px;top:15px;background:radial-gradient(circle,#d8eeff 0%,#e9f5ff70 35%,transparent 68%);animation:ambient-drift 18s ease-in-out infinite alternate}
.hero::after{right:-295px;top:160px;background:radial-gradient(circle,#ffdbeb80 0%,#ffedf540 36%,transparent 70%);animation:ambient-drift 22s ease-in-out infinite alternate-reverse}
.hero h1 span,.final-cta h2 span{background:linear-gradient(100deg,#2484ec 0%,#1672d5 27%,#21b1dc 53%,#2687f2 78%,#2484ec 100%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:text-shimmer 12s ease-in-out infinite}
.hero-copy>.hero-badge{box-shadow:0 5px 22px #2988f61c,inset 0 1px 0 #fff;border:1px solid #e0f0ff}
.hero-copy>h1{animation:hero-arrive .8s cubic-bezier(.2,.7,.3,1) both}
.hero-copy>.hero-intro{animation:hero-arrive .8s .12s cubic-bezier(.2,.7,.3,1) both}
.hero-copy>.hero-actions{animation:hero-arrive .8s .24s cubic-bezier(.2,.7,.3,1) both}
.product-stage{perspective:1500px;isolation:isolate}
.stage-halo{inset:3% -35px -3%;border-radius:60% 45% 30px 30px;background:radial-gradient(ellipse at 25% 30%,#d3eafe80,transparent 65%),linear-gradient(145deg,#f4faff,#e5f2fc);box-shadow:0 30px 70px #2988f612;animation:halo-breathe 11s ease-in-out infinite}
.app-window{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-origin:center;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .5s;box-shadow:0 2px 3px #123b5c0a,0 18px 32px -14px #173d6f26,0 42px 82px -28px #226bbb38;border-color:#d4e4f1}
.window-bar{background:linear-gradient(180deg,#fff,#f4f8fc)}
.floating-sms{box-shadow:0 4px 10px #133e6709,0 20px 42px -12px #174e8d36;border-color:#e2eef7;animation:float-notification 7s ease-in-out infinite}
.floating-approval{position:absolute;left:-14px;top:65px;display:flex;align-items:center;gap:10px;padding:14px 18px;border:1px solid #e4eef7;border-radius:14px;background:#fffffff5;box-shadow:0 15px 35px -9px #133e6733;animation:float-notification 8s -2s ease-in-out infinite;z-index:2;font-size:12px;font-weight:700}
.floating-approval svg{color:#2884e6;background:#edf6ff;padding:8px;width:35px;height:35px;border-radius:10px}
.floating-approval::after{content:'';width:7px;height:7px;border-radius:50%;background:#35a77b;box-shadow:0 0 0 5px #35a77b12}
.demo-table tbody tr{transition:background .4s}
.demo-table tbody tr:hover{background:#f0f7ff}
.motion-ready .demo-table tbody tr{animation:row-arrive .65s both;animation-delay:calc(var(--row,0)*.08s + .3s)}
.demo-table tbody tr:nth-child(1){--row:0}.demo-table tbody tr:nth-child(2){--row:1}.demo-table tbody tr:nth-child(3){--row:2}.demo-table tbody tr:nth-child(4){--row:3}.demo-table tbody tr:nth-child(5){--row:4}
.view-switch{box-shadow:inset 0 1px 5px #1d527b08,0 8px 24px #2264a010;border:1px solid #e8f0f7}
.view-switch .active{box-shadow:0 3px 12px #1d527b17}
.client-window{box-shadow:0 9px 25px #123b5c0a,0 35px 75px -22px #226bbb38}
.button{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s,box-shadow .25s,background .25s}
.button.primary{box-shadow:0 5px 0 -2px #d920501f,0 14px 28px -12px #ff32677a}
.button.secondary{box-shadow:0 4px 12px #15354d08}
.button.primary::after{content:'';position:absolute;inset:-70% auto -70% -60%;width:35%;background:linear-gradient(90deg,transparent,#ffffff65,transparent);transform:rotate(20deg) translateX(-160%);pointer-events:none;z-index:-1;animation:button-glint 10s 2s ease-in-out infinite}
.button:hover{transform:translateY(-4px);box-shadow:0 16px 28px -9px #1a5b9628}
.button.primary:hover{box-shadow:0 17px 32px -11px #ff326790}
.site-header.scrolled{box-shadow:0 6px 25px #173d6f12;background:#ffffffed}
.site-header::after{content:'';position:absolute;bottom:0;left:0;height:2px;width:100%;background:linear-gradient(90deg,#2988f6,#27afd9);transform:scaleX(var(--scroll-progress,0));transform-origin:left;pointer-events:none}
.js-reveal [data-reveal]{transition:opacity .85s ease var(--reveal-delay,0ms),transform .85s cubic-bezier(.16,.7,.25,1) var(--reveal-delay,0ms);transform:translateY(30px)}
.feature-visual{background:radial-gradient(ellipse at 20% 10%,#fff8,transparent 65%),linear-gradient(135deg,#f0f8ff,#eaf3fc);box-shadow:inset 0 1px 0 #fff,0 20px 55px -35px #2364a333;border:1px solid #e4eff9}
.feature-panel{box-shadow:0 3px 5px #123b5c05,0 17px 30px -15px #164c8026,0 24px 65px -28px #185c9238}
.feature-panel.active{animation:panel-depth .55s cubic-bezier(.2,.7,.3,1) both}
.feature-accordion details{transition:border-color .3s}
.feature-accordion details[open]{border-bottom-color:#92c7fc}
.feature-accordion details[open] .feature-index{color:var(--blue)}
.tool-card{background:linear-gradient(145deg,#fff,#fbfdff);border-color:#e2ecf5;box-shadow:0 3px 6px #173d6f04,0 15px 32px -17px #174c7c24;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
.tool-card:hover{transform:translateY(-8px);border-color:#bddefb;box-shadow:0 6px 12px #173d6f08,0 27px 45px -17px #174c7c36}
.tool-icon{background:linear-gradient(145deg,#f2f9ff,#e4f2ff);box-shadow:inset 0 1px 0 #fff,0 7px 15px -8px #2484e66b}
.motion-ready .tool-icon{animation:icon-drift 7s ease-in-out infinite;animation-play-state:paused}
.motion-visible .tool-icon{animation-play-state:running}
.tool-card:nth-child(2) .tool-icon{animation-delay:-1.7s}.tool-card:nth-child(3) .tool-icon{animation-delay:-3.4s}.tool-card:nth-child(4) .tool-icon{animation-delay:-5.1s}
.industry-card{box-shadow:0 4px 8px #174c7c04,0 16px 26px -17px #174c7c30;transition:box-shadow .35s,border-color .35s;overflow:hidden}
.industry-card:hover{border-color:#bcd9f3;box-shadow:0 10px 20px #174c7c0a,0 26px 38px -18px #174c7c40}
.industry-icon{box-shadow:inset 0 1px 0 #fff,0 9px 17px -10px currentColor;transition:transform .4s}
.industry-card:hover .industry-icon{transform:translateY(-4px) rotate(-5deg)}
.industry-slider .slick-list{padding-bottom:28px;margin-bottom:-28px}
.slider-controls button{box-shadow:0 5px 13px #174c7c0c;transition:transform .2s,box-shadow .2s}
.slider-controls button:hover{transform:translateY(-2px);box-shadow:0 9px 18px #174c7c17}
.finance-chart i{transform-origin:bottom;animation:chart-rise .8s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--column,0)*.04s)}
.finance-chart i:nth-child(2){--column:1}.finance-chart i:nth-child(3){--column:2}.finance-chart i:nth-child(4){--column:3}.finance-chart i:nth-child(5){--column:4}.finance-chart i:nth-child(6){--column:5}.finance-chart i:nth-child(7){--column:6}.finance-chart i:nth-child(8){--column:7}.finance-chart i:nth-child(9){--column:8}.finance-chart i:nth-child(10){--column:9}
.sms-section{position:relative;isolation:isolate;background:linear-gradient(130deg,#133e67,#174b7e 55%,#123960);box-shadow:0 10px 25px -18px #0a355d45,0 40px 65px -30px #123e6754}
.sms-section::before{content:'';position:absolute;width:550px;height:550px;right:-80px;top:-20px;background:radial-gradient(circle,#3395ed33,transparent 65%);border-radius:50%;z-index:-1;animation:ambient-drift 17s ease-in-out infinite alternate}
.motion-ready .phone-ui{animation:phone-hover 10s ease-in-out infinite;animation-play-state:paused;box-shadow:0 10px 15px #051d3440,0 35px 60px -8px #03192d75}
.motion-visible.phone-stage .phone-ui{animation-play-state:running}
.phone-stage .message-bubble{box-shadow:0 5px 12px #15354d0b}
.phone-stage.motion-visible .message-bubble{animation:message-arrive .7s .4s cubic-bezier(.2,.7,.3,1) both}
.call-notification{box-shadow:0 5px 10px #03192d10,0 25px 45px -12px #03192d60;animation:float-notification 8s -3s ease-in-out infinite}
.call-icon{animation:call-pulse 4.5s ease-out infinite}
.signal-circle.circle-one{animation:signal-wave 8s ease-in-out infinite}
.circle-two{border-color:#80bdff40}
.step-number{box-shadow:0 8px 22px -12px #2988f677}
.trust-grid article>svg{filter:drop-shadow(0 5px 5px #2988f61f)}
.final-cta{background:radial-gradient(ellipse at 30% 20%,#fff9,transparent 60%),linear-gradient(130deg,#eff8ff,#eaf5ff 65%,#f4f8fe);box-shadow:0 5px 15px #174c7c05,0 30px 55px -25px #174c7c22;border:1px solid #e1edf8}
.cta-accent{animation:cta-orbit 30s ease-in-out infinite alternate}
.faq-list details[open]{border-bottom-color:#9fcdfa}
.faq-list details[open] p{animation:message-arrive .35s both}
.motion-ready .floating-approval,.motion-ready .floating-sms,.motion-ready .call-notification{animation-play-state:paused}
.product-stage.motion-visible .floating-approval,.product-stage.motion-visible .floating-sms,.phone-stage.motion-visible .call-notification{animation-play-state:running}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
@keyframes ambient-drift{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(45px,35px,0) scale(1.08)}}
@keyframes text-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes hero-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes halo-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.015)}}
@keyframes float-notification{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-11px) rotate(.7deg)}}
@keyframes row-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes button-glint{0%,78%{transform:rotate(20deg) translateX(-160%)}94%,100%{transform:rotate(20deg) translateX(700%)}}
@keyframes panel-depth{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
@keyframes icon-drift{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(4deg)}}
@keyframes chart-rise{from{transform:scaleY(.15);opacity:.3}to{transform:scaleY(1);opacity:1}}
@keyframes phone-hover{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes message-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes call-pulse{0%,70%,100%{box-shadow:0 0 0 0 #35a27500}15%{box-shadow:0 0 0 9px #35a27515}35%{box-shadow:0 0 0 15px #35a27500}}
@keyframes signal-wave{0%,100%{transform:scale(.92);opacity:.45}50%{transform:scale(1.08);opacity:1}}
@keyframes cta-orbit{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(35px) rotate(35deg)}}
@media(max-width:800px){.floating-approval{display:none}.hero::before{width:450px;height:450px;left:-270px;top:50px}.hero::after{width:450px;height:450px;right:-280px;top:210px}.stage-halo{inset:5% -20px -2%}.sms-section{box-shadow:0 20px 40px -20px #123e673d}}
@media(max-width:520px){.hero::before,.hero::after{opacity:.42}.app-window{transform:none}.tool-card:hover{transform:none}.tool-card{box-shadow:0 10px 22px -14px #174c7c27}.floating-sms{box-shadow:0 15px 28px -10px #174e8d3b}.floating-sms,.call-notification{animation-name:float-mobile}.phone-ui{animation-duration:12s}.industry-slider .slick-list{padding-bottom:20px;margin-bottom:-20px}.button.primary{box-shadow:0 10px 22px -11px #ff326775}.final-cta{box-shadow:0 15px 35px -18px #174c7c25}}
@keyframes float-mobile{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-copy>h1,.hero-copy>.hero-intro,.hero-copy>.hero-actions,.demo-table tbody tr{opacity:1;transform:none}.app-window{transform:none}.hero h1 span,.final-cta h2 span{background:none;color:var(--blue)}.js-reveal [data-reveal]{opacity:1;transform:none}.phone-ui{transform:rotate(4deg)}}