/* CloudMedTech website — live layer */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg-base); }
.ab.live-site { overflow: clip; }

/* scroll progress */
.sl-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--brand-700); z-index: 200; pointer-events: none; }

/* sticky header */
.live-site > .wrap:first-child { position: sticky; top: 0; z-index: 100; max-width: none; padding: 0; transition: background-color 250ms ease, box-shadow 250ms ease, backdrop-filter 250ms ease; }
.live-site > .wrap:first-child > .nav2 { max-width: 1200px; margin: 0 auto; padding: 0 32px; transition: height 250ms ease; }
.live-site.m > .wrap:first-child > .nav2 { padding: 0 20px; }
.live-site > .wrap:first-child.stuck { background: color-mix(in srgb, var(--bg-base) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--hairline); }
.live-site > .wrap:first-child.stuck > .nav2 { height: 60px; }
.site .nav2 a.l { position: relative; transition: color 150ms ease; }
.site .nav2 a.l::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--brand-700); transform: scaleX(0); transition: transform 250ms cubic-bezier(.2,.8,.2,1); }
.site .nav2 a.l:hover, .site .nav2 a.l.on { color: var(--ink-900); }
.site .nav2 a.l:hover::after, .site .nav2 a.l.on::after { transform: scaleX(1); }
.site .seg > span { cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }

/* buttons */
.ab .btn { position: relative; overflow: hidden; transition: transform 140ms ease, box-shadow 200ms ease, filter 150ms ease, background-color 150ms ease; }
.ab .btn:active { transform: scale(.97); }
.ab .btn.p:hover { filter: brightness(1.1); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-fill) 35%, transparent); transform: translateY(-1px); }
.ab .btn:not(.p):hover { background-color: color-mix(in srgb, var(--ink-900) 5%, var(--bg-surface)); transform: translateY(-1px); }
.sl-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .2; transform: scale(0); animation: sl-ripple 560ms ease-out forwards; }
@keyframes sl-ripple { to { transform: scale(1); opacity: 0; } }
.btn .sl-arrow { display: inline-block; transition: transform 200ms ease; }
.btn:hover .sl-arrow { transform: translateX(3px); }

/* hero */
.site .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(18px); filter: blur(6px); animation: sl-word 700ms cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes sl-word { to { opacity: 1; transform: none; filter: none; } }
.site .hero > .eyebrow, .site .hero > .lead, .site .hero > .row { opacity: 0; animation: sl-up 700ms cubic-bezier(.2,.8,.2,1) forwards; }
.site .hero > .eyebrow { animation-delay: 40ms; }
.site .hero > .lead { animation-delay: 520ms; }
.site .hero > .row { animation-delay: 680ms; }
@keyframes sl-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sl-hero-stage { perspective: 1600px; }
.sl-hero-stage > .shot { transform-origin: 50% 0; will-change: transform; animation: sl-shot 1100ms cubic-bezier(.2,.8,.2,1) 700ms both; }
@keyframes sl-shot { from { opacity: 0; transform: translateY(60px) rotateX(14deg) scale(.96); } }
.sl-hero-stage .phonef { animation: sl-phone 1200ms cubic-bezier(.2,.8,.2,1) 1300ms both; }
.sl-hero-stage > div:has(> .phonef) { z-index: 2; }
@keyframes sl-phone { from { opacity: 0; transform: translateY(60px) rotate(3deg); } }
.sl-glow { position: absolute; left: 50%; top: 40%; width: 900px; height: 520px; margin-left: -450px; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-700) 18%, transparent), transparent); filter: blur(30px); opacity: .9; animation: sl-breathe 8s ease-in-out infinite; }
@keyframes sl-breathe { 50% { transform: scale(1.08) translateY(-10px); opacity: .6; } }

/* reveal on scroll */
.sl-r { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(.25,.6,.3,1), transform 900ms cubic-bezier(.25,.6,.3,1); transition-delay: calc(var(--d, 0) * 80ms); }
.sl-r.sl-l { transform: translateX(-24px); } .sl-r.sl-rt { transform: translateX(24px); }
.sl-r.sl-z { transform: translateY(32px) scale(.97); }
/* big product pictures: slow fade and a short rise, no sideways jump */
.site .shot.sl-r, .site .phonef.sl-r, .site .sl-r:has(> .phonef) {
  transform: translateY(48px) scale(.98);
  transition: opacity 1400ms cubic-bezier(.25,.6,.3,1) 120ms, transform 1600ms cubic-bezier(.16,1,.3,1) 120ms, box-shadow 400ms ease;
}
.site .shot.sl-r.in, .site .phonef.sl-r.in, .site .sl-r.in:has(> .phonef) { transform: none; }
.site .shot.settled { transition: transform 400ms cubic-bezier(.2,.8,.2,1), box-shadow 400ms ease; }
.sl-r.in { opacity: 1; transform: none; }

