/* ======================================================
   VPick+ site styles (v2) — Drop-in Ready
   - Unified container: 1120px
   - Fixed CSS parser error (removed stray backticks)
   - Preserved visual design and spacing
   - Mapped .btn/.btn-primary to existing .button style
   ====================================================== */

/* ---------- Design tokens ---------- */
:root{
  --teal:#2B8781;
  --ink:#0f141a;
  --slate:#3c4752;
  --line:#e6e9ec;
  --bg:#ffffff;
  --bg-alt:#f7f8f9;
}

/* ---------- Resets & base ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html, body { overflow-x:hidden; }
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.5;
}
h1,h2,h3{
  font-family:Montserrat,Inter,Arial,sans-serif;
  line-height:1.2;
  margin:0 0 .5rem;
}
p{ margin:.5rem 0; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }
img, svg{ max-width:100%; display:block; }

/* ---------- Layout: container & sections ---------- */
.container{
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  padding-left:24px;
  padding-right:24px;
}
.section{ padding:64px 0; }

/* ---------- Header / Nav ---------- */
.site-header{ background:#fff; border-bottom:1px solid var(--line); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 0; border-bottom:1px solid var(--line);
}
.site-header .nav{ border-bottom:1px solid var(--line); } /* keep header rule explicit */
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand img{ height:28px; width:auto; display:block; }
nav a{ margin:0 8px; }
.site-header nav a{ color:var(--ink); text-decoration:none; font-weight:500; }
.site-header nav a:hover{ color:var(--teal); text-decoration:underline; }
.site-header nav a.active{ color:var(--teal); }

/* ---------- Typography helpers ---------- */
.section-title{ margin:0 0 .25rem; }
.section-sub{ color:var(--slate); max-width:68ch; }
.lead{ font-size:1.1rem; color:var(--slate); }

/* ---------- Buttons ---------- */
.button{
  display:inline-block;
  background:var(--teal);
  color:#fff;
  padding:10px 16px;
  border-radius:8px;
  font-weight:600;
}
.button:hover{ background:#267b75; text-decoration:none; }
.button.secondary{
  background:transparent;
  border:1px solid var(--teal);
  color:var(--teal);
}
.button.secondary:hover{ background:#e9f3f2; }

/* Map .btn / .btn-primary (used in LiveMap CTA) to .button look */
.btn{ display:inline-block; padding:10px 16px; border-radius:8px; font-weight:600; }
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:#267b75; text-decoration:none; }

/* ---------- Hero ---------- */
.hero{ position:relative; background:var(--bg-alt); }
.hero-wrap{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:32px; align-items:center; padding:72px 0;
}
.hero-image img{
  width:100%; max-width:520px; border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}
/* Decorative soft S-curve */
.curve{
  position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:radial-gradient(closest-side, rgba(43,135,129,.4), rgba(43,135,129,0) 70%);
  filter:blur(.5px);
}

/* ---------- Grids & cards ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px;
  background:#fff;
}
.references h3 {
  margin-bottom: .5rem;
}
.references ol {
  margin-left: 1.25rem;
  padding-left: 0;
  font-size: .9rem;
  color: #3c4752;
}
.ref-line {
  margin: 48px 0 24px;
  border: none;
  border-top: 1px solid #e6e9ec;
}

/* ---------- Lists & steps ---------- */
.list{ padding-left:18px; }
.list li{ margin:.35rem 0; }
.steps{ counter-reset:step; list-style:none; padding:0; display:grid; gap:12px; }
.steps li{ display:flex; align-items:flex-start; }
.steps li::before{
  counter-increment:step; content:counter(step);
  display:inline-grid; place-items:center;
  width:28px; height:28px; margin-right:10px; border-radius:50%;
  background:var(--teal); color:#fff; font-weight:700;
}

/* ---------- Alt section background bands ---------- */
.alt{ background:var(--bg-alt); }
/* Accent band (e.g., LiveMap) */
.section-accent{ background:var(--bg-alt); }

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(90deg,#eaf4f3,#f7f8f9);
  border-top:1px solid #e0eceb;
}
.cta-band-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:20px 0;
}

/* ---------- Footer CTA (if used) ---------- */
.footer-cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 0; border-top:1px solid var(--line);
}

/* ---------- Page hero (secondary pages) ---------- */
.page-hero .hero-inner{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:32px; align-items:center; padding:60px 0;
}

/* ---------- Forms ---------- */
input,select,textarea{ width:100%; padding:10px; border:1px solid #C3C9CE; border-radius:8px; }

/* ---------- Utility stacks ---------- */
.stack a{ display:inline-block; margin:6px 6px 0 0; }

/* ---------- Breadcrumbs ---------- */
.breadcrumb{ font-size:14px; margin:16px 0 24px; color:#3c4752; }
.breadcrumb a{ color:var(--teal); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb span.separator{ margin:0 6px; color:#5a6572; }

/* ---------- LiveMap Homepage Banner ---------- */
.home-livemap-block{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:2.5rem; align-items:center;
}
.home-livemap-block .pill.new{
  background:#10b981; color:#fff; padding:.2rem .6rem; border-radius:999px;
  font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.home-livemap-block .hlm-image img{
  width:100%; border-radius:10px; box-shadow:0 8px 26px rgba(0,0,0,.15);
}

/* Optional “watch” banner (if used) */
.livemap-watch-banner{ position:relative; margin:2rem 0 3rem; }
.livemap-watch-link{
  display:block; position:relative; border-radius:12px; overflow:hidden; text-decoration:none;
}
.livemap-watch-img{
  width:100%; border-radius:12px; display:block;
  box-shadow:0 12px 40px rgba(0,0,0,0.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.livemap-watch-link:hover .livemap-watch-img{ transform:scale(1.015); box-shadow:0 16px 50px rgba(0,0,0,0.28); }
.livemap-watch-cta{
  position:absolute; bottom:1.5rem; left:1.5rem;
  background:rgba(0,0,0,0.55); padding:.75rem 1.25rem; border-radius:8px;
  backdrop-filter:blur(4px); color:#fff; font-size:1.15rem; font-weight:600;
  letter-spacing:.02em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5rem;
}
.livemap-watch-cta span{ display:inline-block; }

/* Live iframe wrapper (if/when used on Product) */
.iframe-wrap{
  position:relative; overflow:hidden; border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.12);
}
.iframe-wrap iframe{ width:100%; height:520px; border:0; display:block; }
@media (max-width:640px){ .iframe-wrap iframe{ height:420px; } }

/* ---------- Industry page: multimodal icon row ---------- */
.mode-icons{
  display:flex; align-items:flex-start; justify-content:center;
  gap:2rem; margin:2rem auto 2.5rem; padding:0; list-style:none; max-width:960px;
}
.mode-icons li{
  text-align:center; color:var(--text, #1A1A1A); min-width:120px;
}
.mode-icons li img{
  width:56px; height:56px; display:block; margin:0 auto .5rem;
}
.mode-icons li span{
  display:inline-block; font-size:.95rem; font-weight:600; letter-spacing:.01em;
}
.mode-icons + .section,
.mode-icons + section{ scroll-margin-top:80px; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .hero-wrap, .page-hero .hero-inner{ grid-template-columns:1fr; }
  .curve{ display:none; }
}
@media (max-width:900px){
  .home-livemap-block{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .site-header nav{ display:flex; flex-wrap:wrap; gap:8px; }
}