/* =========================================================================
   INSIGHTS PAGE — Page-specific styles
   All rules scoped with .iv- prefix to avoid breaking global header/footer
   ========================================================================= */

/* ---- HERO ---- */
.iv-hero{
  position:relative;
  padding:100px 0 90px;
  background:radial-gradient(circle at 88% 20%,rgba(19,184,244,.08),transparent 28%),radial-gradient(circle at 65% 75%,rgba(18,77,216,.06),transparent 28%),#fff;
  overflow:hidden
}
.iv-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:center
}
.iv-hero-copy{max-width:640px}
.iv-hero-heading{
  font-size:clamp(2.4rem,4.5vw,4.2rem);
  line-height:1.06;
  letter-spacing:-.045em;
  margin:0 0 22px
}
.iv-hero-heading .line{display:block;overflow:hidden}
.iv-hero-heading .line>span{display:block;transform:translateY(105%)}
.iv-hero-heading em{font-style:normal;background:linear-gradient(90deg,var(--royal),var(--blue),var(--cyan));background-size:200% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;color:transparent}
.iv-lead{
  font-size:1.02rem;
  color:var(--muted);
  line-height:1.62;
  max-width:560px;
  margin:0 0 32px
}

/* ---- HERO VISUAL — INSIGHT ENGINE PANEL ---- */
.iv-hero-visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:540px;
}
.iv-insight-panel{
  width:100%;
  max-width:480px;
  position:relative;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(232,242,255,.88));
  border:1px solid rgba(18,77,216,.12);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(6,16,79,.08),inset 0 0 40px rgba(255,255,255,.5);
  overflow:hidden;
  padding:0
}
.iv-panel-header{
  padding:14px 20px;
  border-bottom:1px solid rgba(18,77,216,.08);
  background:linear-gradient(90deg,rgba(18,77,216,.04),transparent)
}
.iv-panel-label{
  font:700 .58rem Manrope;
  color:var(--royal);
  letter-spacing:.18em
}
.iv-panel-body{
  padding:24px 20px;
  position:relative
}
.iv-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  position:relative;
  z-index:2
}
.iv-engine-node{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 4px 12px rgba(6,16,79,.05);
  transition:border-color .22s,background .22s,transform .22s,box-shadow .22s;
  cursor:default
}
.iv-engine-node span{
  font:700 .58rem Manrope;
  color:var(--navy);
  letter-spacing:.06em;
  text-align:center;
  line-height:1.3
}
.iv-engine-node:hover{
  border-color:var(--blue);
  background:#f4faff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(6,16,79,.1)
}
.iv-engine-node:hover span{color:var(--blue)}
.iv-row-connector{
  flex:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  opacity:.4;
  position:relative;
  z-index:1
}
.iv-row-conn-h{width:20px}
.iv-column-connectors{
  display:flex;
  justify-content:center;
  height:24px;
  position:relative;
  margin:8px 0
}
.iv-col-conn{
  width:2px;
  background:linear-gradient(180deg,var(--blue),var(--cyan));
  opacity:.4;
  position:relative;
  z-index:1
}
.iv-col-conn::before,
.iv-col-conn::after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  background:var(--cyan);
  transform:rotate(45deg);
  left:50%;
  margin-left:-2.5px
}
.iv-col-conn-top::before{top:-2.5px}
.iv-col-conn-top::after{display:none}
.iv-col-conn-bottom::before{display:none}
.iv-col-conn-bottom::after{bottom:-2.5px}
.iv-engine-center{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
  margin:-8px 0
}
.iv-center-inner{
  background:linear-gradient(135deg,var(--navy),var(--royal));
  border-radius:12px;
  padding:18px 28px;
  text-align:center;
  box-shadow:0 12px 35px rgba(18,77,216,.25);
  min-width:180px;
  transition:transform .22s,box-shadow .22s
}
.iv-center-inner:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 42px rgba(18,77,216,.3)
}
.iv-center-eyebrow{
  display:block;
  font:600 .52rem Manrope;
  color:#55c8fa;
  letter-spacing:.2em;
  margin-bottom:4px
}
.iv-center-title{
  display:block;
  font:800 .82rem Manrope;
  color:#fff;
  letter-spacing:.08em;
  margin-bottom:4px
}
.iv-center-sub{
  display:block;
  font:500 .55rem Inter;
  color:rgba(255,255,255,.7);
  letter-spacing:.04em
}
.iv-panel-footer{
  padding:16px 20px;
  border-top:1px solid rgba(18,77,216,.08);
  background:linear-gradient(90deg,transparent,rgba(18,77,216,.03),transparent)
}
.iv-footer-label{
  display:block;
  font:700 .52rem Manrope;
  color:var(--muted);
  letter-spacing:.16em;
  margin-bottom:10px;
  text-align:center
}
.iv-output-chips{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap
}
.iv-output-chip{
  padding:5px 10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:5px;
  font:600 .52rem Manrope;
  color:var(--muted);
  letter-spacing:.08em;
  transition:border-color .2s,color .2s,background .2s
}
.iv-output-chip:hover{
  border-color:var(--blue);
  color:var(--blue);
  background:#f4faff
}

