/* Velzio marketing theme — "Direction I" (2026-07-21).
   Rounded calm layout, saturated flat brand color anchors. NO gradients anywhere.
   Palette: Indigo #4438CA (primary anchor) · Ink #242038 (proof bands) · Mist #F6F4FF (ground)
   · Coral trio (warm accent, people moments, never errors) · Adoption Teal (done/completion only).
   Display type: Space Grotesk (700 headings), body stays Inter via ds.css.
   Source of truth for reuse outside the site: packages/design-system/brands/velzio-marketing.css
   — keep that file byte-identical to this one (same contract as ds.css). */

:root{
  --brand-display:'Space Grotesk', var(--font-sans);
  --vz-indigo:#4438CA; --vz-indigo-2:#5b4cf0; --vz-ink:#242038; --vz-teal-l:#7ee0d4;
}
body{ background:#F6F4FF; }
h1,h2,h3,.vz-disp{ font-family:var(--brand-display); }

/* buttons: solid indigo, rounded, soft lift */
[data-brand="velzio"] .btn-primary{ background:var(--vz-indigo)!important; border-color:transparent!important; border-radius:14px!important; box-shadow:0 14px 30px -12px rgba(68,56,202,.55); transition:transform .16s cubic-bezier(.34,1.4,.64,1), box-shadow .16s ease; }
[data-brand="velzio"] .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(68,56,202,.72); }

/* coral tag pill (eyebrow) */
.vz-tag{ display:inline-block; background:var(--coral); color:#fff; font-family:var(--brand-display); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; padding:10px 18px; border-radius:999px; }

/* indigo marker highlight inside a display heading */
.vz-h1 mark{ background:var(--vz-indigo); color:#fff; padding:1px 14px 4px; border-radius:14px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* checked trust line under a hero CTA */
.vz-trustline{ display:flex; gap:24px; justify-content:center; margin-top:30px; font-size:13px; color:var(--ink-secondary); flex-wrap:wrap; }
.vz-trustline span{ display:inline-flex; gap:7px; align-items:center; }
.vz-trustline i{ color:var(--accent-2); font-size:15px; }

/* app screenshot in a flat indigo frame with traffic-light dots */
.vz-frame{ background:var(--vz-indigo); border-radius:24px; padding:18px; box-shadow:0 40px 90px -40px rgba(36,32,56,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.vz-frame .dots{ display:flex; gap:6px; padding:0 4px 14px; }
.vz-frame .dots i{ width:9px; height:9px; border-radius:99px; }
.vz-frame .dots i:nth-child(1){ background:var(--coral); } .vz-frame .dots i:nth-child(2){ background:#f0b429; } .vz-frame .dots i:nth-child(3){ background:var(--vz-teal-l); }
.vz-frame img{ width:100%; display:block; border-radius:12px; }

/* ink proof band with big colored numbers */
.vz-numband{ background:var(--vz-ink); padding:252px 32px 96px; margin-top:-176px; }
.vz-numgrid{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.vz-numcell{ background:#2d2847; border-radius:20px; padding:34px 36px; }
.vz-numcell b{ font-family:var(--brand-display); font-size:42px; font-weight:700; letter-spacing:-.02em; display:block; line-height:1; }
.vz-numcell:nth-child(1) b{ color:var(--vz-teal-l); } .vz-numcell:nth-child(2) b{ color:#f5b3a6; } .vz-numcell:nth-child(3) b{ color:#b9aefc; }
.vz-numcell span{ font-size:13.5px; color:#B9B3D6; display:block; margin-top:12px; line-height:20px; }
@media (max-width:940px){ .vz-numgrid{ grid-template-columns:1fr; } .vz-numband{ padding-top:220px; } }

/* tri-color audience panels: white / coral / indigo */
.vz-panels{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.vz-panel{ padding:44px 38px; min-height:300px; display:flex; flex-direction:column; border-radius:24px; }
.vz-panel .no{ font-family:var(--brand-display); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:auto; }
.vz-panel h3{ font-size:23px; letter-spacing:-.02em; font-weight:700; margin:26px 0 12px; }
.vz-panel p{ font-size:14.5px; line-height:23px; margin:0; }
.vz-panel.w{ background:var(--bg-primary); box-shadow:0 18px 40px -32px rgba(36,32,56,.4); } .vz-panel.w .no{ color:var(--accent); } .vz-panel.w h3{ color:var(--ink-primary); } .vz-panel.w p{ color:var(--ink-secondary); }
.vz-panel.c{ background:var(--coral); } .vz-panel.c .no{ color:var(--coral-tint); } .vz-panel.c h3{ color:#fff; } .vz-panel.c p{ color:var(--coral-tint); }
.vz-panel.i{ background:var(--vz-indigo); } .vz-panel.i .no{ color:var(--vz-teal-l); } .vz-panel.i h3{ color:#fff; } .vz-panel.i p{ color:#DDD9F8; }
@media (max-width:940px){ .vz-panels{ grid-template-columns:1fr; } .vz-panel{ min-height:0; } .vz-panel .no{ margin-bottom:0; } }

/* numbered step cards (how-it-works) */
.vz-howgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
@media (max-width:940px){ .vz-howgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .vz-howgrid{ grid-template-columns:1fr; } }
.vz-stepcard{ background:var(--bg-primary); border-radius:22px; padding:30px 26px; box-shadow:0 18px 40px -32px rgba(36,32,56,.4); }
.vz-stepcard .n{ width:40px; height:40px; border-radius:12px; color:#fff; font-family:var(--brand-display); font-weight:700; font-size:17px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.vz-stepcard h3{ font-size:18px; font-weight:700; color:var(--ink-primary); margin:0 0 8px; letter-spacing:-0.01em; }
.vz-stepcard p{ font-size:13.5px; line-height:21px; color:var(--ink-secondary); margin:0; }

/* big rounded feature card (solid indigo) and its inner white chips */
.vz-featurecard{ background:var(--vz-indigo); border-radius:28px; padding:52px 56px; color:#fff; }
.vz-featurecard .kick{ font-family:var(--brand-display); font-size:13px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--vz-teal-l); }
.vz-chip{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:15px 18px; font-size:13.5px; color:var(--ink-primary); }
.vz-chip i{ color:var(--accent); font-size:17px; flex:0 0 auto; }

/* soft white card (founder, artifacts) */
.vz-fcard{ background:var(--bg-primary); border-radius:24px; padding:44px 48px; display:flex; gap:36px; align-items:center; box-shadow:0 24px 60px -40px rgba(36,32,56,.4); flex-wrap:wrap; }

/* big rounded CTA card: solid indigo (coral reserved for accents, not whole surfaces) */
.vz-ctacard{ background:var(--vz-indigo); border-radius:26px; padding:64px; color:#fff; }
@media (max-width:700px){ .vz-ctacard{ padding:44px 28px; } .vz-fcard{ padding:32px 28px; } .vz-featurecard{ padding:36px 28px; } }
@media (max-width:600px){
  .vz-numband{ padding:210px 20px 64px; }
  .vz-numcell{ padding:28px 24px; }
  .vz-panel{ padding:32px 28px; }
}