/* product shots */
.site .shot { transition: transform 400ms cubic-bezier(.2,.8,.2,1), box-shadow 400ms ease; cursor: pointer; }
.site .shot:hover { box-shadow: 0 36px 90px rgba(15,26,28,.22); }
.sl-open { position: absolute; right: 16px; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  font: 500 13px/18px Onest, system-ui, sans-serif; color: #EEF2F1; background: rgba(15,26,28,.86); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(8px); transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; }
.site .shot:hover .sl-open, .site .phonef:hover .sl-open { opacity: 1; transform: none; }
.site .phonef { cursor: pointer; transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.site .phonef:hover { transform: translateY(-6px) rotate(-1deg); }
.sl-sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%); transform: translateX(-120%); }
.site .shot:hover .sl-sheen { transition: transform 1000ms ease; transform: translateX(120%); }

/* cards */
.site .gr4 > .card, .site .gr5 > .card, .site .seccard { transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease, border-color 260ms ease, opacity 800ms cubic-bezier(.2,.8,.2,1); }
.site .gr4 > .card:hover, .site .gr5 > .card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15,26,28,.12); }
.site .seccard:hover { transform: translateY(-4px); border-color: rgba(238,242,241,.3); background: rgba(238,242,241,.09); }
.site .gr5 > .card .btn.p { pointer-events: none; }
.site .gr5 > .card:hover .btn.p { animation: sl-pulse 1.4s ease-in-out infinite; }
@keyframes sl-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-fill) 22%, transparent); } }
.site .tk li { transition: transform 200ms ease; }
.site .tk li:hover { transform: translateX(4px); }

/* facts */
.site .fact b { display: inline-block; }

/* plate */
.site .plate { position: relative; overflow: hidden; }
.site .plate::before { content: ""; position: absolute; width: 640px; height: 640px; right: -200px; top: -260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47,163,158,.35), transparent); animation: sl-drift 14s ease-in-out infinite alternate; pointer-events: none; }
.site .plate > * { position: relative; }
@keyframes sl-drift { to { transform: translate(-260px, 220px); } }

/* contact form */
.site .tin { transition: border-color 150ms ease, box-shadow 150ms ease; }
.site .tin:focus { outline: none; border-color: var(--brand-700); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-700) 22%, transparent); }
.site .tin.err { border-color: var(--signal-critical); animation: sl-shake 360ms ease; }
@keyframes sl-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.sl-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; animation: sl-up 600ms cubic-bezier(.2,.8,.2,1) both; }
.sl-check { width: 56px; height: 56px; border-radius: 50%; background: var(--tint-ok); color: var(--signal-ok); display: flex; align-items: center; justify-content: center; }
.sl-check svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: sl-draw 600ms ease 200ms forwards; }
@keyframes sl-draw { to { stroke-dashoffset: 0; } }

/* floating demo button */
.sl-fab { position: fixed; right: 20px; bottom: 20px; z-index: 150; display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px;
  font: 500 14px/20px Onest, system-ui, sans-serif; color: #EEF2F1; background: #0B3A3D; text-decoration: none;
  box-shadow: 0 16px 40px rgba(11,58,61,.35); transform: translateY(90px); opacity: 0; transition: transform 400ms cubic-bezier(.2,.9,.3,1.2), opacity 300ms ease, background-color 150ms ease; }
.sl-fab.show { transform: none; opacity: 1; }
.sl-fab:hover { background: #0F6E6E; }
.sl-fab i { width: 8px; height: 8px; border-radius: 50%; background: #4FB07A; position: relative; }
.sl-fab i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #4FB07A; animation: sl-ping 1.8s ease-out infinite; }
@keyframes sl-ping { from { transform: scale(.5); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }

/* phones: the design's mobile page is used on narrow screens */
.site img, .site svg { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .sl-r { opacity: 1; transform: none; }
}