/* ---- ANIMATION CLASSES ---- */
.iv-reveal{
  opacity:1;
  transform:none
}
.iv-reveal.iv-animate{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)
}
.iv-reveal.iv-animate.iv-visible{
  opacity:1;
  transform:none
}
.iv-stagger > * {
  opacity:1;
  transform:none
}
.iv-stagger.iv-animate > * {
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease,transform .35s ease
}
.iv-stagger.iv-animate.iv-visible > *:nth-child(1){transition-delay:0ms}
.iv-stagger.iv-animate.iv-visible > *:nth-child(2){transition-delay:50ms}
.iv-stagger.iv-animate.iv-visible > *:nth-child(3){transition-delay:100ms}
.iv-stagger.iv-animate.iv-visible > *:nth-child(4){transition-delay:150ms}
.iv-stagger.iv-animate.iv-visible > *:nth-child(5){transition-delay:200ms}
.iv-stagger.iv-animate.iv-visible > *:nth-child(6){transition-delay:250ms}
.iv-stagger.iv-animate.iv-visible > *:nth-child(7){transition-delay:300ms}
.iv-stagger.iv-animate.iv-visible > *:nth-child(8){transition-delay:350ms}
.iv-stagger.iv-animate.iv-visible > *:nth-child(9){transition-delay:400ms}
.iv-stagger.iv-animate.iv-visible > *:nth-child(10){transition-delay:450ms}
.iv-stagger.iv-animate.iv-visible > *{opacity:1;transform:none}

/* ---- SECTION HEADERS ---- */
.iv-section-header{
  text-align:center;
  max-width:720px;
  margin:0 auto 55px;
  display:flex;
  flex-direction:column;
  align-items:center
}
.iv-section-header .eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  margin-inline:auto;
  margin-bottom:14px
}
.iv-section-header h2{
  font-size:clamp(1.85rem,3vw,2.9rem);
  line-height:1.12;
  letter-spacing:-.04em;
  text-align:center;
  max-width:680px;
  margin-inline:auto;
  margin-bottom:0
}
.iv-section-header p:not(.eyebrow){
  color:var(--muted);
  font-size:.96rem;
  margin-top:16px;
  text-align:center
}

/* ---- CATEGORIES ---- */
.iv-categories{
  background:#fff
}
.iv-cat-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px
}
.iv-cat-card{
  display:flex;
  flex-direction:column;
  padding:22px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .22s,background .22s,transform .22s,box-shadow .22s;
  cursor:pointer
}
.iv-cat-card:hover{
  border-color:var(--blue);
  background:#f4faff;
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(6,16,79,.08)
}
.iv-cat-card:hover .iv-cat-icon{color:var(--blue)}
.iv-cat-card:hover .iv-cat-arrow{transform:translateX(3px);color:var(--blue)}
.iv-cat-icon{
  font-size:1.5rem;
  color:var(--royal);
  margin-bottom:14px;
  transition:color .22s
}
.iv-cat-card b{
  font:700 .82rem Manrope;
  color:var(--navy);
  margin-bottom:6px;
  display:block
}
.iv-cat-card p{
  font-size:.72rem;
  color:var(--muted);
  line-height:1.5;
  margin:0;
  flex:1
}
.iv-cat-arrow{
  font-size:.85rem;
  color:var(--royal);
  margin-top:14px;
  transition:transform .22s,color .22s
}

/* ---- FEATURED ---- */
.iv-featured{
  background:var(--soft)
}
.iv-featured-label{
  font:700 .68rem Manrope;
  color:var(--royal);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  gap:10px
}
.iv-featured-label i{
  display:inline-block;
  width:24px;
  height:2px;
  background:var(--blue)
}
.iv-featured-card{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
  padding:50px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 14px 40px rgba(6,16,79,.06)
}
.iv-featured-visual{
  background:linear-gradient(145deg,#f4f8fd,#eef5ff);
  border:1px solid var(--line);
  border-radius:16px;
  padding:30px;
  min-height:340px;
  display:flex;
  align-items:center;
  justify-content:center
}
.iv-featured-diagram{
  width:100%;
  position:relative
}
.iv-diagram-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:14px 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 6px 18px rgba(6,16,79,.05);
  transition:transform 220ms ease,background 220ms ease,border-color 220ms ease,box-shadow 220ms ease
}
.iv-diagram-node span{
  font:700 .68rem Manrope;
  color:var(--navy);
  letter-spacing:.04em;
  text-align:center;
  line-height:1.35;
  transition:color 180ms ease
}
.iv-diagram-arrow{
  font-size:.9rem;
  color:var(--blue);
  transition:transform 140ms ease,opacity 140ms ease;
  transform-origin:top center
}
.iv-dn-1{position:relative;z-index:4}
.iv-dn-2{position:relative;z-index:3}
.iv-dn-3{position:relative;z-index:2}
.iv-dn-4{position:relative;z-index:1;background:linear-gradient(135deg,var(--royal),var(--blue));border-color:transparent}
.iv-dn-4 span{color:#fff}
.iv-dn-4 .iv-diagram-arrow{color:rgba(255,255,255,.7)}
.iv-diagram-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  margin-top:20px
}
.iv-diagram-tags span{
  padding:4px 10px;
  background:#f4f8fd;
  border:1px solid var(--line);
  border-radius:4px;
  font:600 .58rem Manrope;
  color:var(--muted);
  letter-spacing:.06em;
  transition:background 180ms ease,border-color 180ms ease,transform 180ms ease
}

