/* ==========================================================================
   Vismi AI — Insights / Blog
   Editorial-tech design system
   ========================================================================== */

:root{
  --ink:#13243B;          /* primary text / headings */
  --ink-soft:#2C3E54;
  --muted:#5C6B7C;        /* secondary text */
  --faint:#8A97A6;        /* meta text */
  --bg:#FBFAF7;           /* warm paper background */
  --surface:#FFFFFF;
  --surface-alt:#F4F6F9;
  --border:#E6E9EE;
  --border-strong:#D4DAE2;
  --accent:#1F5FF2;       /* brand blue */
  --accent-deep:#1644B8;
  --accent-soft:#EAF1FE;
  --teal:#0E8C73;
  --teal-soft:#E2F4EF;
  --amber:#B5751A;
  --amber-soft:#FBF0DD;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(19,36,59,.05), 0 2px 8px rgba(19,36,59,.04);
  --shadow-md:0 4px 14px rgba(19,36,59,.08), 0 12px 30px rgba(19,36,59,.06);
  --shadow-lg:0 20px 50px rgba(19,36,59,.12);
  --maxw:1180px;
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink-soft);
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:var(--accent);text-decoration:none;transition:color .18s ease;}
a:hover{color:var(--accent-deep);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ----------------------------- Header / Nav ----------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,250,247,.85);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);font-weight:800;font-size:20px;letter-spacing:-.02em;}
.brand:hover{color:var(--ink);}
.brand .mark{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),#3F7BFF 55%,var(--teal));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;
  font-family:var(--font-body);box-shadow:0 4px 12px rgba(31,95,242,.35);
}
.brand .mark span{transform:translateY(-1px);}
.brand small{display:block;font-size:11px;font-weight:600;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;margin-top:-2px;}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;}
.nav-links a{color:var(--ink-soft);font-weight:600;font-size:15px;}
.nav-links a:hover{color:var(--accent);}
.nav-cta,
.nav-links a.nav-cta{
  background:var(--ink) !important;color:#fff !important;font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:999px;letter-spacing:-.01em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nav-cta:hover,
.nav-links a.nav-cta:hover{background:var(--accent) !important;color:#fff !important;transform:translateY(-1px);box-shadow:0 8px 20px rgba(31,95,242,.3);}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--ink);font-size:26px;line-height:1;}

/* ----------------------------- Footer ----------------------------- */
.site-footer{background:var(--ink);color:#C5CFDB;margin-top:90px;}
.site-footer a{color:#C5CFDB;}
.site-footer a:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding:64px 0 44px;}
.footer-brand .brand{color:#fff;}
.footer-brand .brand small{color:#7E8EA0;}
.footer-brand p{color:#94A2B3;font-size:14.5px;margin:16px 0 0;max-width:34ch;}
.footer-col h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:6px 0 18px;font-weight:700;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:11px;font-size:14.5px;}
.footer-loc{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#94A2B3;margin-bottom:14px;}
.footer-loc b{color:#fff;font-weight:700;display:block;font-size:13px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13.5px;color:#7E8EA0;}
.footer-bottom .socials{display:flex;gap:14px;}
.footer-bottom .socials a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#C5CFDB;font-size:16px;transition:background .18s ease,color .18s ease;}
.footer-bottom .socials a:hover{background:var(--accent);color:#fff;}

/* ----------------------------- Index hero ----------------------------- */
.blog-hero{padding:74px 0 38px;text-align:center;position:relative;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:7px 15px;border-radius:999px;margin-bottom:22px;}
.blog-hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(38px,6vw,64px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin:0 auto 18px;max-width:16ch;}
.blog-hero p{font-size:19px;color:var(--muted);max-width:60ch;margin:0 auto;}

/* ----------------------------- Filters ----------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:38px 0 10px;}
.filter-btn{
  font-family:var(--font-body);font-weight:600;font-size:14.5px;
  padding:9px 18px;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border-strong);color:var(--ink-soft);
  transition:all .18s ease;
}
.filter-btn:hover{border-color:var(--accent);color:var(--accent);}
.filter-btn.active{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ----------------------------- Card grid ----------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:36px 0 0;}
.post-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
.post-card .thumb{height:158px;position:relative;display:grid;place-items:center;overflow:hidden;}
.post-card .thumb svg{width:100%;height:100%;}
.post-card .thumb .cat-pill{position:absolute;top:14px;left:14px;}
.cat-pill{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px);}
.cat-agentforce{background:var(--accent-soft);color:var(--accent-deep);}
.cat-data-cloud{background:var(--teal-soft);color:var(--teal);}
.cat-experience-cloud{background:#F0EAFB;color:#6B3FB0;}
.cat-integrations{background:var(--amber-soft);color:var(--amber);}
.post-card .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.post-card h3{font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.22;letter-spacing:-.015em;color:var(--ink);margin:0 0 10px;}
.post-card h3 a{color:inherit;}
.post-card h3 a:hover{color:var(--accent);}
.post-card .excerpt{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 18px;flex:1;}
.post-card .meta{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--faint);font-weight:600;border-top:1px solid var(--border);padding-top:14px;}
.post-card .meta .read-more{margin-left:auto;color:var(--accent);display:inline-flex;align-items:center;gap:5px;}
.post-card .meta .read-more svg{transition:transform .18s ease;}
.post-card:hover .meta .read-more svg{transform:translateX(3px);}

/* ----------------------------- Article page ----------------------------- */
.breadcrumb{padding:26px 0 0;font-size:13.5px;color:var(--faint);font-weight:600;}
.breadcrumb a{color:var(--faint);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb span{margin:0 8px;}

.article-shell{max-width:760px;margin:0 auto;padding:0 24px;}
.article-head{padding:30px 0 0;}
.article-head .cat-pill{margin-bottom:20px;display:inline-block;}
.article-head h1{font-family:var(--font-display);font-weight:600;font-size:clamp(31px,4.6vw,50px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:0 0 24px;}
.article-meta{display:flex;align-items:center;gap:16px;padding:18px 0 0;border-top:1px solid var(--border);}
.author-dot{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--teal));display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;flex:0 0 auto;}
.article-meta .who{font-weight:700;color:var(--ink);font-size:15px;line-height:1.3;}
.article-meta .who small{display:block;font-weight:600;color:var(--faint);font-size:13px;}
.article-meta .when{margin-left:auto;text-align:right;font-size:13.5px;color:var(--faint);font-weight:600;}

.article-body{padding:40px 0 0;font-size:18px;line-height:1.78;color:var(--ink-soft);}
.article-body > p:first-of-type{font-size:20px;line-height:1.7;color:var(--ink);}
.article-body h2{font-family:var(--font-display);font-weight:600;font-size:30px;line-height:1.2;letter-spacing:-.015em;color:var(--ink);margin:46px 0 16px;}
.article-body h3{font-weight:700;font-size:21px;color:var(--ink);margin:32px 0 10px;letter-spacing:-.01em;}
.article-body p{margin:0 0 20px;}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:0;list-style:none;}
.article-body ul li,.article-body ol li{position:relative;padding-left:30px;margin-bottom:11px;}
.article-body ul li::before{content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--accent);}
.article-body ol{counter-reset:item;}
.article-body ol li{counter-increment:item;}
.article-body ol li::before{content:counter(item);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);font-size:12.5px;font-weight:800;display:grid;place-items:center;}
.article-body strong{color:var(--ink);font-weight:700;}
.article-body a{font-weight:600;border-bottom:1px solid rgba(31,95,242,.3);}
.article-body a:hover{border-color:var(--accent);}

/* table built from old "vs" lists, if present */
.article-body table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:16px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.article-body th{background:var(--surface-alt);text-align:left;padding:13px 16px;font-weight:700;color:var(--ink);font-size:14px;}
.article-body td{padding:12px 16px;border-top:1px solid var(--border);}

/* pull-quote / callout */
.callout{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--radius-sm);padding:22px 24px;margin:30px 0;box-shadow:var(--shadow-sm);}
.callout p{margin:0;color:var(--ink-soft);font-size:16.5px;}
.callout .label{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;display:block;}

/* CTA box */
.cta-card{
  background:linear-gradient(135deg,var(--ink),#1B3354 70%,#1D3F6E);
  color:#fff;border-radius:var(--radius-lg);padding:42px 40px;margin:56px 0 10px;
  position:relative;overflow:hidden;box-shadow:var(--shadow-lg);
}
.cta-card::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(31,95,242,.4),transparent 70%);}
.cta-card h3{font-family:var(--font-display);font-weight:600;font-size:27px;margin:0 0 12px;color:#fff;letter-spacing:-.01em;position:relative;}
.cta-card p{color:#C7D3E2;font-size:16px;margin:0 0 24px;max-width:52ch;position:relative;}
.btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;
  font-weight:700;font-size:15.5px;padding:14px 26px;border-radius:999px;position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(31,95,242,.45);}
.btn svg{transition:transform .18s ease;}
.btn:hover svg{transform:translateX(3px);}

/* share row */
.share-row{display:flex;align-items:center;gap:12px;padding:30px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:46px 0 0;}
.share-row span{font-size:13.5px;font-weight:700;color:var(--faint);letter-spacing:.04em;text-transform:uppercase;}
.share-row a{width:38px;height:38px;border-radius:9px;border:1px solid var(--border-strong);display:grid;place-items:center;color:var(--ink-soft);transition:all .18s ease;}
.share-row a:hover{background:var(--accent);border-color:var(--accent);color:#fff;}

/* related */
.related{padding:70px 0 0;}
.related h2{font-family:var(--font-display);font-weight:600;font-size:30px;color:var(--ink);text-align:center;margin:0 0 8px;letter-spacing:-.015em;}
.related .sub{text-align:center;color:var(--muted);margin:0 0 36px;}

/* ----------------------------- Responsive ----------------------------- */
@media(max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px;}
  .card-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:720px){
  body{font-size:16px;}
  .nav-links{
    position:absolute;top:72px;left:0;right:0;background:var(--surface);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 18px;
    border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links li{width:100%;padding:10px 0;border-bottom:1px solid var(--border);}
  .nav-links li:last-child{border-bottom:0;padding-top:14px;}
  .nav-toggle{display:block;}
  .card-grid{grid-template-columns:1fr;}
  .blog-hero{padding:48px 0 26px;}
  .article-body{font-size:17px;}
  .article-body h2{font-size:25px;}
  .cta-card{padding:32px 26px;}
  .article-meta .when{display:none;}
}