) without leaking into the app UI. Static pages set . The product surfaces shown across the site are pure CSS mockups (.mk-*), not screenshots — clearly stylised representations built from the brand palette. Bump the ?v= query in each page's when this file changes. ============================================================================ */ @font-face { font-family: 'InterVar'; src: url('/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } .vmkt { --ink:#111d29; --t1:#18222f; --t2:#5a6675; --t3:#8b95a3; --soft:#98a2b0; --line:#e8ebef; --line2:#eef1f5; --slate:#223947; --slate2:#2c4a5d; --slate3:#39586c; --slate-deep:#182b36; --tint:#eef1f4; --tint2:#f4f6f8; --bg:#ffffff; --bg2:#f7f8fa; --bg3:#eef2f5; --grad:linear-gradient(135deg,#2c4a5d 0%,#223947 100%); --grad-soft:linear-gradient(135deg,#39586c 0%,#223947 100%); --accent:#059669; --accent-2:#0b7a67; --accent-bg:#e7f6ef; --green:#10b981; --green-bg:#e9f9f1; --amber:#b45309; --amber-bg:#fdf3e7; --blue:#2563eb; --purple:#7c3aed; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px; --sh-xs:0 1px 2px rgba(15,25,38,.05); --sh-sm:0 2px 6px -1px rgba(15,25,38,.08), 0 1px 2px rgba(15,25,38,.04); --sh-md:0 14px 34px -16px rgba(15,25,38,.25); --sh-lg:0 42px 84px -32px rgba(15,25,38,.36), 0 18px 36px -22px rgba(15,25,38,.22); --max:1152px; --sec-y:104px; --ease:cubic-bezier(.22,.61,.36,1); /* the landing/body surface */ min-height:100dvh; background:var(--bg); color:var(--t1); font:16px/1.62 'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:'cv11','ss01'; scroll-behavior:smooth; overflow-x:clip; } /* Global rules kept deliberately harmless so this sheet can also load inside the SPA shell (for the React landing) without touching the app UI. Everything visual is scoped under .vmkt. Static marketing pages set . */ body.vmkt { margin:0; scroll-behavior:smooth; overflow-x:clip; } /* Static marketing pages scroll on ; clip its horizontal overflow too (matches only when the page is a marketing page, never the app). */ html:has(body.vmkt) { overflow-x:clip; } .vmkt *, .vmkt *::before, .vmkt *::after { box-sizing:border-box; } .vmkt a { color:var(--slate2); text-decoration:none; } .vmkt img { max-width:100%; display:block; } .vmkt ::selection { background:rgba(16,185,129,.22); } .vmkt .wrap { max-width:var(--max); margin:0 auto; padding:0 28px; } .vmkt .center { text-align:center; } /* ---------- buttons ---------- */ .vmkt .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:15px; line-height:1; padding:13px 22px; border-radius:var(--r-md); border:1px solid transparent; cursor:pointer; white-space:nowrap; font-family:inherit; transition:transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s, border-color .16s, background .16s; } .vmkt .btn-primary { background:var(--grad); color:#fff; box-shadow:0 2px 6px -1px rgba(34,57,71,.4), 0 0 0 1px rgba(34,57,71,.5), inset 0 1px 0 rgba(255,255,255,.14); } .vmkt .btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 12px 28px -10px rgba(16,60,48,.6), 0 0 0 1px rgba(34,57,71,.5), inset 0 1px 0 rgba(255,255,255,.18); } .vmkt .btn-primary:active { transform:translateY(0); } .vmkt .btn-ghost { background:#fff; color:var(--t1); border-color:var(--line); box-shadow:var(--sh-xs); } .vmkt .btn-ghost:hover { border-color:#c6d0d8; transform:translateY(-1px); box-shadow:var(--sh-sm); } .vmkt .btn-light { background:#fff; color:var(--slate); } .vmkt .btn-light:hover { transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(0,0,0,.45); } .vmkt .btn-sm { padding:9px 16px; font-size:13.5px; border-radius:10px; } .vmkt .btn-lg { padding:16px 30px; font-size:16px; border-radius:14px; } .vmkt .btn .arr { transition:transform .16s var(--ease); } .vmkt .btn:hover .arr { transform:translateX(3px); } /* ---------- nav ---------- */ .vmkt .nav { background:rgba(255,255,255,.82); backdrop-filter:saturate(1.5) blur(16px); -webkit-backdrop-filter:saturate(1.5) blur(16px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; box-shadow:0 1px 0 rgba(20,40,54,.03), 0 10px 30px -24px rgba(20,40,54,.55); } .vmkt .nav-in { display:flex; align-items:center; gap:26px; height:84px; position:relative; } .vmkt .brand { display:inline-flex; align-items:center; gap:11px; flex:none; } /* Logo mark sits in a rounded-square brand tile, mirroring the app sidebar. */ .vmkt .brand-mk { width:38px; height:38px; border-radius:11px; background:var(--grad); padding:7px; flex:none; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(16,32,42,.3), inset 0 1px 0 rgba(255,255,255,.14); } .vmkt .brand-mk img { width:100%; height:100%; object-fit:contain; display:block; } .vmkt .brand .wm { font-size:19px; font-weight:750; letter-spacing:-.02em; color:var(--ink); } .vmkt .brand .wm span { color:var(--t3); font-weight:600; } .vmkt .nav-toggle { display:none; } .vmkt .nav-burger { display:none; } /* Stretch the link row to the full nav height so the mega triggers reach all the way down to the panel — otherwise there's a dead gap between the centred trigger and the fixed mega, and the menu closes before the cursor arrives. */ .vmkt .nav-links { margin-left:auto; align-self:stretch; display:flex; align-items:center; gap:4px; } .vmkt .nav-links > * { flex:none; } .vmkt .nav-links > a:not(.btn) { color:var(--t2); font-size:14.5px; font-weight:550; padding:9px 13px; border-radius:10px; white-space:nowrap; transition:background .14s, color .14s; } .vmkt .nav-links > a:not(.btn):hover { color:var(--ink); background:var(--tint2); } .vmkt .nav-links > a.is-active { color:var(--ink); background:var(--tint2); } .vmkt .nav-sep { width:1px; height:22px; background:var(--line); margin:0 10px; } .vmkt .nav-cta { margin-left:8px; } /* homepage: nav rides transparent over the dark hero, then frosts on scroll */ .vmkt .nav.nav-hero { transition:background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); } .vmkt .nav.nav-hero:not(.scrolled) { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; box-shadow:none; } .vmkt .nav.nav-hero.scrolled { background:rgba(255,255,255,.9); backdrop-filter:saturate(1.7) blur(20px); -webkit-backdrop-filter:saturate(1.7) blur(20px); border-bottom-color:rgba(20,40,54,.08); box-shadow:0 1px 0 rgba(20,40,54,.05), 0 12px 36px -20px rgba(20,40,54,.5); } .vmkt .nav.nav-hero:not(.scrolled) .brand .wm { color:#fff; } .vmkt .nav.nav-hero:not(.scrolled) .brand .wm span { color:rgba(255,255,255,.58); } .vmkt .nav.nav-hero:not(.scrolled) .brand-mk { box-shadow:0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -6px rgba(0,0,0,.55); } .vmkt .nav.nav-hero:not(.scrolled) .nav-links > a:not(.btn), .vmkt .nav.nav-hero:not(.scrolled) .nav-trigger { color:rgba(236,243,246,.9); } .vmkt .nav.nav-hero:not(.scrolled) .nav-links > a:not(.btn):hover, .vmkt .nav.nav-hero:not(.scrolled) .nav-trigger:hover, .vmkt .nav.nav-hero:not(.scrolled) .nav-item.has-mega:focus-within .nav-trigger { color:#fff; background:rgba(255,255,255,.12); } .vmkt .nav.nav-hero:not(.scrolled) .nav-sep { background:rgba(255,255,255,.22); } /* On the dark hero the primary CTA becomes a solid white pill — the single unmistakable anchor in the nav; on scroll it returns to the slate fill. */ .vmkt .nav.nav-hero:not(.scrolled) .btn-primary { background:#fff; color:var(--slate); box-shadow:0 6px 18px -6px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.7); } .vmkt .nav.nav-hero:not(.scrolled) .btn-primary:hover { background:#fff; filter:none; transform:translateY(-1px); box-shadow:0 14px 30px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.85); } /* ---------- mega menu (CSS-only, no JS) ---------- */ /* The app ships an unscoped `.nav-item` (sidebar) with width:100%/gap/padding AND a :hover/.is-active background. When this landing renders inside the app shell that sheet also loads, so we reset the layout props here — and clear the sidebar's hover/active background, which would otherwise paint a light pill behind the (light-on-dark) mega trigger and make its label unreadable. */ .vmkt .nav-item { position:relative; display:inline-flex; align-items:center; width:auto; flex:0 0 auto; gap:0; padding:0; background:transparent; border-radius:0; } .vmkt .nav-item:hover, .vmkt .nav-item:focus-within, .vmkt .nav-item.is-active { background:transparent; } .vmkt .nav-trigger { display:inline-flex; align-items:center; gap:5px; color:var(--t2); font-size:14.5px; font-weight:550; padding:9px 13px; border-radius:10px; cursor:pointer; transition:background .14s, color .14s; } .vmkt .nav-trigger:hover, .vmkt .nav-item.has-mega:focus-within .nav-trigger, .vmkt .nav-trigger.is-active { color:var(--ink); background:var(--tint2); } .vmkt .nav-caret { transition:transform .18s var(--ease); margin-top:1px; } .vmkt .nav-item.has-mega:hover .nav-caret, .vmkt .nav-item.has-mega:focus-within .nav-caret { transform:rotate(180deg); } /* Full-width mega: a fixed, edge-to-edge panel below the sticky nav with a centred content grid and a featured rail. The has-mega item stretches to the full nav height so hover survives the trip from the trigger down to the panel. */ .vmkt .nav-item.has-mega { align-self:stretch; } .vmkt .mega { position:fixed; left:0; right:0; top:84px; z-index:39; opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s; } .vmkt .nav-item.has-mega:hover .mega, .vmkt .nav-item.has-mega:focus-within .mega { opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity .2s var(--ease), transform .2s var(--ease); } .vmkt .mega-in { background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh-md); } .vmkt .mega-body { max-width:var(--max); margin:0 auto; padding:30px 28px 28px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:38px; align-items:start; } /* grouped, labelled columns */ .vmkt .mega-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .vmkt .mega-col { display:flex; flex-direction:column; gap:2px; padding:2px 18px; min-width:0; } .vmkt .mega-col:first-child { padding-left:2px; } .vmkt .mega-col:last-child { padding-right:2px; } .vmkt .mega-col + .mega-col { border-left:1px solid var(--line2); } .vmkt .mega-col-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); padding:0 10px 9px; } .vmkt .mega-item { display:flex; gap:12px; align-items:center; min-height:56px; padding:9px 10px; border-radius:11px; position:relative; transition:background .14s; } .vmkt .mega-item:hover { background:var(--tint2); } .vmkt .mega-ic { width:36px; height:36px; border-radius:10px; background:var(--tint); border:1px solid var(--line2); color:var(--slate2); display:inline-flex; align-items:center; justify-content:center; flex:none; transition:background .14s, color .14s, border-color .14s; } .vmkt .mega-item:hover .mega-ic { background:var(--accent-bg); color:var(--accent); border-color:transparent; } .vmkt .mega-tx { min-width:0; } .vmkt .mega-tx b { display:block; font-size:13.75px; color:var(--ink); font-weight:650; letter-spacing:-.012em; white-space:nowrap; } .vmkt .mega-tx span { display:block; font-size:12.2px; color:var(--t3); line-height:1.4; margin-top:2px; } .vmkt .mega-go { flex:none; margin-left:auto; color:var(--t3); opacity:0; transform:translateX(-5px); transition:opacity .14s, transform .14s, color .14s; } .vmkt .mega-item:hover .mega-go { opacity:1; transform:none; color:var(--accent); } /* featured rail with a screenshot peeking from the bottom */ .vmkt .mega-feature { background:var(--grad); color:#fff; border-radius:var(--r-lg); padding:24px 24px 0; display:flex; flex-direction:column; position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); } .vmkt .mega-feature::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(80% 55% at 100% 0%, rgba(16,185,129,.3), transparent 68%); } .vmkt .mega-feature-tag { position:relative; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8fd6bb; margin-bottom:9px; } .vmkt .mega-feature h4 { position:relative; font-size:18px; letter-spacing:-.02em; margin:0 0 7px; color:#fff; } .vmkt .mega-feature p { position:relative; font-size:13px; line-height:1.55; color:#cdd9e2; margin:0 0 15px; } .vmkt .mega-feature-cta { position:relative; display:inline-flex; align-items:center; gap:7px; margin:0 0 18px; align-self:flex-start; background:#fff; color:var(--slate); font-size:13.5px; font-weight:650; padding:9px 15px; border-radius:10px; transition:transform .14s, box-shadow .14s; } .vmkt .mega-feature-cta:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.28); } .vmkt .mega-feature-shot { position:relative; margin-top:2px; height:92px; border-radius:10px 10px 0 0; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 -18px 40px -24px rgba(0,0,0,.7); } .vmkt .mega-feature-shot img { display:block; width:100%; height:auto; } /* foot bar */ .vmkt .mega-foot { border-top:1px solid var(--line2); background:var(--tint2); } .vmkt .mega-foot-inner { max-width:var(--max); margin:0 auto; padding:13px 28px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .vmkt .mega-badge { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--slate2); } .vmkt .mega-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--green); } .vmkt .mega-all { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:640; color:var(--accent); white-space:nowrap; } .vmkt .mega-all:hover { text-decoration:underline; text-underline-offset:3px; } @media (max-width:1040px) { .vmkt .mega-body { grid-template-columns:1fr; gap:20px; } .vmkt .mega-col { padding:2px 16px; } .vmkt .mega-feature { flex-direction:row; align-items:center; gap:18px; padding:18px 22px; } .vmkt .mega-feature h4 { margin-bottom:2px; } .vmkt .mega-feature p, .vmkt .mega-feature-shot { display:none; } .vmkt .mega-feature-cta { margin:0 0 0 auto; flex:none; } } @media (max-width:900px) { .vmkt .nav-in { height:72px; } .vmkt .nav-burger { display:inline-flex; margin-left:auto; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; color:var(--t1); cursor:pointer; } .vmkt .nav-toggle:checked ~ .nav-burger { border-color:var(--slate2); background:var(--tint2); } .vmkt .nav-links { margin-left:0; display:none; position:absolute; right:0; top:64px; width:250px; flex-direction:column; align-items:stretch; gap:4px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-md); } .vmkt .nav-toggle:checked ~ .nav-links { display:flex; } .vmkt .nav-links > a:not(.btn) { padding:11px 12px; } .vmkt .nav-links .btn { width:100%; margin:6px 0 0; } .vmkt .nav-sep { display:none; } /* mega collapses to a plain full-width link in the mobile menu */ .vmkt .nav-item.has-mega { display:block; width:100%; } .vmkt .nav-trigger { width:100%; padding:11px 12px; } .vmkt .nav-caret { display:none; } .vmkt .mega { display:none; } /* The mobile menu is a white dropdown even on the dark hero, so its links must stay dark — override the transparent-hero nav's light text/hover. */ .vmkt .nav.nav-hero:not(.scrolled) .nav-links > a:not(.btn), .vmkt .nav.nav-hero:not(.scrolled) .nav-trigger { color:var(--t2); } .vmkt .nav.nav-hero:not(.scrolled) .nav-links > a:not(.btn):hover, .vmkt .nav.nav-hero:not(.scrolled) .nav-trigger:hover, .vmkt .nav.nav-hero:not(.scrolled) .nav-item.has-mega:focus-within .nav-trigger { color:var(--ink); background:var(--tint2); } } /* ---------- type scale ---------- */ .vmkt h1 { font-size:clamp(38px,5.4vw,60px); line-height:1.03; letter-spacing:-.042em; font-weight:760; margin:0 0 22px; color:var(--ink); } .vmkt h2 { font-size:clamp(28px,3.4vw,40px); line-height:1.1; letter-spacing:-.032em; font-weight:730; margin:0 0 14px; color:var(--ink); } .vmkt h3 { font-size:17px; letter-spacing:-.012em; margin:0 0 7px; font-weight:650; color:var(--ink); } .vmkt .lead { font-size:clamp(17px,1.6vw,19.5px); line-height:1.6; color:var(--t2); margin:0; font-weight:430; } .vmkt .sub { font-size:17px; line-height:1.62; color:var(--t2); margin:0; font-weight:430; } .vmkt .accent-word { background:linear-gradient(100deg,#0f9d6b 0%,#0b7a67 85%); -webkit-background-clip:text; background-clip:text; color:transparent; } .vmkt h1, .vmkt h2 { text-wrap:balance; } .vmkt .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:680; letter-spacing:.075em; text-transform:uppercase; color:var(--slate2); background:#fff; border:1px solid var(--line); box-shadow:var(--sh-xs); padding:7px 14px; border-radius:var(--r-full); margin-bottom:22px; } .vmkt .eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--green); } .vmkt section { padding:var(--sec-y) 0; } .vmkt section[id], .vmkt [id] { scroll-margin-top:96px; } .vmkt .pad { padding-top:var(--sec-y); padding-bottom:var(--sec-y); } .vmkt .sec-head { max-width:680px; margin:0 auto 56px; } .vmkt .sec-head.center { text-align:center; } .vmkt .sec-head.left { margin:0 0 48px; } @media (max-width:820px) { .vmkt { --sec-y:72px; } } /* Balance headings and short marketing copy so lines wrap evenly and never strand a single word on its own line; longer body copy uses pretty. */ .vmkt h1, .vmkt h2, .vmkt h3, .vmkt .lead, .vmkt .sub, .vmkt .desc { text-wrap:balance; } .vmkt p, .vmkt .card p, .vmkt .step p, .vmkt .why p, .vmkt .feat .ftx span, .vmkt .mega-tx span, .vmkt li { text-wrap:pretty; } /* ---------- hero ---------- */ /* ---------- hero (dark, cinematic — homepage only) ---------- */ /* pulled up behind the sticky nav so the dark bg fills the whole top and the nav can ride transparent over it. */ .vmkt .hero { position:relative; overflow:hidden; color:#eaf1f4; isolation:isolate; margin-top:-84px; padding-top:84px; background: radial-gradient(58% 48% at 50% -6%, rgba(16,185,129,.22), transparent 66%), radial-gradient(48% 52% at 86% 6%, rgba(50,86,108,.6), transparent 72%), radial-gradient(44% 46% at 4% 24%, rgba(16,185,129,.13), transparent 70%), linear-gradient(178deg,#0b1820 0%, #0f2029 44%, #16303c 100%); } /* faint dot grid, fading out toward the screenshot */ .vmkt .hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size:28px 28px; mask-image:radial-gradient(130% 86% at 50% -6%, #000 34%, transparent 74%); -webkit-mask-image:radial-gradient(130% 86% at 50% -6%, #000 34%, transparent 74%); } /* a soft aurora sweep near the top */ .vmkt .hero::after { content:""; position:absolute; left:50%; top:-32%; width:min(1200px,120%); height:640px; z-index:-1; transform:translateX(-50%); pointer-events:none; opacity:.7; background:radial-gradient(46% 60% at 50% 50%, rgba(52,224,161,.16), transparent 72%); filter:blur(24px); } .vmkt .hero-in { padding:132px 28px 0; max-width:960px; margin:0 auto; text-align:center; position:relative; z-index:2; } .vmkt .hero h1 { color:#fff; font-size:clamp(42px,6.1vw,74px); letter-spacing:-.046em; line-height:1.0; } .vmkt .hero .accent-word { background:linear-gradient(96deg,#4ee6ad 0%,#10b981 55%,#7ff0c6 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .vmkt .hero .eyebrow { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#8fe6c4; box-shadow:none; backdrop-filter:blur(6px); } .vmkt .hero .eyebrow .dot { background:#3fe0a4; box-shadow:0 0 10px rgba(63,224,164,.8); } .vmkt .hero .lead { max-width:60ch; margin:0 auto 36px; color:rgba(220,231,236,.82); font-size:clamp(17px,1.55vw,20px); } .vmkt .cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center; } .vmkt .hero .btn-ghost { background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.2); box-shadow:none; backdrop-filter:blur(6px); } .vmkt .hero .btn-ghost:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.36); } .vmkt .hero-note { margin:20px 0 0; font-size:13.5px; color:rgba(255,255,255,.6); display:flex; gap:20px; justify-content:center; flex-wrap:wrap; } .vmkt .hero-note span { display:inline-flex; align-items:center; gap:7px; } .vmkt .hero-note svg { color:#3fe0a4; } @media (max-width:900px) { .vmkt .hero { margin-top:-72px; padding-top:72px; } .vmkt .hero-in { padding-top:104px; } } /* Staggered entrance on first paint (homepage dark hero only). */ @media (prefers-reduced-motion: no-preference) { .vmkt .hero-in > .eyebrow, .vmkt .hero-in > h1, .vmkt .hero-in > .lead, .vmkt .hero-in > .cta-row, .vmkt .hero-in > .hero-note, .vmkt .hero .shot-stage { opacity:0; animation:hero-rise .72s var(--ease) both; } .vmkt .hero-in > .eyebrow { animation-delay:.04s; } .vmkt .hero-in > h1 { animation-delay:.12s; } .vmkt .hero-in > .lead { animation-delay:.2s; } .vmkt .hero-in > .cta-row { animation-delay:.28s; } .vmkt .hero-in > .hero-note { animation-delay:.34s; } .vmkt .hero .shot-stage { animation-duration:.9s; animation-delay:.42s; animation-name:hero-rise-shot; } } @keyframes hero-rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } @keyframes hero-rise-shot { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } } /* browser-framed mock */ .vmkt .shot-stage { position:relative; max-width:1080px; margin:64px auto 0; padding:0 28px; } .vmkt .shot-stage::before { content:""; position:absolute; inset:8% -4% -12% -4%; z-index:0; background:radial-gradient(50% 60% at 50% 45%, rgba(44,74,93,.24), transparent 72%); filter:blur(14px); } .vmkt .hero .shot-stage { margin-top:72px; padding-bottom:52px; perspective:1900px; } .vmkt .hero .shot-stage::before { inset:0% -8% 14% -8%; background:radial-gradient(54% 64% at 50% 42%, rgba(52,224,161,.34), rgba(46,92,116,.34) 42%, transparent 74%); filter:blur(34px); opacity:.95; } .vmkt .hero .shot-stage .browser { transform:rotateX(4deg); transform-origin:50% 100%; transition:transform .7s var(--ease); box-shadow:0 50px 110px -34px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.07); } .vmkt .hero .shot-stage:hover .browser { transform:rotateX(0deg); } @media (prefers-reduced-motion:reduce) { .vmkt .hero .shot-stage .browser { transform:none; transition:none; } } .vmkt .browser { position:relative; z-index:1; background:#fff; border:1px solid rgba(15,25,38,.09); border-radius:18px 18px 0 0; box-shadow:var(--sh-lg); overflow:hidden; } .vmkt .browser.rounded { border-radius:18px; } .vmkt .browser-bar { display:flex; align-items:center; gap:14px; height:46px; padding:0 18px; background:linear-gradient(180deg,#fafbfc,#f2f4f6); border-bottom:1px solid var(--line); } .vmkt .browser-dots { display:flex; gap:7px; } .vmkt .browser-dots span { width:11px; height:11px; border-radius:50%; } .vmkt .browser-dots span:nth-child(1){ background:#f26d6d; } .vmkt .browser-dots span:nth-child(2){ background:#f2c14d; } .vmkt .browser-dots span:nth-child(3){ background:#5fc16d; } .vmkt .browser-url { flex:1; max-width:420px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:7px; height:28px; background:#fff; border:1px solid var(--line); border-radius:8px; font-size:12.5px; color:var(--t3); font-weight:500; } .vmkt .browser-url svg { color:var(--green); } /* real product screenshots framed by .browser */ .vmkt .browser img { width:100%; height:auto; display:block; } .vmkt .browser img.crop { aspect-ratio:var(--ar,16/10); height:auto; object-fit:cover; object-position:var(--pos,50% 0%); } .vmkt .split-shot .browser img { transition:transform .5s var(--ease); } .vmkt .split-shot .browser:hover img { transform:scale(1.015); } .vmkt .duo-card .shot img { width:100%; height:auto; display:block; border:1px solid var(--line); border-bottom:0; border-radius:12px 12px 0 0; box-shadow:var(--sh-md); } .vmkt .closing-shot img { display:block; width:100%; height:auto; aspect-ratio:16/6.5; object-fit:cover; object-position:50% 0%; } /* floating chips over the hero mock */ .vmkt .float-chip { position:absolute; z-index:2; display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.7); border-radius:14px; box-shadow:0 26px 54px -20px rgba(4,16,22,.6), 0 2px 8px -2px rgba(4,16,22,.3); padding:12px 16px; font-size:13.5px; font-weight:600; color:var(--t1); backdrop-filter:blur(4px); animation:floaty 6s var(--ease) infinite; will-change:transform; } .vmkt .float-chip .fc-ic { width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; flex:none; } .vmkt .float-chip .fc-sub { display:block; font-size:12px; color:var(--t3); font-weight:500; margin-top:1px; } .vmkt .fc-green { background:var(--green-bg); color:var(--accent); } .vmkt .fc-slate { background:var(--tint); color:var(--slate2); } .vmkt .chip-a { right:-4px; top:-30px; } .vmkt .chip-b { left:-14px; bottom:18%; animation-delay:-3s; } .vmkt .chip-close-a { right:2px; top:-26px; } .vmkt .chip-close-b { left:0; bottom:16%; animation-delay:-3s; } @keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } } @media (prefers-reduced-motion:reduce) { .vmkt .float-chip { animation:none; } } @media (max-width:900px) { .vmkt .float-chip { display:none; } } /* ---------- trust / stat strip ---------- */ .vmkt .strip { border-bottom:1px solid var(--line); background:#fff; } .vmkt .strip-in { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; padding:34px 0; } .vmkt .strip-item { display:flex; align-items:center; gap:14px; } .vmkt .strip-item .ic { width:40px; height:40px; border-radius:12px; background:var(--tint2); color:var(--slate2); display:inline-flex; align-items:center; justify-content:center; flex:none; } .vmkt .strip-item .tx b { display:block; font-size:14.5px; letter-spacing:-.01em; color:var(--ink); } .vmkt .strip-item .tx span { font-size:12.5px; color:var(--t3); } /* ---------- grids & cards ---------- */ .vmkt .grid { display:grid; gap:20px; } .vmkt .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .vmkt .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .vmkt .grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .vmkt .card { background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:0 1px 2px rgba(20,40,54,.045), inset 0 1px 0 rgba(255,255,255,.7); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; } .vmkt .card:hover { transform:translateY(-4px); border-color:#cfd8de; box-shadow:0 22px 44px -22px rgba(20,40,54,.32), 0 3px 8px -3px rgba(20,40,54,.1); } .vmkt .card.pad-lg { padding:30px; } /* crafted icon tile — subtle gradient + hairline + inner highlight */ .vmkt .ic { width:46px; height:46px; border-radius:13px; background:linear-gradient(158deg,#f4f8fa 0%, #e7eef2 100%); border:1px solid var(--line2); color:var(--slate2); box-shadow:inset 0 1px 0 #fff; display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .vmkt .ic.ic-accent { background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%); border-color:rgba(16,185,129,.22); color:var(--accent); } .vmkt .card:hover .ic:not(.ic-accent) { background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%); border-color:rgba(16,185,129,.22); color:var(--accent); } .vmkt .card h3 { font-size:16.5px; } .vmkt .card p { margin:0; color:var(--t2); font-size:14.5px; line-height:1.58; } .vmkt .card .more { display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:13.5px; font-weight:600; color:var(--accent); } .vmkt .card .more svg { transition:transform .18s var(--ease); } .vmkt .card:hover .more svg { transform:translateX(3px); } /* link-cards sweep an emerald hairline across the top on hover */ .vmkt a.card { position:relative; overflow:hidden; } .vmkt a.card::after { content:""; position:absolute; left:0; right:0; top:0; height:2.5px; background:linear-gradient(90deg,#34d399,#059669); transform:scaleX(0); transform-origin:left; transition:transform .34s var(--ease); } .vmkt a.card:hover::after { transform:scaleX(1); } .vmkt .card p a { display:inline; padding:0; line-height:inherit; font-size:inherit; vertical-align:baseline; white-space:nowrap; font-weight:600; color:var(--accent); } /* ---------- alternating feature rows ---------- */ .vmkt .split { display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; padding:64px 0; } .vmkt .split + .split { border-top:1px solid var(--line2); } .vmkt .pad > .split:first-child { padding-top:0; } .vmkt .pad > .split:last-child { padding-bottom:0; } .vmkt .split.rev { grid-template-columns:1.1fr 0.9fr; } .vmkt .split.rev .split-copy { order:2; } .vmkt .split h2 { font-size:clamp(26px,2.9vw,34px); } .vmkt .split .eyebrow { margin-bottom:16px; } .vmkt .split .learn { display:inline-flex; align-items:center; gap:6px; margin-top:22px; font-size:14.5px; font-weight:640; color:var(--accent); } .vmkt .split .learn:hover { text-decoration:underline; text-underline-offset:3px; } .vmkt .split ul { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:13px; } .vmkt .split li { display:flex; gap:12px; align-items:flex-start; color:var(--t1); font-size:15px; line-height:1.5; } .vmkt .split li svg { flex:none; margin-top:3px; color:var(--green); } .vmkt .split li b { font-weight:640; } .vmkt .split-shot { position:relative; } .vmkt .split-shot::before { content:""; position:absolute; inset:12% -6% -8% -6%; z-index:0; border-radius:32px; background:radial-gradient(55% 65% at 50% 50%, rgba(44,74,93,.16), transparent 75%); filter:blur(10px); } .vmkt .split-shot .browser { border-radius:14px; overflow:hidden; } .vmkt .split-shot .browser-bar { height:38px; } .vmkt .learn { display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:640; color:var(--accent); } .vmkt .learn:hover { text-decoration:underline; text-underline-offset:3px; } /* ---------- duo: two-up feature cards ---------- */ .vmkt .duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } .vmkt .duo-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-xs); display:flex; flex-direction:column; transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; } .vmkt .duo-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:#d9e0e6; } .vmkt .duo-card .shot { position:relative; background:linear-gradient(180deg,var(--tint2),#eaf0ee); border-bottom:1px solid var(--line); padding:30px 30px 0; max-height:340px; overflow:hidden; } .vmkt .duo-card .shot::after { content:""; position:absolute; inset:auto 0 0; height:56px; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(234,240,238,.95)); } .vmkt .duo-card .body { padding:26px 30px 30px; display:flex; flex-direction:column; flex:1; } .vmkt .duo-card .body h3 { font-size:19px; letter-spacing:-.015em; margin-bottom:8px; } .vmkt .duo-card .body p { margin:0; color:var(--t2); font-size:15px; line-height:1.6; } .vmkt .duo-card .body .learn { margin-top:auto; padding-top:18px; } /* ---------- product tour: CSS-only tabs ---------- */ .vmkt .tour { position:relative; } .vmkt .tour > input { position:absolute; opacity:0; pointer-events:none; } .vmkt .tour-tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; } .vmkt .tour-tabs label { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-full); border:1px solid var(--line); background:#fff; font-size:14px; font-weight:600; color:var(--t2); cursor:pointer; box-shadow:var(--sh-xs); transition:border-color .15s, color .15s, background .15s, transform .1s; } .vmkt .tour-tabs label:hover { border-color:#c6d0d8; color:var(--ink); transform:translateY(-1px); } .vmkt .tour-panel { display:none; margin:0; } .vmkt .tour-panel figcaption { text-align:center; font-size:14px; color:var(--t3); margin-top:18px; } .vmkt .tour-panel figcaption b { color:var(--t1); font-weight:640; } .vmkt #tt1:checked ~ .tour-tabs label[for="tt1"], .vmkt #tt2:checked ~ .tour-tabs label[for="tt2"], .vmkt #tt3:checked ~ .tour-tabs label[for="tt3"], .vmkt #tt4:checked ~ .tour-tabs label[for="tt4"] { background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 6px 16px -8px rgba(34,57,71,.55); } .vmkt #tt1:checked ~ .tour-panels .p1, .vmkt #tt2:checked ~ .tour-panels .p2, .vmkt #tt3:checked ~ .tour-panels .p3, .vmkt #tt4:checked ~ .tour-panels .p4 { display:block; } .vmkt #tt1:focus-visible ~ .tour-tabs label[for="tt1"], .vmkt #tt2:focus-visible ~ .tour-tabs label[for="tt2"], .vmkt #tt3:focus-visible ~ .tour-tabs label[for="tt3"], .vmkt #tt4:focus-visible ~ .tour-tabs label[for="tt4"] { outline:2px solid var(--slate2); outline-offset:2px; } .vmkt .tour .browser { max-width:1000px; margin:0 auto; } /* ---------- versus ---------- */ .vmkt .versus { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:960px; margin:0 auto; align-items:stretch; } .vmkt .versus-col { border-radius:var(--r-xl); padding:32px; } .vmkt .versus-col h3 { font-size:17.5px; margin-bottom:18px; display:flex; align-items:center; gap:10px; } .vmkt .versus-col ul { list-style:none; padding:0; margin:0; display:grid; gap:13px; } .vmkt .versus-col li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.55; } .vmkt .versus-col li svg { flex:none; margin-top:3px; } .vmkt .versus-old { background:var(--bg2); border:1px solid var(--line); } .vmkt .versus-old h3 { color:var(--t2); } .vmkt .versus-old li { color:var(--t2); } .vmkt .versus-old li svg { color:#cf7a72; } .vmkt .versus-new { background:#fff; border:2px solid var(--slate2); box-shadow:var(--sh-lg); } .vmkt .versus-new li { color:var(--t1); } .vmkt .versus-new li svg { color:var(--green); } @media (max-width:800px) { .vmkt .versus { grid-template-columns:1fr; } } /* ---------- showcase ---------- */ .vmkt .showcase { text-align:center; } .vmkt .showcase .shot-stage { margin-top:52px; } /* ---------- spotlight: dark band ---------- */ .vmkt .spotlight { position:relative; overflow:hidden; color:#fff; background: radial-gradient(50% 70% at 84% 0%, rgba(16,185,129,.28), transparent 64%), radial-gradient(44% 60% at 8% 100%, rgba(57,88,108,.5), transparent 68%), linear-gradient(160deg,#1d3341 0%, #16262f 100%); } .vmkt .spotlight::before { content:""; position:absolute; inset:0; opacity:.45; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:26px 26px; } .vmkt .spotlight .wrap { position:relative; } /* the section already provides --sec-y; the inner split must not add its own, so the spotlight matches every other section's vertical padding. */ .vmkt .spotlight .split { border:0; padding:0; } .vmkt .spotlight h2 { color:#fff; } .vmkt .spotlight .sub { color:rgba(255,255,255,.78); } .vmkt .spotlight .split li { color:rgba(255,255,255,.92); } .vmkt .spotlight .split li svg { color:#5fd3a6; } .vmkt .spotlight .split li b { color:#fff; } .vmkt .spotlight .eyebrow { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#a7d9c8; box-shadow:none; } .vmkt .spotlight .eyebrow .dot { background:#5fd3a6; } .vmkt .spotlight .learn { color:#7fdcb6; } /* the nine real AI tools, as quiet pills under the bullets */ .vmkt .ai-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; max-width:46ch; } .vmkt .ai-chips span { padding:6px 12px; border-radius:var(--r-full); font-size:12.5px; font-weight:600; color:rgba(255,255,255,.82); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); transition:background .15s, border-color .15s, color .15s; } .vmkt .ai-chips span:hover { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.26); color:#fff; } /* floating insight chip over the AI screenshot */ .vmkt .chip-ai { right:-10px; top:-24px; } .vmkt .spotlight .split-shot::before { background:radial-gradient(55% 65% at 50% 50%, rgba(0,0,0,.4), transparent 75%); } .vmkt .spotlight .browser { border-color:rgba(255,255,255,.16); } /* ---------- steps ---------- */ .vmkt .steps-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .vmkt .step { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; box-shadow:var(--sh-xs); } .vmkt .step .n { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#10b981,#059669); color:#fff; font-weight:700; font-size:15px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 6px 14px -6px rgba(16,185,129,.5); } .vmkt .step h3 { font-size:16.5px; } .vmkt .step p { margin:0; color:var(--t2); font-size:14.5px; line-height:1.58; } /* ---------- bands ---------- */ .vmkt .band { background:linear-gradient(180deg,#f2f8f5 0%,#eef3f6 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.5); } .vmkt .band-plain { background:var(--bg2); } /* ---------- integration logo chips ---------- */ .vmkt .logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; max-width:900px; margin:0 auto; } .vmkt .logo-chip { display:inline-flex; align-items:center; gap:11px; padding:13px 20px; border:1px solid var(--line); border-radius:var(--r-full); background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); box-shadow:0 1px 2px rgba(20,40,54,.05), inset 0 1px 0 rgba(255,255,255,.7); font-size:14.5px; font-weight:600; color:var(--t1); white-space:nowrap; transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .vmkt .logo-chip:hover { transform:translateY(-3px); border-color:#cfd8de; box-shadow:0 16px 30px -16px rgba(20,40,54,.3); } .vmkt .logo-chip svg { width:20px; height:20px; color:var(--slate2); flex:none; transition:color .18s var(--ease); } .vmkt .logo-chip:hover svg { color:var(--slate); } .vmkt .logo-chip.logo-more { color:var(--accent); } .vmkt .logo-chip.logo-more svg { color:var(--accent); } .vmkt .logo-chip.logo-more .arr, .vmkt .logo-chip.logo-more svg:last-child { width:14px; height:14px; } /* ---------- closing ---------- */ .vmkt .closing { position:relative; overflow:hidden; color:#fff; background: radial-gradient(56% 70% at 78% -10%, rgba(16,185,129,.32), transparent 62%), radial-gradient(48% 64% at 12% 8%, rgba(57,88,108,.55), transparent 66%), linear-gradient(180deg,#1d3341 0%, #16262f 72%, #0f1a22 100%); } .vmkt .closing::before { content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:26px 26px; } .vmkt .closing-in { position:relative; padding:var(--sec-y) 28px 0; text-align:center; max-width:760px; margin:0 auto; } .vmkt .closing h2 { color:#fff; font-size:clamp(30px,3.6vw,42px); margin-bottom:14px; } .vmkt .closing p { color:rgba(255,255,255,.82); font-size:17.5px; margin:0 0 32px; } .vmkt .closing .cta-row { margin-bottom:26px; } .vmkt .closing .btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.32); box-shadow:none; } .vmkt .closing .btn-ghost:hover { border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.06); } .vmkt .closing-ticks { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:0; padding:0 0 8px; list-style:none; font-size:13.5px; color:rgba(255,255,255,.62); } .vmkt .closing-ticks li { display:inline-flex; align-items:center; gap:7px; } .vmkt .closing-ticks svg { color:#5fd3a6; } .vmkt .closing-shot { position:relative; max-width:920px; margin:56px auto 0; padding:0 28px; } .vmkt .closing-shot .frame { border-radius:16px 16px 0 0; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-bottom:0; box-shadow:0 -20px 80px -20px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.4); background:#fff; } /* ---------- pricing ---------- */ .vmkt .price-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; } .vmkt .price { background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); border:1px solid var(--line); border-radius:var(--r-xl); padding:32px 30px; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(20,40,54,.045), inset 0 1px 0 rgba(255,255,255,.7); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; } .vmkt .price:hover { transform:translateY(-5px); border-color:#cfd8de; box-shadow:0 24px 48px -24px rgba(20,40,54,.34), 0 3px 8px -3px rgba(20,40,54,.1); } .vmkt .price.feat { border:1.5px solid rgba(16,185,129,.5); position:relative; background:linear-gradient(180deg,#eafaf3 0%, #fff 140px); box-shadow:0 24px 54px -26px rgba(16,120,84,.4), 0 0 0 1px rgba(16,185,129,.12); } .vmkt .price.feat:hover { transform:translateY(-5px); box-shadow:0 30px 60px -26px rgba(16,120,84,.5), 0 0 0 1px rgba(16,185,129,.16); } .vmkt .price .tag { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#10b981,#059669); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 14px; border-radius:var(--r-full); box-shadow:0 8px 18px -6px rgba(16,120,84,.6), inset 0 1px 0 rgba(255,255,255,.25); } .vmkt .price .name { font-size:20px; font-weight:720; color:var(--ink); letter-spacing:-.015em; } .vmkt .price .desc { color:var(--t2); font-size:14px; margin:6px 0 22px; min-height:44px; } .vmkt .price .amt-row { display:flex; align-items:baseline; gap:8px; } .vmkt .price .amt { font-size:46px; font-weight:760; letter-spacing:-.04em; line-height:1; color:var(--ink); } .vmkt .price .per { font-size:14px; color:var(--t2); font-weight:520; } .vmkt .price .btn { margin:24px 0 24px; width:100%; } .vmkt .price ul { list-style:none; padding:22px 0 0; margin:0; display:grid; gap:12px; border-top:1px solid var(--line2); } .vmkt .price li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--t1); line-height:1.45; } .vmkt .price li svg { flex:none; margin-top:1px; width:14px; height:14px; padding:3px; box-sizing:content-box; border-radius:50%; background:var(--accent-bg); color:var(--accent); } /* plan comparison table */ .vmkt .compare { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-xs); } .vmkt .compare-wrap { max-width:880px; margin:64px auto 0; overflow-x:auto; } .vmkt .compare th, .vmkt .compare td { padding:13px 18px; font-size:14px; text-align:center; border-bottom:1px solid var(--line2); } .vmkt .compare tbody tr { transition:background .12s; } .vmkt .compare tbody tr:hover { background:var(--tint2); } .vmkt .compare th { background:var(--tint2); font-weight:680; color:var(--ink); font-size:13.5px; } .vmkt .compare td:first-child, .vmkt .compare th:first-child { text-align:left; font-weight:550; color:var(--t1); } .vmkt .compare tr:last-child td { border-bottom:0; } .vmkt .compare .yes { color:var(--green); font-weight:700; } .vmkt .compare .no { color:#c3ccd4; } /* ---------- faq ---------- */ .vmkt .faq { max-width:780px; margin:0 auto; display:grid; gap:14px; } .vmkt .faq details { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:6px 22px; box-shadow:var(--sh-xs); } .vmkt .faq details[open] { border-color:#d3dbe2; box-shadow:var(--sh-sm); } .vmkt .faq summary { cursor:pointer; font-weight:620; font-size:15.5px; padding:16px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--ink); } .vmkt .faq summary::-webkit-details-marker { display:none; } .vmkt .faq summary::after { content:"+"; color:var(--slate2); font-size:22px; font-weight:300; line-height:1; } .vmkt .faq details[open] summary::after { content:"\2013"; } .vmkt .faq details p { margin:0 0 18px; color:var(--t2); font-size:14.5px; line-height:1.62; } .vmkt .faq-more { text-align:center; margin:36px 0 0; color:var(--t3); font-size:14.5px; } .vmkt .faq-more a { font-weight:640; color:var(--accent); } /* ---------- contact ---------- */ .vmkt .contact-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:40px; text-align:center; box-shadow:var(--sh-md); max-width:580px; margin:0 auto; } .vmkt .contact-card .ic { margin:0 auto 18px; width:54px; height:54px; } /* ---------- metrics band (big, honest numbers) ---------- */ .vmkt .metrics { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fbfcfd,#f3f6f8); } .vmkt .metrics-in { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); } .vmkt .metric { padding:40px 16px; text-align:center; border-right:1px solid var(--line); } .vmkt .metric:last-child { border-right:0; } .vmkt .metric-ic { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:15px; border-radius:12px; background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%); border:1px solid rgba(16,185,129,.22); color:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); } .vmkt .metric .n { display:block; font-size:clamp(34px,3.7vw,46px); font-weight:800; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; background:linear-gradient(160deg,#2c4a5d 0%, #16303c 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .vmkt .metric .n .u { -webkit-text-fill-color:var(--accent); color:var(--accent); } .vmkt .metric .l { display:block; margin-top:11px; font-size:13px; color:var(--t2); font-weight:580; letter-spacing:-.01em; } /* ---------- "every view" tabbed gallery (CSS-only, no JS) ---------- */ .vmkt .viewgal { position:relative; } .vmkt .viewgal > input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .vmkt .viewgal-tabs { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:0 0 28px; } .vmkt .viewgal-tabs label { display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--r-full); border:1px solid var(--line); background:#fff; color:var(--t2); font-size:13.6px; font-weight:570; cursor:pointer; transition:background .15s, color .15s, border-color .15s, box-shadow .15s; white-space:nowrap; } .vmkt .viewgal-tabs label:hover { border-color:var(--slate2); color:var(--ink); } .vmkt .viewgal-tabs label svg { opacity:.62; flex:none; } .vmkt .viewgal-body { position:relative; } .vmkt .viewgal-stage { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-lg); background:#0f1a21; aspect-ratio:1920/1200; } .vmkt .vg-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .4s var(--ease); } .vmkt .vg-slide img { width:100%; height:100%; object-fit:cover; object-position:top left; display:block; } .vmkt .vg-badge { position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:baseline; gap:8px; max-width:calc(100% - 32px); background:rgba(15,26,33,.84); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#d5dee4; padding:9px 14px; border-radius:11px; font-size:12.8px; line-height:1.35; box-shadow:0 10px 30px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); } .vmkt .vg-badge b { color:#fff; font-weight:660; font-size:13.5px; } /* active tab + visible slide (grouped so it stays compact for all 11 views) */ .vmkt #vg1:checked ~ .viewgal-tabs label[for=vg1], .vmkt #vg2:checked ~ .viewgal-tabs label[for=vg2], .vmkt #vg3:checked ~ .viewgal-tabs label[for=vg3], .vmkt #vg4:checked ~ .viewgal-tabs label[for=vg4], .vmkt #vg5:checked ~ .viewgal-tabs label[for=vg5], .vmkt #vg6:checked ~ .viewgal-tabs label[for=vg6], .vmkt #vg7:checked ~ .viewgal-tabs label[for=vg7], .vmkt #vg8:checked ~ .viewgal-tabs label[for=vg8], .vmkt #vg9:checked ~ .viewgal-tabs label[for=vg9], .vmkt #vg10:checked ~ .viewgal-tabs label[for=vg10], .vmkt #vg11:checked ~ .viewgal-tabs label[for=vg11] { background:var(--slate); color:#fff; border-color:var(--slate); box-shadow:var(--sh-sm); } .vmkt #vg1:checked ~ .viewgal-tabs label[for=vg1] svg, .vmkt #vg2:checked ~ .viewgal-tabs label[for=vg2] svg, .vmkt #vg3:checked ~ .viewgal-tabs label[for=vg3] svg, .vmkt #vg4:checked ~ .viewgal-tabs label[for=vg4] svg, .vmkt #vg5:checked ~ .viewgal-tabs label[for=vg5] svg, .vmkt #vg6:checked ~ .viewgal-tabs label[for=vg6] svg, .vmkt #vg7:checked ~ .viewgal-tabs label[for=vg7] svg, .vmkt #vg8:checked ~ .viewgal-tabs label[for=vg8] svg, .vmkt #vg9:checked ~ .viewgal-tabs label[for=vg9] svg, .vmkt #vg10:checked ~ .viewgal-tabs label[for=vg10] svg, .vmkt #vg11:checked ~ .viewgal-tabs label[for=vg11] svg { opacity:1; } .vmkt #vg1:checked ~ .viewgal-body .vs1, .vmkt #vg2:checked ~ .viewgal-body .vs2, .vmkt #vg3:checked ~ .viewgal-body .vs3, .vmkt #vg4:checked ~ .viewgal-body .vs4, .vmkt #vg5:checked ~ .viewgal-body .vs5, .vmkt #vg6:checked ~ .viewgal-body .vs6, .vmkt #vg7:checked ~ .viewgal-body .vs7, .vmkt #vg8:checked ~ .viewgal-body .vs8, .vmkt #vg9:checked ~ .viewgal-body .vs9, .vmkt #vg10:checked ~ .viewgal-body .vs10, .vmkt #vg11:checked ~ .viewgal-body .vs11 { opacity:1; visibility:visible; z-index:2; } .vmkt .viewgal :focus-visible + .viewgal-tabs { outline:none; } .vmkt .viewgal-tabs label:focus-within { outline:2px solid var(--slate2); outline-offset:2px; } /* ---------- dense capability grid ("everything in one workspace") ---------- */ .vmkt .feat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .vmkt .feat { display:flex; gap:13px; align-items:flex-start; padding:17px 18px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); box-shadow:0 1px 2px rgba(20,40,54,.04); transition:border-color .17s var(--ease), box-shadow .17s var(--ease), transform .17s var(--ease); } .vmkt .feat:hover { border-color:#cfd8de; box-shadow:0 16px 32px -18px rgba(20,40,54,.3); transform:translateY(-3px); } .vmkt .feat .fic { width:36px; height:36px; border-radius:10px; background:linear-gradient(158deg,#f4f8fa 0%, #e7eef2 100%); border:1px solid var(--line2); color:var(--slate2); box-shadow:inset 0 1px 0 #fff; display:inline-flex; align-items:center; justify-content:center; flex:none; transition:background .17s var(--ease), color .17s var(--ease), border-color .17s var(--ease); } .vmkt .feat:hover .fic { background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%); border-color:rgba(16,185,129,.22); color:var(--accent); } .vmkt .feat .ftx b { display:block; font-size:14px; color:var(--ink); letter-spacing:-.01em; font-weight:640; } .vmkt .feat .ftx span { display:block; margin-top:3px; font-size:12.7px; color:var(--t2); line-height:1.45; } /* ---------- "how it works" numbered steps ---------- */ .vmkt .steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; counter-reset:step; } .vmkt .step { position:relative; background:linear-gradient(180deg,#fff 0%, #fbfcfd 100%); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; box-shadow:0 1px 2px rgba(20,40,54,.045), inset 0 1px 0 rgba(255,255,255,.7); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; } .vmkt .step:hover { transform:translateY(-4px); border-color:#cfd8de; box-shadow:0 22px 44px -22px rgba(20,40,54,.32), 0 3px 8px -3px rgba(20,40,54,.1); } .vmkt .step::before { counter-increment:step; content:counter(step); display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; background:var(--grad); color:#fff; font-weight:700; font-size:16px; margin-bottom:16px; box-shadow:0 4px 12px -4px rgba(16,60,48,.5), inset 0 1px 0 rgba(255,255,255,.18); } .vmkt .step h3 { font-size:16.5px; letter-spacing:-.015em; margin:0 0 7px; } .vmkt .step p { margin:0; color:var(--t2); font-size:14.5px; line-height:1.56; } .vmkt .step p a { font-weight:600; color:var(--accent); } /* a subtle chevron in the gap between steps, to read as a flow */ @media (min-width:821px) { .vmkt .steps .step:not(:last-child)::after { content:""; position:absolute; top:44px; right:-13px; z-index:2; width:9px; height:9px; border-top:2px solid var(--soft); border-right:2px solid var(--soft); transform:rotate(45deg); transition:transform .2s var(--ease); } .vmkt .steps .step:not(:last-child):hover::after { transform:rotate(45deg) translate(1px,-1px); } } @media (max-width:820px) { .vmkt .steps { grid-template-columns:1fr; max-width:460px; margin:0 auto; } } /* ---------- "why" split-feature list ---------- */ .vmkt .why-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; } .vmkt .why { padding:6px 34px; } .vmkt .why:first-child { padding-left:0; } .vmkt .why:last-child { padding-right:0; } .vmkt .why + .why { border-left:1px solid var(--line2); } .vmkt .why .why-ic { width:44px; height:44px; border-radius:12px; background:linear-gradient(158deg,#eafaf3 0%, #d6f0e4 100%); border:1px solid rgba(16,185,129,.22); color:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); display:inline-flex; align-items:center; justify-content:center; margin-bottom:15px; } .vmkt .why h3 { font-size:17px; letter-spacing:-.015em; margin:0 0 7px; } .vmkt .why p { margin:0; color:var(--t2); font-size:14.5px; line-height:1.58; } @media (max-width:900px) { .vmkt .why-grid { grid-template-columns:1fr; gap:26px; } .vmkt .why { padding:0; } .vmkt .why + .why { border-left:0; } } /* ---------- integration chip row ---------- */ .vmkt .intg { display:flex; flex-wrap:wrap; gap:11px; justify-content:center; } .vmkt .intg span { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1px solid var(--line); border-radius:var(--r-full); background:#fff; font-size:14px; font-weight:560; color:var(--t1); box-shadow:var(--sh-xs); } .vmkt .intg span .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); } /* ---------- scroll-reveal motion (CSS-only, progressive enhancement) ---------- */ /* Guarded by @supports so browsers without scroll-timeline show everything normally, and disabled under reduced-motion. */ @keyframes rise-in { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .vmkt .sec-head, .vmkt .grid > .card, .vmkt .step, .vmkt .feat, .vmkt .why, .vmkt .split-copy, .vmkt .split-shot, .vmkt .price, .vmkt .metric, .vmkt .intg, .vmkt .viewgal, .vmkt .faq, .vmkt .closing-in, .vmkt .logos { animation:rise-in linear both; animation-timeline:view(); animation-range:entry 0% cover 20%; } .vmkt .grid > .card:nth-child(2), .vmkt .steps .step:nth-child(2) { animation-range:entry 3% cover 22%; } .vmkt .grid > .card:nth-child(3), .vmkt .steps .step:nth-child(3) { animation-range:entry 6% cover 24%; } } } /* ---------- footer ---------- */ .vmkt .foot { background:var(--slate-deep); color:#b9c4cf; position:relative; overflow:hidden; } .vmkt .foot::before { content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); } .vmkt .foot::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(42% 60% at 10% 0%, rgba(16,185,129,.10), transparent 65%); } .vmkt .foot .wrap { position:relative; z-index:1; } .vmkt .foot-top { display:grid; grid-template-columns:1.6fr repeat(5, minmax(0,1fr)); gap:28px; padding:68px 0 52px; } .vmkt .foot-brand { display:inline-flex; align-items:center; gap:11px; } .vmkt .foot-brand .brand-mk { box-shadow:0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px -8px rgba(0,0,0,.6); } .vmkt .foot-brand .wm { font-size:17.5px; font-weight:760; letter-spacing:-.015em; color:#fff; } .vmkt .foot-brand .wm span { color:#8b98a5; font-weight:600; } .vmkt .foot .btn-foot { display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding:11px 18px; border:1px solid rgba(255,255,255,.24); border-radius:11px; color:#fff; font-size:14px; font-weight:600; transition:border-color .15s, background .15s; } .vmkt .foot .btn-foot:hover { border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.05); } .vmkt .foot-blurb { color:#8d9aa6; font-size:14px; line-height:1.62; margin:18px 0 0; max-width:34ch; } .vmkt .foot-suite-badge { display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:12.5px; font-weight:600; color:#9fb4ac; background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.32); padding:6px 12px; border-radius:var(--r-full); } .vmkt .foot-suite-badge .dot { width:7px; height:7px; border-radius:50%; background:#5fd3a6; } .vmkt .foot-col h4 { color:#fff; font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; margin:0 0 16px; font-weight:700; } .vmkt .foot-col a { display:block; color:#9aa7b3; font-size:14px; padding:6px 0; transition:color .14s, transform .14s; } .vmkt .foot-col a:hover { color:#fff; transform:translateX(2px); } .vmkt .foot-col .ext { display:flex; align-items:center; gap:6px; } .vmkt .foot-col .ext svg { opacity:.55; flex:none; } .vmkt .foot-bot { border-top:1px solid rgba(255,255,255,.09); padding:24px 0 46px; display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; color:#71808d; font-size:13px; } .vmkt .foot-bot a { color:#9aa7b3; } .vmkt .foot-bot a:hover { color:#fff; } .vmkt .foot-bot .dotsep { margin:0 8px; opacity:.5; } @media (max-width:1040px) { .vmkt .foot-top { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 28px; } .vmkt .foot-top > div:first-child { grid-column:1 / -1; } } /* ---------- page hero (inner pages) ---------- */ .vmkt .page-hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); isolation:isolate; background: radial-gradient(52% 64% at 50% -6%, rgba(16,185,129,.14), transparent 64%), radial-gradient(42% 52% at 87% 4%, rgba(44,74,93,.16), transparent 70%), radial-gradient(40% 46% at 4% 30%, rgba(16,185,129,.08), transparent 70%), linear-gradient(180deg,#fbfdfe 0%, #edf2f5 100%); } .vmkt .page-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(rgba(34,57,71,.09) 1px, transparent 1.4px); background-size:28px 28px; mask-image:radial-gradient(122% 82% at 50% -2%, #000 30%, transparent 72%); -webkit-mask-image:radial-gradient(122% 82% at 50% -2%, #000 30%, transparent 72%); } .vmkt .page-hero .hero-in { position:relative; padding:98px 28px 86px; } .vmkt .page-hero h1 { font-size:clamp(38px,4.9vw,58px); letter-spacing:-.04em; line-height:1.02; } .vmkt .page-hero .lead { font-size:clamp(17px,1.5vw,20px); } /* ---------- legal pages ---------- */ .vmkt .legal { max-width:760px; margin:0 auto; padding:72px 28px 96px; } .vmkt .legal h1 { font-size:clamp(30px,4vw,40px); margin-bottom:8px; } .vmkt .legal .meta { color:var(--t3); font-size:13.5px; margin:0 0 34px; } .vmkt .legal .lead { margin-bottom:8px; } .vmkt .legal h2 { font-size:19px; letter-spacing:-.015em; margin:38px 0 10px; } .vmkt .legal p, .vmkt .legal li { color:var(--t1); font-size:15.5px; line-height:1.7; } .vmkt .legal p { margin:0 0 14px; } .vmkt .legal ul { padding-left:22px; margin:0 0 14px; } .vmkt .legal li { margin:6px 0; } .vmkt .legal a { font-weight:600; color:var(--accent); } /* ---------- a11y ---------- */ .vmkt .skip-link { position:absolute; left:-9999px; top:0; z-index:100; background:var(--slate); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; font-weight:600; font-size:14px; } .vmkt .skip-link:focus { left:0; } .vmkt :focus-visible { outline:2px solid var(--slate2); outline-offset:2px; border-radius:4px; } /* ---------- responsive ---------- */ @media (max-width:980px) { .vmkt .strip-in { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; } .vmkt .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .vmkt .split, .vmkt .split.rev { grid-template-columns:1fr; gap:34px; padding:44px 0; } .vmkt .split.rev .split-copy { order:0; } .vmkt .duo { grid-template-columns:1fr; } .vmkt .price-grid { grid-template-columns:1fr; max-width:460px; margin:0 auto; } .vmkt .foot-top { grid-template-columns:1fr 1fr; gap:28px 24px; } .vmkt .metrics-in { grid-template-columns:repeat(3,minmax(0,1fr)); } .vmkt .metric:nth-child(4) { border-right:1px solid var(--line); } .vmkt .metric:nth-child(3n) { border-right:0; } .vmkt .feat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:640px) { .vmkt section { padding:64px 0; } .vmkt .hero-in { padding:64px 22px 0; } .vmkt .shot-stage { margin-top:44px; padding:0 16px; } .vmkt .grid-2, .vmkt .grid-3, .vmkt .grid-4 { grid-template-columns:1fr; } .vmkt .metrics-in { grid-template-columns:repeat(2,minmax(0,1fr)); } .vmkt .metric { padding:26px 12px; border-bottom:1px solid var(--line); } .vmkt .metric:nth-child(odd) { border-right:1px solid var(--line); } .vmkt .metric:nth-child(even) { border-right:0; } .vmkt .feat-grid { grid-template-columns:1fr; } .vmkt .viewgal-tabs { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .vmkt .viewgal-tabs::-webkit-scrollbar { display:none; } .vmkt .vg-badge { left:10px; bottom:10px; font-size:11.5px; padding:7px 11px; } .vmkt .vg-badge b { font-size:12px; } .vmkt .steps-grid { grid-template-columns:1fr; } .vmkt .browser-url { display:none; } /* zoom-crop the wide app screenshots so the UI stays legible on phones */ .vmkt .split-shot .browser img, .vmkt .hero .browser img { aspect-ratio:4/3; object-fit:cover; object-position:var(--pos-m,28% 0%); } .vmkt .cta-row { flex-direction:column; align-items:stretch; max-width:330px; margin-left:auto; margin-right:auto; } .vmkt .cta-row .btn { width:100%; } .vmkt .hero-note { flex-direction:column; gap:9px; align-items:center; } .vmkt .hero-note span { white-space:nowrap; } .vmkt .strip-in { grid-template-columns:1fr; gap:18px; } .vmkt .strip-item { justify-content:flex-start; } } @media (prefers-reduced-motion:reduce) { .vmkt, body.vmkt { scroll-behavior:auto; } .vmkt .btn, .vmkt .card, .vmkt .price { transition:none; } }