/* Featured diagram animation states - hidden until JS activates */
html:not(.insights-motion-ready) .iv-diagram-node,
html:not(.insights-motion-ready) .iv-diagram-arrow,
html:not(.insights-motion-ready) .iv-diagram-tags span {
  opacity:1;
  transform:none
}

/* Animation hidden states - applied only when JS adds insights-motion-ready */
.iv-featured-diagram.iv-animate .iv-diagram-node {
  opacity:0;
  transform:translateY(6px) scale(.985);
  transition:opacity 280ms ease,transform 280ms cubic-bezier(.22,1,.36,1),background 220ms ease,border-color 220ms ease,box-shadow 220ms ease
}
.iv-featured-diagram.iv-animate .iv-diagram-arrow {
  opacity:0;
  transform:scaleY(0);
  transform-origin:top center;
  transition:opacity 140ms ease,transform 140ms ease
}
.iv-featured-diagram.iv-animate .iv-diagram-tags span {
  opacity:0;
  transform:translateY(4px);
  transition:opacity 220ms ease,transform 220ms ease,background 180ms ease,border-color 180ms ease
}

/* Animated visible states */
.iv-featured-diagram.iv-animate.iv-visible .iv-diagram-node {
  opacity:1;
  transform:translateY(0) scale(1)
}
.iv-featured-diagram.iv-animate.iv-visible .iv-diagram-arrow {
  opacity:1;
  transform:scaleY(1)
}
.iv-featured-diagram.iv-animate.iv-visible .iv-diagram-tags span {
  opacity:1;
  transform:translateY(0)
}

/* Node hover states */
.iv-diagram-node:hover {
  transform:translateY(-2px);
  border-color:var(--blue);
  background:#f4faff;
  box-shadow:0 10px 24px rgba(6,16,79,.1)
}
.iv-diagram-node:hover span {
  color:var(--blue)
}

