/* OmniServer page. Ported from Figma Make OmniServerLandingPage.tsx. Sections use Tailwind utility classes (CDN in the
   base layout); this file holds the section wrap, Figma's hero stylesheet (OMNI_HERO_CSS) and the hero animation keyframes
   (VIZ_CSS), kept in px as in the design. */

.os-page { background: #fff; }

/* Section content width matches the top nav: 1440px + 32px gutters */
.os-page .os-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
@media (max-width: 639px) { .os-page .os-wrap { padding-left: 16px; padding-right: 16px; } }

/* Tailwind v4 (used by Figma) makes [hidden] win over display utilities */
.os-page [hidden] { display: none !important; }
.os-page h1, .os-page h2, .os-page h3, .os-page h4, .os-page p { margin-top: 0; }
.os-page h1, .os-page h2, .os-page h3, .os-page h4 { font-family: inherit; }
.os-page a.omni-hero-button { text-decoration: none; }
.os-page .omni-hero-pricing { display: inline-flex; }

/* Rich text (FAQ answers, technical detail) */
.os-page .osx-rt p { margin: 0; }
.os-page .osx-rt p + p { margin-top: .5rem; }
.os-page .osx-rt ul { margin: .5rem 0; padding-left: 1.25rem; list-style: disc; color: #475569; }
.os-page .osx-rt li + li { margin-top: .25rem; }
.os-page .osx-rt a { font-weight: 600; color: #002C72; text-decoration: none; }
.os-page .osx-rt a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Hero (Figma OMNI_HERO_CSS) */
.omni-hero{position:relative;isolation:isolate;overflow:hidden;background-color:#003e7e;color:#fff;padding:56px 0 0;border-bottom:1px solid #ffffff18}
.omni-hero *{box-sizing:border-box}
.omni-hero-content{position:relative;z-index:1}
.omni-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px}
.omni-hero-copy{min-width:0}
.omni-hero-eyebrow{display:flex;align-items:center;gap:11px;color:#d6eaff;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.12em;margin-bottom:18px}
.omni-hero-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:1px dashed #b8dbff80;border-radius:8px}
.omni-hero h1{font-size:clamp(52px,5.2vw,72px);font-weight:800;line-height:1.05;letter-spacing:-.035em;color:#fff;margin:0 0 19px}
.omni-hero-lead{color:white;font-size:27px;font-weight:600;line-height:1.3;letter-spacing:-.018em;max-width:540px;margin:0}
.omni-hero-promise{font-size:21px;font-weight:550;line-height:1.4;color:#a9d8ff;margin:8px 0 0}
.omni-hero-description{font-size:17px;line-height:1.75;color:#d3e5f5;max-width:550px;margin:19px 0 25px}
.omni-hero-actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.omni-hero-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:51px;border:1px solid transparent;border-radius:8px;padding:12px 20px;font-size:15px;line-height:1.5;font-weight:700;cursor:pointer;transition:background-color .18s,border-color .18s,box-shadow .18s}
.omni-hero-button svg{flex-shrink:0}
.omni-hero-trial{color:#fff;background:#ea580c;border-color:#ea580c;box-shadow:0 4px 18px #001b3b1f}
.omni-hero-trial:hover{background:#c2410c;border-color:#c2410c}
.omni-hero-compat{color:#003e7e;background:#dceeff;border-color:#dceeff}
.omni-hero-compat:hover{background:white;border-color:white}
.omni-hero-pricing{background:#15803d;border-color:#15803d;color:#fff}
.omni-hero-pricing:hover{background:#166534;border-color:#166534}
.omni-hero-button:focus-visible{outline:3px solid #bae6fd;outline-offset:4px}
.omni-hero-visual{position:relative;min-width:0}
.omni-hero-visual>div[role=region]{position:relative;border-color:#c7e6ff59;box-shadow:0 25px 55px -20px #001125a3,0 0 0 1px #7dc4ff14}
.omni-hero-visual-halo{position:absolute;inset:-45px;background:radial-gradient(ellipse,#6bd6ff29,transparent 68%);pointer-events:none}
.omni-hero-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:18px;border-top:1px solid #ffffff26;margin-top:40px;padding:22px 0;color:#b8d7f2;font-size:13px;line-height:1.6}
.omni-hero-proof>span{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.omni-hero-proof strong{color:#fff;font-size:15px;font-weight:700}
.omni-proof-dot{width:6px;height:6px;border-radius:50%;background:#85c8ff;flex-shrink:0}
.omni-hero-depth{position:absolute;inset:0 -8% 0 36%;z-index:0;pointer-events:none;overflow:hidden;color:rgba(185,223,255,.18);mask-image:linear-gradient(90deg,transparent,#000 28%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%)}
.omni-hero-depth::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 63% 42%,#54c8ff28,transparent 65%)}
.omni-hero-depth::after{content:"";position:absolute;inset:8% 0 6% 10%;background-image:radial-gradient(#b9dfff26 .8px,transparent .8px);background-size:29px 29px;opacity:.5}
.omni-hero-depth svg{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.85}
@media(min-width:1536px){.omni-hero-grid{gap:56px}
.omni-hero-actions{gap:12px}
.omni-hero-button{padding-inline:24px}
}
@media(min-width:1024px) and (max-width:1279px){.omni-hero-actions{gap:10px}
.omni-hero-button{padding-inline:15px;font-size:14px}
.omni-hero-lead{font-size:25px}
.omni-hero-description{font-size:16px}
.omni-hero-grid{gap:28px}
}
@media(max-width:1023px){.omni-hero{padding-top:42px}
.omni-hero-grid{grid-template-columns:minmax(0,1fr);gap:35px}
.omni-hero-copy{max-width:700px}
.omni-hero h1{font-size:64px}
.omni-hero-description{max-width:650px}
.omni-hero-visual{width:100%;max-width:760px;justify-self:center}
.omni-hero-depth{inset:28% -20% 0 15%;opacity:.7}
.omni-hero-proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;margin-top:32px}
}
@media(max-width:639px){.omni-hero{padding-top:32px}
.omni-hero-eyebrow{font-size:10px;letter-spacing:.08em;gap:9px}
.omni-hero-logo{height:32px;width:32px}
.omni-hero h1{font-size:48px;margin-bottom:15px}
.omni-hero-lead{font-size:24px;line-height:1.35}
.omni-hero-promise{font-size:19px}
.omni-hero-description{font-size:17px;line-height:1.7;margin-block:17px 23px}
.omni-hero-actions{display:grid;grid-template-columns:1fr;gap:12px}
.omni-hero-button{font-size:16px;min-height:52px;padding:12px 15px}
.omni-hero-pricing{width:100%}
.omni-hero-proof{font-size:11px;gap:12px;padding-block:20px;margin-top:26px}
.omni-hero-proof strong{font-size:13px}
.omni-hero-proof>span{gap:5px}
.omni-hero-depth{inset:35% -45% 0 -5%;opacity:.55}
.omni-hero-visual-halo{inset:-20px}
}
@media(prefers-reduced-motion:reduce){.omni-hero-button{transition:none}
}
/* Match the supplied DataHub hero's typography, padding, and CTA rhythm. */
.omni-hero{padding:48px 0;border-bottom:0}
.omni-hero-grid{gap:40px}
.omni-hero-eyebrow{display:block;font-size:16px;font-weight:600;line-height:24px;letter-spacing:.1em;margin-bottom:12px;color:#fff}
.omni-hero h1{font-size:36px;font-weight:700;line-height:1.25;letter-spacing:0;margin:0 0 12px}
.omni-hero-lead{font-size:24px;font-weight:500;line-height:1.375;letter-spacing:0;color:#dbeafe;max-width:none;margin:0 0 16px}
.omni-hero-description{font-size:18px;line-height:1.625;max-width:none;margin:0 0 32px}
.omni-hero-actions{gap:12px;margin-bottom:24px}
.omni-hero-button{font-size:16px;min-height:52px;padding:12px 24px}
.omni-hero-pricing{min-height:48px}
.omni-hero-visual{max-width:none}
@media(min-width:640px){.omni-hero h1{font-size:48px}
}
@media(min-width:768px){.omni-hero{padding-block:64px}
}
@media(min-width:1024px){.omni-hero h1{font-size:52px}
}
@media(max-width:639px){.omni-hero h1{margin-bottom:12px}
.omni-hero-eyebrow{font-size:16px}
.omni-hero-grid{gap:40px}
.omni-hero-actions{margin-bottom:24px}
.omni-hero-pricing{width:auto}
.omni-hero-button{font-size:16px}
}

/* ---------------------------------------------------------------- Hero animation (Figma VIZ_CSS) */
@keyframes vizUp{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes vizSceneIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes vizSceneOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes vizType{0%{opacity:0}100%{opacity:1}} @keyframes vizPop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes vizOut{0%{opacity:1}100%{opacity:0}} @keyframes vizTick{0%{opacity:0;transform:translateY(-8px);color:#4ade80}60%{color:#4ade80}100%{opacity:1;transform:none}}
@keyframes vizStrip{0%{max-width:4em;opacity:1}100%{max-width:0;opacity:0;padding:0}} @keyframes vizSlideIn{0%{transform:translateX(-260%)}100%{transform:translateX(-50%)}}
@keyframes vizBeam{0%{opacity:1;top:6px}50%{opacity:1;top:calc(100% - 8px)}100%{opacity:0;top:6px}} @keyframes vizBelt{to{background-position:20px 0}}
@keyframes vizWire{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 8px);opacity:0}} @keyframes vizLed{0%,100%{box-shadow:0 0 6px 2px rgba(74,222,128,.35)}50%{box-shadow:0 0 16px 6px rgba(74,222,128,.75)}}
@keyframes vizLedBlue{0%,100%{box-shadow:none}50%{box-shadow:0 0 10px 4px rgba(96,165,250,.8)}} @keyframes vizRow{0%,100%{background:transparent}40%{background:rgba(110,231,183,.14)}}
@keyframes vizFlash{0%{background:rgba(74,222,128,.18)}100%{background:rgba(255,255,255,.03)}} @keyframes vizFill{from{width:0}to{width:100%}}
.viz-frame{display:inline-block;overflow:hidden;vertical-align:bottom;max-width:4em}.viz-before{opacity:0}.viz-paused *{animation-play-state:paused!important}.viz-reduced *{animation:none!important;transition:none!important}.viz-reduced .viz-frame{max-width:0;opacity:0}.viz-reduced .viz-progress{width:100%}
@media(max-width:639px){.viz-scene{animation:none!important;opacity:1!important;transform:none!important}.viz-package{animation:none!important;transform:translateX(-50%)!important}}

/* ---------------------------------------------------------------- Hero animation at Figma px scale (generated) */
.osv .-top-1{top:-4px}
.osv .bottom-0{bottom:0px}
.osv .bottom-3{bottom:12px}
.osv .bottom-5{bottom:20px}
.osv .gap-1{gap:4px}
.osv .gap-1\.5{gap:6px}
.osv .gap-2{gap:8px}
.osv .gap-3{gap:12px}
.osv .gap-4{gap:16px}
.osv .gap-5{gap:20px}
.osv .gap-px{gap:1px}
.osv .gap-x-1\.5{column-gap:6px}
.osv .gap-y-0\.5{row-gap:2px}
.osv .h-0\.5{height:2px}
.osv .h-1\.5{height:6px}
.osv .h-11{height:44px}
.osv .h-16{height:64px}
.osv .h-2{height:8px}
.osv .h-2\.5{height:10px}
.osv .h-24{height:96px}
.osv .h-4{height:16px}
.osv .h-44{height:176px}
.osv .h-5{height:20px}
.osv .h-6{height:24px}
.osv .h-px{height:1px}
.osv .inset-x-0{left:0px;right:0px}
.osv .inset-x-1{left:4px;right:4px}
.osv .leading-7{line-height:28px}
.osv .left-0{left:0px}
.osv .max-w-md{max-width:448px}
.osv .max-w-sm{max-width:384px}
.osv .max-w-xs{max-width:320px}
.osv .mb-1\.5{margin-bottom:6px}
.osv .min-w-0{min-width:0px}
.osv .min-w-24{min-width:96px}
.osv .ml-2{margin-left:8px}
.osv .mr-2{margin-right:8px}
.osv .mt-1{margin-top:4px}
.osv .p-3{padding:12px}
.osv .p-5{padding:20px}
.osv .pb-1{padding-bottom:4px}
.osv .pl-12{padding-left:48px}
.osv .pl-4{padding-left:16px}
.osv .pl-8{padding-left:32px}
.osv .pt-2\.5{padding-top:10px}
.osv .px-1{padding-left:4px;padding-right:4px}
.osv .px-1\.5{padding-left:6px;padding-right:6px}
.osv .px-3{padding-left:12px;padding-right:12px}
.osv .px-4{padding-left:16px;padding-right:16px}
.osv .px-5{padding-left:20px;padding-right:20px}
.osv .px-8{padding-left:32px;padding-right:32px}
.osv .py-0\.5{padding-top:2px;padding-bottom:2px}
.osv .py-1\.5{padding-top:6px;padding-bottom:6px}
.osv .py-2{padding-top:8px;padding-bottom:8px}
.osv .py-2\.5{padding-top:10px;padding-bottom:10px}
.osv .py-3{padding-top:12px;padding-bottom:12px}
.osv .right-0{right:0px}
.osv .space-y-1\.5 > :not([hidden]) ~ :not([hidden]){margin-top:6px}
.osv .space-y-2 > :not([hidden]) ~ :not([hidden]){margin-top:8px}
.osv .text-3xl{font-size:30px;line-height:36px}
.osv .text-base{font-size:16px;line-height:24px}
.osv .text-lg{font-size:18px;line-height:28px}
.osv .text-sm{font-size:14px;line-height:20px}
.osv .top-0{top:0px}
.osv .w-1\.5{width:6px}
.osv .w-11{width:44px}
.osv .w-2{width:8px}
.osv .w-2\.5{width:10px}
.osv .w-24{width:96px}
.osv .w-4{width:16px}
.osv .w-6{width:24px}
.osv .w-96{width:384px}
@media (min-width:640px){
.osv .sm\:min-w-0{min-width:0px}
.osv .sm\:text-4xl{font-size:36px;line-height:40px}
.osv .sm\:text-base{font-size:16px;line-height:24px}
.osv .sm\:text-xl{font-size:20px;line-height:28px}
.osv .sm\:w-auto{width:auto}
}