/* MatterVision brand tokens — lifted from live site */
:root{
  --navy:#101333;
  --teal:#65c7c2;
  --verdant:#cfdf6a;
  --sky:#0d77b7;
  --seafoam:#00b8a9;
  --ink-soft:#3d4460;
  --glass:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.78);
  /* current live-site system (globals.css :root) */
  --aero-green:#00987A;
  --dolphin-blue:#00A7D5;
  --denim-blue:#0060B9;
  --iridescent-gradient:linear-gradient(90deg,var(--aero-green) 0%,var(--dolphin-blue) 50%,var(--denim-blue) 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Cabin',sans-serif;color:var(--navy);overflow-x:hidden;
  background:
    radial-gradient(1100px 750px at 88% -8%, rgba(101,199,194,.28) 0%, transparent 60%),
    radial-gradient(900px 700px at -8% 34%, rgba(207,223,106,.22) 0%, transparent 55%),
    radial-gradient(1000px 900px at 72% 92%, rgba(13,119,183,.14) 0%, transparent 60%),
    linear-gradient(180deg,#f6fbfa 0%, #eef6f7 55%, #f4faf6 100%);
}
.serif{font-family:'Hedvig Letters Serif',serif;font-weight:400}
em{font-family:'Hedvig Letters Serif',serif;font-style:italic}
nav{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;align-items:center;gap:26px;padding:11px 13px 11px 24px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--glass-border);border-radius:999px;
  box-shadow:0 8px 30px rgba(16,19,51,.10), inset 0 1px 0 rgba(255,255,255,.9);
  white-space:nowrap;
}
nav .logo{font-weight:700;letter-spacing:-.01em;font-size:17px}
nav a{color:var(--ink-soft);text-decoration:none;font-size:14.5px;font-weight:500}
nav a:hover{color:var(--navy)}
.pill{
  display:inline-block;padding:13px 28px;border-radius:999px;text-decoration:none;
  color:#fff !important;font-weight:700;font-size:15px;
  background:var(--iridescent-gradient);
  box-shadow:0 8px 24px rgba(0,150,180,.4), inset 0 1.5px 0 rgba(255,255,255,.35);
  transition:transform .2s, box-shadow .2s;
}
.pill:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,150,180,.55), inset 0 1.5px 0 rgba(255,255,255,.35)}
/* live site: paragraphs are Inter (headings Hedvig) */
p,.hero-sub{font-family:'Inter',sans-serif}
.hero{min-height:100vh;position:relative;display:flex;align-items:center;padding:110px 6vw 60px}
.eyebrow{
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--sky);margin-bottom:22px;display:flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--teal);display:inline-block}
h1{font-size:clamp(42px,4.8vw,72px);line-height:1.04;letter-spacing:-.01em;font-weight:400}
.hero-sub{margin-top:24px;font-size:18.5px;line-height:1.55;color:var(--ink-soft);max-width:470px}
.hero-cta{margin-top:36px;display:flex;align-items:center;gap:20px}
.hero-cta .micro{font-size:13.5px;color:var(--ink-soft)}
.variant-badge{
  position:fixed;bottom:20px;left:20px;z-index:200;font-family:'Inter',sans-serif;font-size:12px;
  letter-spacing:.08em;padding:9px 16px;border-radius:999px;background:var(--navy);color:#fff;
  text-decoration:none;opacity:.85;
}
.variant-badge:hover{opacity:1}
video{background:#0a0c22}

/* ---------- mobile only: collapse the nav pill to logo + Book a Demo ---------- */
@media (max-width:767px){
  nav{gap:14px;padding:8px 8px 8px 18px;max-width:calc(100vw - 24px)}
  nav a:not(.pill){display:none}
  nav .pill{padding:10px 20px;font-size:13.5px}
}