/* Working Outcome hover */
.iv-dn-4:hover {
  transform:translateY(-2px);
  background:linear-gradient(135deg,var(--royal),#0a5ce0);
  box-shadow:0 12px 28px rgba(18,77,216,.25)
}

/* Chip hover */
.iv-diagram-tags span:hover {
  background:#eef5ff;
  border-color:var(--blue);
  transform:translateY(-1px)
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .iv-featured-diagram.iv-animate .iv-diagram-node,
  .iv-featured-diagram.iv-animate .iv-diagram-arrow,
  .iv-featured-diagram.iv-animate .iv-diagram-tags span,
  .iv-featured-diagram.iv-animate.iv-visible .iv-diagram-node,
  .iv-featured-diagram.iv-animate.iv-visible .iv-diagram-arrow,
  .iv-featured-diagram.iv-animate.iv-visible .iv-diagram-tags span{
    transition:none;
    opacity:1;
    transform:none
  }
}
.iv-featured-info{
  padding:8px 0
}
.iv-sample-label{
  display:inline-block;
  padding:4px 10px;
  background:#eef5ff;
  border:1px solid #dbe9fa;
  border-radius:5px;
  font:700 .58rem Manrope;
  color:var(--royal);
  letter-spacing:.14em;
  margin-bottom:14px
}
.iv-featured-category{
  font:700 .65rem Manrope;
  color:var(--blue);
  letter-spacing:.12em;
  margin-bottom:14px
}
.iv-featured-info h3{
  font-size:1.55rem;
  letter-spacing:-.03em;
  color:var(--navy);
  margin-bottom:16px;
  line-height:1.2
}
.iv-featured-summary{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
  margin-bottom:20px
}
.iv-featured-meta{
  display:flex;
  gap:16px;
  margin-bottom:26px
}
.iv-featured-meta span{
  font:600 .65rem Manrope;
  color:var(--muted);
  letter-spacing:.06em
}

/* ---- LATEST INSIGHTS / FILTERS ---- */
.iv-latest{
  background:#fff
}
.iv-filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:48px;
  justify-content:center
}
.iv-filter-btn{
  padding:10px 18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font:700 .72rem Manrope;
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .2s,color .2s,background-color .2s
}
.iv-filter-btn:hover{
  border-color:var(--blue);
  color:var(--blue);
  background:#f4faff
}
.iv-filter-btn.active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff
}
.iv-articles-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.iv-article-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:transform .25s,border-color .25s,box-shadow .25s,opacity .25s;
  display:flex;
  flex-direction:column
}
.iv-article-card.hidden{
  display:none
}
.iv-article-card:hover{
  transform:translateY(-4px);
  border-color:var(--blue);
  box-shadow:0 14px 32px rgba(6,16,79,.09)
}
.iv-article-visual{
  height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden
}
.iv-article-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px
}
.iv-visual-design{background:linear-gradient(145deg,#eef5ff,#f4f8fd)}
.iv-visual-development{background:linear-gradient(145deg,#f0f4ff,#e8eeff)}
.iv-visual-mobile{background:linear-gradient(145deg,#f3f0ff,#eae6ff)}
.iv-visual-marketing{background:linear-gradient(145deg,#f0fff4,#e4f7ed)}
.iv-visual-social{background:linear-gradient(145deg,#fff5f0,#ffede5)}
.iv-visual-ai{background:linear-gradient(145deg,#f0f8ff,#e4f2ff)}
.iv-visual-technology{background:linear-gradient(145deg,#f5f5f5,#ebebeb)}
.iv-visual-business{background:linear-gradient(145deg,#f0f4ff,#e4eaff)}
.iv-visual-strategy{background:linear-gradient(145deg,#fff8f0,#fff0e4)}
.iv-article-icon{
  font-size:2.2rem;
  color:var(--royal);
  opacity:.5;
  z-index:1
}
.iv-article-info{
  padding:22px;
  flex:1;
  display:flex;
  flex-direction:column
}
.iv-article-category{
  font:700 .6rem Manrope;
  color:var(--blue);
  letter-spacing:.14em;
  margin-bottom:10px
}
.iv-article-info h3{
  font-size:.95rem;
  letter-spacing:-.01em;
  color:var(--navy);
  margin-bottom:10px;
  line-height:1.35
}
.iv-article-info p{
  font-size:.78rem;
  color:var(--muted);
  line-height:1.55;
  margin:0;
  flex:1
}
.iv-article-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line)
}
.iv-article-meta span{
  font:600 .62rem Manrope;
  color:var(--muted)
}
.iv-article-link{
  font:700 .68rem Manrope;
  color:var(--blue);
  display:flex;
  align-items:center;
  gap:6px;
  transition:gap .2s
}
.iv-article-link span{transition:transform .2s}
.iv-article-link:hover span{transform:translateX(3px)}
.iv-empty-state{
  text-align:center;
  padding:60px 20px
}
.iv-empty-state p{
  color:var(--muted);
  font-size:1rem;
  margin-bottom:20px
}

/* ---- GUIDES ---- */
.iv-guides{
  background:var(--soft)
}
.iv-guides-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.iv-guide-card{
  padding:36px 28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  transition:transform .25s,border-color .25s,box-shadow .25s;
  display:flex;
  flex-direction:column
}
.iv-guide-card:hover{
  transform:translateY(-3px);
  border-color:var(--blue);
  box-shadow:0 12px 30px rgba(6,16,79,.08)
}
.iv-guide-num{
  font:800 2.2rem Manrope;
  color:var(--line);
  margin-bottom:8px;
  line-height:1
}
.iv-guide-topic{
  font:700 .62rem Manrope;
  color:var(--blue);
  letter-spacing:.14em;
  margin-bottom:14px
}
.iv-guide-card h3{
  font-size:1.05rem;
  letter-spacing:-.02em;
  color:var(--navy);
  margin-bottom:14px;
  line-height:1.3
}
.iv-guide-summary{
  font-size:.8rem;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:20px;
  flex:1
}
.iv-guide-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:16px;
  border-top:1px solid var(--line)
}
.iv-guide-meta span{
  font:600 .62rem Manrope;
  color:var(--muted)
}
.iv-guide-meta a{
  font:700 .68rem Manrope;
  color:var(--blue);
  display:flex;
  align-items:center;
  gap:6px;
  transition:gap .2s
}
.iv-guide-meta a span{transition:transform .2s}
.iv-guide-meta a:hover span{transform:translateX(3px)}
.iv-guide-diagram{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line)
}
.iv-guide-step{
  padding:6px 10px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:5px
}
.iv-guide-step span{
  font:700 .58rem Manrope;
  color:var(--navy)
}
.iv-guide-conn{
  font:.8rem Manrope;
  color:var(--blue)
}

/* ---- AI SPOTLIGHT ---- */
.iv-ai{
  background:var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden
}
.iv-ai-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center
}
.iv-ai-copy .eyebrow-light{color:#55c8fa}
.iv-ai-intro{
  color:#9faed0;
  font-size:.95rem;
  line-height:1.65;
  margin:0 0 36px;
  max-width:500px
}
.iv-ai-blocks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.iv-ai-block{
  padding:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  transition:border-color .22s,background .22s
}
.iv-ai-block:hover{
  border-color:rgba(19,184,244,.4);
  background:rgba(255,255,255,.07)
}
.iv-ai-block-icon{
  font-size:1.3rem;
  color:#55c8fa;
  margin-bottom:10px;
  display:block
}
.iv-ai-block b{
  font:700 .78rem Manrope;
  color:#fff;
  margin-bottom:6px;
  display:block
}
.iv-ai-block p{
  font-size:.72rem;
  color:#9faed0;
  margin:0;
  line-height:1.5
}
.iv-ai-visual{
  position:relative;
  min-height:420px;
  background:linear-gradient(145deg,rgba(7,27,88,.6),rgba(18,77,216,.15));
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:opacity 280ms ease,transform 280ms ease
}
.iv-ai-flow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%
}
.iv-ai-node{
  padding:12px 20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  text-align:center;
  width:180px;
  transition:transform 220ms ease,background 220ms ease,border-color 220ms ease,box-shadow 220ms ease
}
.iv-ai-node span{
  font:700 .65rem Manrope;
  color:#b8caed;
  letter-spacing:.06em;
  line-height:1.4;
  transition:color 180ms ease
}
.iv-ai-n3{
  background:linear-gradient(135deg,rgba(18,77,216,.4),rgba(19,184,244,.2));
  border-color:rgba(19,184,244,.3)
}
.iv-ai-n5{
  background:linear-gradient(135deg,var(--royal),var(--blue));
  border-color:transparent
}
.iv-ai-n5 span{color:#fff}
.iv-ai-arrow{
  font-size:.9rem;
  color:var(--cyan);
  opacity:.6;
  transition:transform 130ms ease,opacity 130ms ease;
  transform-origin:top center
}
.iv-ai-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:24px
}
.iv-ai-chips span{
  padding:5px 12px;
  background:rgba(19,184,244,.12);
  border:1px solid rgba(19,184,244,.25);
  border-radius:5px;
  font:600 .6rem Manrope;
  color:#55c8fa;
  letter-spacing:.06em;
  transition:background 180ms ease,border-color 180ms ease,transform 180ms ease,box-shadow 180ms ease
}
.iv-ai-chips span:hover{
  background:rgba(19,184,244,.22);
  border-color:rgba(19,184,244,.45);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(19,184,244,.15)
}

/* AI flow animation states - hidden until JS activates */
html:not(.insights-motion-ready) .iv-ai-visual,
html:not(.insights-motion-ready) .iv-ai-node,
html:not(.insights-motion-ready) .iv-ai-arrow,
html:not(.insights-motion-ready) .iv-ai-chips span {
  opacity:1;
  transform:none
}

/* Animation hidden states */
.iv-ai-visual.iv-animate {
  opacity:0;
  transform:translateY(6px)
}
.iv-ai-visual.iv-animate.iv-visible {
  opacity:1;
  transform:translateY(0)
}
.iv-ai-flow.iv-animate .iv-ai-node {
  opacity:0;
  transform:translateY(7px) scale(.985);
  transition:opacity 260ms ease,transform 260ms cubic-bezier(.22,1,.36,1),background 220ms ease,border-color 220ms ease,box-shadow 220ms ease
}
.iv-ai-flow.iv-animate .iv-ai-arrow {
  opacity:0;
  transform:scaleY(0);
  transform-origin:top center;
  transition:opacity 130ms ease,transform 130ms ease
}
.iv-ai-flow.iv-animate .iv-ai-chips span {
  opacity:0;
  transform:translateY(4px);
  transition:opacity 200ms ease,transform 200ms ease,background 180ms ease,border-color 180ms ease
}

/* Animated visible states */
.iv-ai-flow.iv-animate.iv-visible .iv-ai-node {
  opacity:1;
  transform:translateY(0) scale(1)
}
.iv-ai-flow.iv-animate.iv-visible .iv-ai-arrow {
  opacity:.6;
  transform:scaleY(1)
}
.iv-ai-flow.iv-animate.iv-visible .iv-ai-chips span {
  opacity:1;
  transform:translateY(0)
}

/* Node hover states */
.iv-ai-node:hover {
  transform:translateY(-2px);
  background:rgba(255,255,255,.1);
  border-color:rgba(19,184,244,.35);
  box-shadow:0 8px 20px rgba(6,16,79,.2)
}
.iv-ai-node:hover span {
  color:#d0e0ff
}

/* AI Capability hover - brighten blue */
.iv-ai-n3:hover {
  background:linear-gradient(135deg,rgba(18,77,216,.5),rgba(19,184,244,.3));
  box-shadow:0 10px 25px rgba(18,77,216,.3)
}

/* Outcome hover */
.iv-ai-n5:hover {
  background:linear-gradient(135deg,var(--royal),#0a5ce0);
  box-shadow:0 12px 28px rgba(18,77,216,.35)
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .iv-ai-visual.iv-animate,
  .iv-ai-flow.iv-animate .iv-ai-node,
  .iv-ai-flow.iv-animate .iv-ai-arrow,
  .iv-ai-flow.iv-animate .iv-ai-chips span,
  .iv-ai-visual.iv-animate.iv-visible,
  .iv-ai-flow.iv-animate.iv-visible .iv-ai-node,
  .iv-ai-flow.iv-animate.iv-visible .iv-ai-arrow,
  .iv-ai-flow.iv-animate.iv-visible .iv-ai-chips span {
    transition:none;
    opacity:1;
    transform:none
  }
}

/* ---- GROWTH ---- */
.iv-growth{
  background:#fff
}
.iv-growth-intro{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.65;
  max-width:600px;
  margin:0 auto;
  text-align:center
}
.iv-growth-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:50px 0 60px;
  flex-wrap:wrap
}
.iv-growth-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:24px 20px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:12px;
  min-width:150px;
  flex:1;
  max-width:200px;
  transition:transform 220ms ease,border-color 220ms ease,background 220ms ease,box-shadow 220ms ease
}
.iv-growth-icon{
  font-size:1.4rem;
  color:var(--royal);
  margin-bottom:12px;
  transition:color 180ms ease,transform 220ms ease
}
.iv-growth-stage b{
  font:700 .75rem Manrope;
  color:var(--navy);
  margin-bottom:6px;
  display:block
}
.iv-growth-stage p{
  font-size:.68rem;
  color:var(--muted);
  margin:0
}
.iv-growth-conn{
  font-size:1.2rem;
  color:var(--blue);
  transition:opacity 180ms ease,transform 180ms ease;
  display:flex;
  align-items:center
}

/* Growth flow animation states */
.iv-growth-flow.iv-animate .iv-growth-stage {
  opacity:0;
  transform:translateY(7px) scale(.985);
  transition:opacity 270ms ease,transform 270ms cubic-bezier(.22,1,.36,1),border-color 220ms ease,background 220ms ease,box-shadow 220ms ease
}
.iv-growth-flow.iv-animate .iv-growth-conn {
  opacity:0;
  transform:scaleX(0);
  transform-origin:left center;
  transition:opacity 130ms ease,transform 130ms ease
}

/* Visible states */
.iv-growth-flow.iv-animate.iv-visible .iv-growth-stage {
  opacity:1;
  transform:translateY(0) scale(1)
}
.iv-growth-flow.iv-animate.iv-visible .iv-growth-conn {
  opacity:1;
  transform:scaleX(1)
}

/* Card hover states */
.iv-growth-stage:hover {
  transform:translateY(-3px);
  border-color:var(--blue);
  background:#f0f6ff;
  box-shadow:0 10px 25px rgba(6,16,79,.08)
}
.iv-growth-stage:hover .iv-growth-icon {
  color:var(--blue);
  transform:scale(1.1)
}
.iv-growth-stage:hover b {
  color:var(--navy)
}

/* Measurement final emphasis */
.iv-growth-flow.iv-animate.iv-visible .iv-growth-stage:last-child {
  animation:growth-final-emphasis 200ms ease forwards
}
@keyframes growth-final-emphasis {
  0%{transform:scale(1)}
  50%{transform:scale(1.02);border-color:rgba(18,77,216,.3)}
  100%{transform:scale(1)}
}

/* JS-disabled safety */
html:not(.insights-motion-ready) .iv-growth-stage,
html:not(.insights-motion-ready) .iv-growth-conn {
  opacity:1;
  transform:none
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .iv-growth-flow.iv-animate .iv-growth-stage,
  .iv-growth-flow.iv-animate .iv-growth-conn,
  .iv-growth-flow.iv-animate.iv-visible .iv-growth-stage,
  .iv-growth-flow.iv-animate.iv-visible .iv-growth-conn {
    transition:none;
    opacity:1;
    transform:none
  }
  .iv-growth-flow.iv-animate.iv-visible .iv-growth-stage:last-child {
    animation:none
  }
}
.iv-growth-perspectives{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.iv-perspective-card{
  padding:32px 26px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:14px;
  transition:transform .25s,border-color .25s,box-shadow .25s
}
.iv-perspective-card:hover{
  transform:translateY(-3px);
  border-color:var(--blue);
  box-shadow:0 10px 26px rgba(6,16,79,.07)
}
.iv-perspective-num{
  font:800 1.8rem Manrope;
  color:var(--line);
  margin-bottom:12px;
  display:block;
  line-height:1
}
.iv-perspective-card h3{
  font-size:.92rem;
  letter-spacing:-.01em;
  color:var(--navy);
  margin-bottom:12px;
  line-height:1.35
}
.iv-perspective-card p{
  font-size:.78rem;
  color:var(--muted);
  line-height:1.6;
  margin:0
}

/* ---- TOPICS ---- */
.iv-topics{
  background:var(--soft)
}
.iv-topics-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center
}
.iv-topic-chip{
  padding:10px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  font:600 .72rem Manrope;
  color:var(--muted);
  transition:border-color .2s,color .2s,background .2s,transform .2s
}
.iv-topic-chip:hover{
  border-color:var(--blue);
  color:var(--blue);
  background:#f4faff;
  transform:translateY(-2px)
}

/* ---- NEWSLETTER ---- */
.iv-newsletter{
  background:#fff
}
.iv-newsletter-box{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:50px;
  align-items:center;
  padding:50px;
  background:linear-gradient(145deg,#f4f8fd,#eef5ff);
  border:1px solid var(--line);
  border-radius:20px
}
.iv-newsletter-copy h2{
  font-size:clamp(1.6rem,2.5vw,2.2rem);
  letter-spacing:-.04em;
  margin-bottom:12px
}
.iv-newsletter-copy p{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.6;
  margin:0
}
.iv-newsletter-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:300px
}
.iv-newsletter-field{
  position:relative
}
.iv-newsletter-field input{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:8px;
  font:.86rem Inter;
  color:var(--navy);
  background:#fff;
  transition:border-color .2s
}
.iv-newsletter-field input:focus{
  outline:none;
  border-color:var(--blue)
}
.iv-newsletter-field input::placeholder{color:#aab4c4}
.iv-field-error{
  position:absolute;
  bottom:-18px;
  left:0;
  font-size:.65rem;
  color:#e53e3e
}
.iv-newsletter-privacy{
  font-size:.68rem;
  color:var(--muted);
  margin-top:8px;
  text-align:center
}

/* ---- CAPABILITIES ---- */
.iv-capabilities{
  background:var(--soft)
}
.iv-cap-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.iv-cap-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:20px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .22s,background .22s,transform .22s;
  position:relative
}
.iv-cap-card:hover{
  border-color:var(--blue);
  background:#f4faff;
  transform:translateY(-2px)
}
.iv-cap-card:hover span:last-child{
  transform:translateX(3px);
  color:var(--blue)
}
.iv-cap-icon{
  font-size:1.3rem;
  color:var(--royal)
}
.iv-cap-card b{
  font:700 .78rem Manrope;
  color:var(--navy);
  flex:1
}
.iv-cap-card span:last-child{
  font-size:.85rem;
  color:var(--royal);
  transition:transform .22s,color .22s
}

/* ---- CTA ---- */
.iv-cta{
  background:var(--navy);
  color:#fff;
  text-align:center
}
.iv-cta-inner{
  max-width:700px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}
.iv-cta .eyebrow-light{
  color:#55c8fa;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  margin-inline:auto;
  margin-bottom:16px
}
.iv-cta h2{
  font-size:clamp(2rem,3.5vw,3.2rem);
  letter-spacing:-.04em;
  margin-bottom:18px;
  text-align:center
}
.iv-cta-inner > p{
  color:#9faed0;
  font-size:.98rem;
  line-height:1.65;
  margin-bottom:32px;
  text-align:center;
  max-width:560px
}
.iv-cta .button-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap
}
.btn-secondary-light{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.3)
}
.btn-secondary-light:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.5)
}

/* ---- ARTICLE MODAL ---- */
.iv-article-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center
}
.iv-article-modal[hidden]{display:none}
.iv-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(6,16,79,.6);
  backdrop-filter:blur(4px)
}
.iv-modal-dialog{
  position:relative;
  z-index:1;
  width:min(720px,calc(100vw - 40px));
  max-height:calc(100vh - 60px);
  overflow-y:auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 25px 60px rgba(6,16,79,.2)
}
.iv-modal-close{
  position:absolute;
  top:20px;
  right:20px;
  width:36px;
  height:36px;
  border:0;
  background:var(--soft);
  border-radius:50%;
  font:1.4rem Inter;
  color:var(--muted);
  cursor:pointer;
  transition:background .2s,color .2s
}
.iv-modal-close:hover{
  background:var(--navy);
  color:#fff
}
.iv-modal-content{
  padding:48px 48px 56px
}
.iv-modal-content .iv-article-category{
  margin-bottom:16px
}
.iv-modal-content h2{
  font-size:1.65rem;
  letter-spacing:-.03em;
  color:var(--navy);
  margin-bottom:18px;
  line-height:1.2
}
.iv-modal-summary{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.65;
  margin-bottom:32px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line)
}
.iv-modal-section{
  margin-bottom:28px
}
.iv-modal-section h3{
  font-size:1rem;
  color:var(--navy);
  margin-bottom:12px
}
.iv-modal-section p{
  font-size:.86rem;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:12px
}
.iv-modal-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:28px
}
.iv-modal-tags span{
  padding:5px 12px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:5px;
  font:600 .62rem Manrope;
  color:var(--muted)
}

/* ---- RESPONSIVE ---- */
@media(max-width:1100px){
  .iv-hero-grid{grid-template-columns:1fr;gap:50px}
  .iv-hero-visual{height:auto;min-height:380px;padding:20px 0}
  .iv-cat-grid{grid-template-columns:repeat(4,1fr)}
  .iv-featured-card{grid-template-columns:1fr;gap:40px}
  .iv-articles-grid{grid-template-columns:repeat(2,1fr)}
  .iv-guides-grid{grid-template-columns:repeat(2,1fr)}
  .iv-ai-grid{grid-template-columns:1fr;gap:50px}
  .iv-ai-visual{min-height:360px}
  .iv-cap-grid{grid-template-columns:repeat(3,1fr)}
  .iv-newsletter-box{grid-template-columns:1fr;gap:30px;text-align:center}
  .iv-newsletter-form{min-width:0}
}
@media(max-width:900px){
  .iv-cat-grid{grid-template-columns:repeat(3,1fr)}
  .iv-growth-flow{gap:10px}
  .iv-growth-stage{min-width:130px}
  .iv-growth-perspectives{grid-template-columns:1fr}
}
@media(max-width:768px){
  .iv-hero{padding:70px 0 60px}
  .iv-hero-visual{min-height:320px;padding:15px 0}
  .iv-hero-heading{font-size:clamp(2rem,8vw,3.2rem)}
  .iv-cat-grid{grid-template-columns:repeat(2,1fr)}
  .iv-articles-grid{grid-template-columns:1fr}
  .iv-guides-grid{grid-template-columns:1fr}
  .iv-growth-flow{flex-direction:column}
  .iv-growth-conn{transform:rotate(90deg)}
  .iv-growth-stage{max-width:280px;width:100%}
  .iv-cap-grid{grid-template-columns:repeat(2,1fr)}
  .iv-filter-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .iv-filter-bar::-webkit-scrollbar{display:none}
  .iv-filter-btn{white-space:nowrap;flex:0 0 auto}
  .iv-modal-content{padding:36px 28px 44px}
  .iv-newsletter-box{padding:36px 28px}
  .iv-cta .button-row{gap:14px}
}
@media(max-width:560px){
  .iv-hero-visual{min-height:280px}
  .iv-cat-grid{grid-template-columns:1fr}
  .iv-article-card{flex-direction:column}
  .iv-article-visual{height:120px}
  .iv-cap-grid{grid-template-columns:1fr}
  .iv-newsletter-box{padding:28px 20px}
  .iv-newsletter-form button{width:100%}
  .iv-cta .button-row{flex-direction:column;align-items:center;gap:12px}
  .iv-cta .button-row .btn{min-width:200px}
}

/* ---- REDUCED MOTION ---- */
@media(prefers-reduced-motion:reduce){
  .iv-animate,.iv-reveal,.iv-cat-card,.iv-article-card,.iv-guide-card,.iv-perspective-card,.iv-cap-card,.iv-topic-chip,.iv-ai-block,.iv-ai-chips span,.iv-engine-node,.iv-center-inner,.iv-output-chip{
    transition:none;
    opacity:1;
    transform:none
  }
}

/* ===== CMS Insight Images (added for Grav migration) ===== */
.iv-article-visual .iv-article-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  z-index:1
}
.iv-article-visual .iv-article-img + .iv-article-icon{display:none}
.iv-featured-visual .iv-featured-img{
  width:100%;
  height:100%;
  min-height:340px;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:12px
}

/* ------------------------------------------------------------------
   Responsive overflow fix (production prep): at very small phone widths the
   scrollable filter bar's flex items and the guide cards slightly exceeded the
   viewport, causing a few px of horizontal page overflow. Cap both to the
   container width so the filter bar scrolls internally and cards never push the
   page wider. No visual redesign. */
@media (max-width: 430px) {
  .iv-filter-bar {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .iv-filter-bar::-webkit-scrollbar { display: none; }
  .iv-guides-grid,
  .iv-guide-card {
    max-width: 100%;
    min-width: 0;
  }
  .iv-guide-card { overflow-wrap: anywhere; }
}