:root {
   --bg: #FFFFFF;
   --surface: #FFFFFF;
   --surface-alt: #F6F8FB;
   --ink: #10151F;
   --ink-soft: #5A6472;
   --ink-faint: #9AA3AF;
   --accent: #1CCCA0;
   --accent-dark: #0EA57F;
   --accent-light: #E4F9F2;
   --border: #E5E8EE;
   --grad-purple: #B9A6F2;
   --grad-orange: #FFB37A;
   --grad-wash:
     radial-gradient(circle at 8% 12%, rgba(185, 166, 242, 0.16), transparent 42%),
     radial-gradient(circle at 92% 8%, rgba(255, 179, 122, 0.16), transparent 40%),
     radial-gradient(circle at 85% 92%, rgba(185, 166, 242, 0.12), transparent 42%),
     radial-gradient(circle at 6% 88%, rgba(255, 179, 122, 0.10), transparent 40%);
   --radius-sm: 10px;
   --radius-md: 16px;
   --radius-lg: 24px;
   --shadow: 0 1px 2px rgba(16, 21, 31, 0.04);
   --maxw: 1160px;
 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
   background: #FFFFFF;
   color-scheme: light;
 }

 body {
   background: #FFFFFF;
   color: var(--ink, #10151F);
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   min-height: 100vh;
 }

 section {
   background: #FFFFFF;
 }

 a {
   color: inherit;
   text-decoration: none;
 }

 img {
   max-width: 100%;
   display: block;
 }

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

 h1,
 h2,
 h3,
 h4 {
   font-family: 'Inter', sans-serif;
   color: var(--ink);
   font-weight: 700;
   letter-spacing: -0.01em;
 }

 .mono {
   font-family: 'Inter', sans-serif;
 }

 .accent-text {
   color: var(--accent-dark);
 }

 /* ---------- Hero ---------- */
 .hero {
   padding: 76px 0 40px;
   text-align: center;
   background: var(--grad-wash), #FFFFFF;
   position: relative;
 }

 .eyebrow-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--surface);
   border: 1px solid var(--border);
   padding: 7px 16px;
   border-radius: 999px;
   font-size: 13px;
   color: var(--ink-soft);
   box-shadow: var(--shadow);
   margin-bottom: 26px;
 }

 .eyebrow-pill .dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--accent);
 }

 .hero h1 {
   font-size: 56px;
   line-height: 1.06;
   max-width: 820px;
   margin: 0 auto 22px;
 }

 .hero p.lede {
   font-size: 18.5px;
   color: var(--ink-soft);
   max-width: 640px;
   margin: 0 auto 34px;
 }

 .hero-actions {
   display: flex;
   gap: 14px;
   justify-content: center;
   margin-bottom: 16px;
   flex-wrap: wrap;
 }

 .hero-actions .btn {
   padding: 14px 26px;
   font-size: 15.5px;
 }

 .hero-meta {
   display: flex;
   gap: 22px;
   justify-content: center;
   font-size: 13.5px;
   color: var(--ink-faint);
   margin-bottom: 52px;
 }

 .hero-meta span {
   display: flex;
   align-items: center;
   gap: 6px;
 }

 /* connector strip */
 .connector-strip {
   overflow: hidden;
   padding: 20px 0;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   background: var(--surface);
 }

 .connector-track {
   display: flex;
   gap: 44px;
   width: max-content;
   animation: scroll-left 28s linear infinite;
   align-items: center;
 }

 .cx-fallback {
   display: flex;
   align-items: center;
   gap: 9px;
   white-space: nowrap;
 }

 .cx-fallback img {
   height: 20px;
   width: auto;
   opacity: 0.7;
 }

 .cx-fallback span {
   font-size: 13.5px;
   color: var(--ink-soft);
   font-weight: 500;
 }

 @keyframes scroll-left {
   from {
     transform: translateX(0);
   }

   to {
     transform: translateX(-50%);
   }
 }

 /* hero dashboard visual */
 .hero-visual {
   margin: 56px auto 0;
   max-width: 980px;
   position: relative;
 }

 .hero-visual::before {
   content: '';
   position: absolute;
   z-index: -1;
   inset: -40px;
   background:
     radial-gradient(circle at 20% 30%, rgba(185, 166, 242, 0.22), transparent 55%),
     radial-gradient(circle at 80% 70%, rgba(255, 179, 122, 0.22), transparent 55%);
   filter: blur(20px);
 }

 .board-frame {
   background: var(--surface-alt);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 14px;
   box-shadow: 0 30px 60px -20px rgba(18, 49, 60, 0.12);
   position: relative;
 }

 .board-inner {
   background: var(--surface);
   border-radius: 14px;
   padding: 22px 24px 26px;
   text-align: left;
 }

 .board-topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 18px;
 }

 .board-topbar .dots {
   display: flex;
   gap: 6px;
 }

 .board-topbar .dots span {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--border);
 }

 .board-topbar .label {
   font-size: 12.5px;
   color: var(--ink-faint);
   font-family: 'Inter', sans-serif;
 }

 .card-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 12px;
 }

 .metric-card {
   background: var(--surface-alt);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 14px 12px;
 }

 .metric-card .lbl {
   font-size: 11.5px;
   color: var(--ink-soft);
   margin-bottom: 8px;
 }

 .metric-card .val {
   font-family: 'Inter', sans-serif;
   font-size: 19px;
   font-weight: 600;
   color: var(--ink);
 }

 .metric-card .delta {
   font-size: 11.5px;
   margin-top: 4px;
   font-family: 'Inter', sans-serif;
 }

 .delta.up {
   color: var(--accent-dark);
 }

 .delta.down {
   color: #C2543A;
 }

 section {
   padding: 80px 0;
 }

 .section-head {
   max-width: 640px;
   margin: 0 auto 48px;
   text-align: center;
 }

 .section-head .kicker {
   font-size: 14px;
   color: var(--accent-dark);
   font-weight: 600;
   margin-bottom: 10px;
 }

 .section-head h2 {
   font-size: 38px;
   line-height: 1.16;
 }

 .section-head p {
   color: var(--ink-soft);
   font-size: 16.5px;
   margin-top: 14px;
 }

 /* ---------- Problem / comparison ---------- */
 .compare {
   background: var(--grad-wash), var(--surface-alt);
 }

 .compare-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px;
 }

 .compare-col {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 32px;
 }

 .compare-col.old {
   opacity: 0.85;
 }

 .compare-col.new {
   border-color: var(--accent);
   box-shadow: 0 0 0 1px var(--accent) inset;
 }

 .compare-col h4 {
   font-size: 13px;
   text-transform: none;
   color: var(--ink-faint);
   font-weight: 600;
   margin-bottom: 6px;
 }

 .compare-col h3 {
   font-size: 21px;
   margin-bottom: 20px;
 }

 .compare-col ul {
   list-style: none;
 }

 .compare-col li {
   display: flex;
   gap: 10px;
   padding: 11px 0;
   border-top: 1px solid var(--border);
   font-size: 15px;
   color: var(--ink-soft);
 }

 .compare-col li:first-of-type {
   border-top: none;
 }

 .compare-col.new li {
   color: var(--ink);
 }

 .mark {
   flex-shrink: 0;
   width: 18px;
   height: 18px;
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   margin-top: 1px;
 }

 .mark.x {
   background: #FBEAE5;
   color: #C2543A;
 }

 .mark.check {
   background: var(--accent-light);
   color: var(--accent-dark);
 }

 /* ---------- Product layers (alternating) ---------- */
 .layer-row {
   display: grid;
   grid-template-columns: 0.85fr 1.15fr;
   gap: 60px;
   align-items: center;
   padding: 56px 0;
   border-top: 1px solid var(--border);
 }

 .layer-row:first-of-type {
   border-top: none;
 }

 .layer-row.reverse {
   grid-template-columns: 1.15fr 0.85fr;
 }

 .layer-row.reverse .layer-visual {
   order: 2;
 }

 .layer-num {
   font-family: 'Inter', sans-serif;
   color: var(--accent-dark);
   font-size: 14px;
   margin-bottom: 14px;
 }

 .layer-icon {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: var(--accent-light);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
 }

 .layer-icon svg {
   width: 22px;
   height: 22px;
   stroke: var(--accent-dark);
 }

 /* ---------- Clarity / problem section ---------- */
 .clarity-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
 }

 .clarity-col {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 26px;
 }

 .clarity-col h4 {
   font-size: 15px;
   margin-bottom: 18px;
   color: var(--ink);
   font-weight: 600;
 }

 .tag-row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }

 .tag-chip {
   font-size: 12.5px;
   padding: 6px 12px;
   border-radius: 999px;
   background: var(--surface-alt);
   border: 1px solid var(--border);
   color: var(--ink-soft);
 }

 .mismatch-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 11px 0;
   border-top: 1px solid var(--border);
   font-size: 13.5px;
   color: var(--ink);
 }

 .mismatch-row:first-of-type {
   border-top: none;
 }

 .mismatch-row .mv {
   font-weight: 700;
   font-family: 'Inter', sans-serif;
 }

 .mismatch-flag-inline {
   margin-top: 10px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: #FBEAE5;
   color: #C2543A;
   font-size: 11.5px;
   padding: 5px 10px;
   border-radius: 999px;
 }

 .stat-block {
   margin-bottom: 18px;
 }

 .stat-block:last-child {
   margin-bottom: 0;
 }

 .stat-block .num {
   font-size: 24px;
   font-weight: 700;
   color: var(--accent-dark);
   font-family: 'Inter', sans-serif;
 }

 .stat-block .lbl {
   font-size: 12.5px;
   color: var(--ink-faint);
   margin-top: 3px;
   line-height: 1.4;
 }

 /* ---------- What is Netsights narrative ---------- */
 .narrative {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 56px;
   align-items: center;
 }

 .narrative-visual {
   background: var(--grad-wash), var(--surface-alt);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 28px;
 }

 .stat-row {
   display: flex;
   gap: 28px;
   margin-top: 26px;
 }

 .stat-row .stat .num {
   font-family: 'Inter', sans-serif;
   font-size: 26px;
   font-weight: 700;
   color: var(--accent-dark);
 }

 .stat-row .stat .lbl {
   font-size: 12.5px;
   color: var(--ink-faint);
   margin-top: 2px;
 }

 .pipeline {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .pipeline-step {
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 12px 14px;
   font-size: 13.5px;
   color: var(--ink);
 }

 .pipeline-step .n {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: var(--accent);
   color: #fff;
   font-size: 11.5px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .pipeline-arrow {
   text-align: center;
   color: var(--ink-faint);
   font-size: 13px;
 }

 /* ---------- Onboarding steps ---------- */
 .onboard-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
 }

 .onboard-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 26px;
 }

 .onboard-card .step-icon {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: var(--accent-light);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
 }

 .onboard-card .step-icon svg {
   width: 20px;
   height: 20px;
   stroke: var(--accent-dark);
 }

 .onboard-card h4 {
   font-size: 17px;
   margin-bottom: 8px;
 }

 .onboard-card p {
   font-size: 14px;
   color: var(--ink-soft);
   margin-bottom: 14px;
 }

 .onboard-logos {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
 }

 .onboard-logos img {
   height: 18px;
   opacity: 0.8;
 }

 /* ---------- Industry solutions ---------- */
 .industry-scroll {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
 }

 .industry-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   overflow: hidden;
 }

 .industry-screen {
   background: var(--surface-alt);
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .industry-screen .mini-bar {
   height: 8px;
   width: 40%;
   background: var(--border);
   border-radius: 4px;
 }

 .industry-screen .mini-row {
   display: flex;
   justify-content: space-between;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 8px 10px;
 }

 .industry-screen .mini-row .mv {
   font-size: 13px;
   font-weight: 700;
   color: var(--ink);
 }

 .industry-screen .mini-row .ml {
   font-size: 10.5px;
   color: var(--ink-faint);
 }

 .industry-body {
   padding: 18px 18px 22px;
 }

 .industry-body h4 {
   font-size: 16px;
   margin-bottom: 8px;
 }

 .industry-body p {
   font-size: 13px;
   color: var(--ink-soft);
   line-height: 1.5;
 }

 .industry-icon {
   width: 34px;
   height: 34px;
   border-radius: 9px;
   background: var(--accent-light);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 12px;
 }

 .industry-icon svg {
   width: 18px;
   height: 18px;
   stroke: var(--accent-dark);
 }

 /* ---------- Phone mockup for Netifications ---------- */
 .phone-frame {
   width: 240px;
   margin: 0 auto;
   background: var(--ink);
   border-radius: 32px;
   padding: 8px;
   box-shadow: 0 20px 40px -20px rgba(16, 21, 31, 0.35);
 }

 .phone-notch {
   width: 60px;
   height: 6px;
   background: rgba(255, 255, 255, 0.25);
   border-radius: 4px;
   margin: 0 auto 8px;
 }

 .phone-screen {
   background: var(--surface);
   border-radius: 24px;
   padding: 14px 12px;
   min-height: 280px;
 }

 .phone-header {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 12px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--border);
 }

 .phone-header .avatar {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--accent);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 11px;
   font-weight: 700;
 }

 .phone-header .who {
   font-size: 12.5px;
   font-weight: 600;
   color: var(--ink);
 }

 .phone-header .status {
   font-size: 10px;
   color: var(--accent-dark);
 }

 .wa-bubble {
   background: #fff;
   border-radius: 8px;
   border-top-left-radius: 2px;
   padding: 9px 11px;
   font-size: 11.5px;
   color: #111;
   margin-bottom: 10px;
   max-width: 92%;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }

 .wa-bubble .wline {
   display: flex;
   justify-content: space-between;
   padding: 3px 0;
 }

 .wa-bubble .wname {
   color: var(--ink-faint);
 }

 .wa-bubble .wval {
   font-weight: 600;
 }

 /* ---------- Pricing tier icons ---------- */
 .price-icon {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: var(--accent-light);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 14px;
 }

 .price-icon svg {
   width: 18px;
   height: 18px;
   stroke: var(--accent-dark);
 }

 /* ---------- Get started screens (step rows) ---------- */
 .step-screen {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow);
   overflow: hidden;
 }

 .step-screen .screen-bar {
   display: flex;
   gap: 6px;
   padding: 12px 14px;
   border-bottom: 1px solid var(--border);
 }

 .step-screen .screen-bar span {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--border);
 }

 .step-screen-body {
   padding: 18px;
 }

 .connect-chip {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: var(--surface-alt);
   border-radius: 10px;
   padding: 10px 12px;
   margin-bottom: 10px;
 }

 .connect-chip .left {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13.5px;
   color: var(--ink);
 }

 .connect-chip img {
   height: 18px;
 }

 .connect-chip .figs {
   font-size: 12.5px;
   color: var(--ink-faint);
   font-family: 'Inter', sans-serif;
 }

 .mismatch-flag {
   margin-top: 8px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: #FBEAE5;
   color: #C2543A;
   font-size: 12px;
   padding: 5px 10px;
   border-radius: 999px;
 }

 .sync-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 11px 0;
   border-top: 1px solid var(--border);
 }

 .sync-row:first-child {
   border-top: none;
 }

 .sync-row .left {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13.5px;
   color: var(--ink);
 }

 .sync-row img {
   height: 18px;
 }

 .status-pill {
   font-size: 11px;
   padding: 3px 9px;
   border-radius: 999px;
   font-weight: 600;
 }

 .status-pill.good {
   background: var(--accent-light);
   color: var(--accent-dark);
 }

 .status-pill.watch {
   background: #FBEAE5;
   color: #C2543A;
 }

 .sync-row .figure {
   font-size: 13px;
   font-weight: 600;
   color: var(--ink);
   font-family: 'Inter', sans-serif;
 }

 .decide-card {
   background: var(--surface-alt);
   border-radius: 10px;
   padding: 14px 16px;
 }

 .decide-card .tag {
   font-size: 11.5px;
   color: var(--accent-dark);
   font-weight: 600;
   margin-bottom: 6px;
 }

 .decide-card h5 {
   font-size: 15px;
   margin-bottom: 6px;
 }

 .decide-card p {
   font-size: 12.5px;
   color: var(--ink-soft);
   margin-bottom: 10px;
 }

 .layer-text h3 {
   font-size: 28px;
   margin-bottom: 12px;
 }

 .layer-text p.desc {
   color: var(--ink-soft);
   font-size: 15.5px;
   margin-bottom: 20px;
 }

 .layer-text ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .layer-text li {
   display: flex;
   gap: 10px;
   font-size: 14.5px;
   color: var(--ink);
 }

 .layer-visual {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 20px;
   box-shadow: var(--shadow);
 }

 /* iSight chat mock */
 .chat-mock {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .chat-bubble {
   background: var(--surface-alt);
   border-radius: 12px;
   padding: 12px 14px;
   font-size: 13.5px;
   color: var(--ink-soft);
   max-width: 88%;
 }

 .chat-bubble.q {
   align-self: flex-end;
   background: var(--accent-light);
   color: var(--ink);
   border: 1px solid var(--accent);
 }

 .chat-bubble strong {
   color: var(--ink);
   font-weight: 600;
 }

 .chat-bubble.q strong {
   color: var(--ink);
 }

 .chip-row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 4px;
 }

 .chip {
   font-size: 12px;
   border: 1px solid var(--border);
   padding: 6px 11px;
   border-radius: 999px;
   color: var(--ink-soft);
 }

 /* WhatsApp brief visual */
 .brief-card {
   background: var(--surface-alt);
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 20px;
   color: var(--ink);
 }

 .brief-line {
   display: flex;
   justify-content: space-between;
   padding: 9px 0;
   border-top: 1px solid var(--border);
   font-size: 13.5px;
 }

 .brief-line:first-of-type {
   border-top: none;
 }

 .brief-line .name {
   color: var(--ink-soft);
 }

 .brief-line .num {
   font-family: 'Inter', sans-serif;
   color: var(--accent-dark);
 }

 /* ---------- Stage tabs ---------- */
 .stage-tabs {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-bottom: 40px;
   flex-wrap: wrap;
 }

 .stage-tab {
   padding: 10px 20px;
   border-radius: 999px;
   border: 1px solid var(--border);
   background: var(--surface);
   font-size: 14px;
   font-weight: 600;
   color: var(--ink-soft);
   cursor: pointer;
 }

 .stage-tab.active {
   background: var(--accent);
   color: #fff;
   border-color: var(--accent);
 }

 .stage-panel {
   display: none;
 }

 .stage-panel.active {
   display: block;
 }

 .stage-focus {
   text-align: center;
   max-width: 520px;
   margin: 0 auto 32px;
 }

 .stage-focus .tag {
   font-family: 'Inter', sans-serif;
   font-size: 12.5px;
   color: var(--accent-dark);
   margin-bottom: 8px;
 }

 .stage-focus p {
   color: var(--ink-soft);
   font-size: 15px;
 }

 .stage-cards {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
 }

 .stage-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 22px;
 }

 .stage-card .cat {
   font-size: 12px;
   color: var(--ink-faint);
   font-weight: 600;
   margin-bottom: 10px;
 }

 .stage-card h4 {
   font-size: 16.5px;
   margin-bottom: 8px;
 }

 .stage-card p {
   font-size: 13.5px;
   color: var(--ink-soft);
 }

 /* ---------- Connections logo grid ---------- */
 .conn-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 14px;
 }

 .conn-tile {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 22px 12px 16px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
 }

 .conn-tile img {
   height: 28px;
   width: auto;
   max-width: 80%;
 }

 .conn-tile span {
   font-size: 12.5px;
   color: var(--ink-soft);
   font-weight: 500;
 }

 .conn-tile.more {
   color: var(--ink-faint);
   font-size: 13px;
   justify-content: center;
 }

 .logo-fallback {
   width: 28px;
   height: 28px;
   border-radius: 8px;
   background: var(--accent-light);
   color: var(--accent-dark);
   font-weight: 700;
   font-size: 13px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* ---------- Pricing ---------- */
 .pricing-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
 }

 .price-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 32px 28px;
   position: relative;
 }

 .price-card.popular {
   border: 2px solid var(--accent);
   box-shadow: 0 12px 30px -18px rgba(28, 204, 160, 0.5);
 }

 .popular-badge {
   position: absolute;
   top: -13px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--accent);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   padding: 4px 14px;
   border-radius: 999px;
 }

 .price-card h4 {
   font-size: 14px;
   color: var(--ink-soft);
   font-weight: 600;
   margin-bottom: 12px;
 }

 .price-card .amount {
   font-family: 'Inter', sans-serif;
   font-size: 36px;
   font-weight: 600;
   color: var(--ink);
 }

 .price-card .per {
   font-size: 14px;
   color: var(--ink-faint);
   margin-left: 4px;
 }

 .price-card ul {
   list-style: none;
   margin: 24px 0 28px;
   display: flex;
   flex-direction: column;
   gap: 11px;
 }

 .price-card li {
   font-size: 14px;
   color: var(--ink-soft);
   display: flex;
   gap: 9px;
 }

 .price-card .btn {
   width: 100%;
 }

 /* ---------- FAQ ---------- */
 .faq-item {
   border-top: 1px solid var(--border);
   padding: 22px 0;
 }

 .faq-item:last-child {
   border-bottom: 1px solid var(--border);
 }

 .faq-q {
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   font-size: 16.5px;
   font-weight: 600;
   gap: 20px;
 }

 .faq-q .plus {
   font-family: 'Inter', sans-serif;
   color: var(--accent-dark);
   font-size: 20px;
   flex-shrink: 0;
   transition: transform 0.2s;
 }

 .faq-item.open .plus {
   transform: rotate(45deg);
 }

 .faq-a {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.25s ease;
 }

 .faq-a p {
   color: var(--ink-soft);
   font-size: 14.5px;
   padding-top: 14px;
   max-width: 760px;
 }

 /* ---------- Final CTA ---------- */
 .final-cta {
   background:
     radial-gradient(circle at 12% 15%, rgba(185, 166, 242, 0.30), transparent 45%),
     radial-gradient(circle at 88% 20%, rgba(255, 179, 122, 0.30), transparent 42%),
     radial-gradient(circle at 50% 100%, rgba(28, 204, 160, 0.10), transparent 50%),
     var(--accent-light);
   border: 1px solid var(--accent);
   border-radius: 28px;
   margin: 0 28px;
   padding: 64px 40px;
   text-align: center;
 }

 .final-cta h2 {
   color: var(--ink);
   font-size: 36px;
   margin-bottom: 14px;
 }

 .final-cta p {
   color: var(--ink-soft);
   max-width: 480px;
   margin: 0 auto 30px;
   font-size: 15.5px;
 }

 footer {
   padding: 60px 0 32px;
   border-top: 1px solid var(--border);
   margin-top: 20px;
 }

 .foot-grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr 1fr;
   gap: 32px;
   margin-bottom: 40px;
 }

 .foot-col h5 {
   font-size: 13px;
   color: var(--ink-faint);
   font-weight: 600;
   margin-bottom: 14px;
 }

 .foot-col ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .foot-col a {
   font-size: 14px;
   color: var(--ink-soft);
 }

 .foot-col a:hover {
   color: var(--ink);
 }

 .foot-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 24px;
   border-top: 1px solid var(--border);
   font-size: 13px;
   color: var(--ink-faint);
 }

 @media(max-width:900px) {
   .hero h1 {
     font-size: 38px;
   }

   nav.links {
     display: none;
   }

   .compare-grid,
   .stage-cards,
   .conn-grid,
   .pricing-grid,
   .foot-grid {
     grid-template-columns: 1fr 1fr;
   }

   .layer-row,
   .layer-row.reverse {
     grid-template-columns: 1fr;
     gap: 26px;
   }

   .layer-row.reverse .layer-visual {
     order: 0;
   }

   .card-grid {
     grid-template-columns: repeat(3, 1fr);
   }

   .narrative {
     grid-template-columns: 1fr;
     gap: 32px;
   }

   .onboard-grid {
     grid-template-columns: 1fr;
   }

   .stat-row {
     flex-wrap: wrap;
     row-gap: 16px;
   }

   .industry-scroll {
     grid-template-columns: repeat(2, 1fr);
   }

   .clarity-grid {
     grid-template-columns: 1fr;
   }
 }

 @media(max-width:520px) {

   .stage-cards,
   .conn-grid,
   .pricing-grid,
   .foot-grid,
   .compare-grid {
     grid-template-columns: 1fr;
   }

   .card-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .hero-meta {
     flex-direction: column;
     align-items: center;
     gap: 8px;
   }

   .stat-row {
     gap: 20px;
   }

   .pipeline-step {
     font-size: 13px;
     padding: 11px 12px;
   }

   .narrative-visual {
     padding: 18px;
   }

   .industry-scroll {
     grid-template-columns: 1fr;
   }
 }

 /* ---------- iSight page additions ---------- */
 .page-hero {
   padding: 80px 0 40px;
   text-align: center;
   background: var(--grad-wash), #FFFFFF;
 }

 .page-hero h1 {
   font-size: 48px;
   line-height: 1.1;
   max-width: 760px;
   margin: 0 auto 20px;
 }

 .page-hero p.lede {
   font-size: 17.5px;
   color: var(--ink-soft);
   max-width: 600px;
   margin: 0 auto 30px;
 }

 .problem-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px;
   margin-bottom: 28px;
 }

 .problem-col {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 28px;
 }

 .problem-col h4 {
   font-size: 14px;
   color: var(--ink-faint);
   font-weight: 600;
   margin-bottom: 16px;
 }

 .problem-col ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .problem-col li {
   display: flex;
   gap: 10px;
   font-size: 14.5px;
   color: var(--ink-soft);
   align-items: flex-start;
 }

 .outcome-line {
   text-align: center;
   font-size: 19px;
   font-weight: 600;
   color: var(--ink);
   max-width: 560px;
   margin: 0 auto;
 }

 .outcome-line span {
   color: var(--accent-dark);
 }

 .solution-chips {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
   margin: 28px 0 22px;
 }

 .solution-chip {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 999px;
   padding: 10px 18px;
   font-size: 13.5px;
   font-weight: 500;
   color: var(--ink);
 }

 .solution-chip svg {
   width: 16px;
   height: 16px;
   stroke: var(--accent-dark);
   flex-shrink: 0;
 }

 .cap-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
 }

 .cap-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 26px;
 }

 .cap-card h4 {
   font-size: 16.5px;
   margin-bottom: 12px;
 }

 .cap-card ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 7px;
   margin-bottom: 12px;
 }

 .cap-card li {
   font-size: 13.5px;
   color: var(--ink-soft);
   padding-left: 14px;
   position: relative;
 }

 .cap-card li::before {
   content: '—';
   position: absolute;
   left: 0;
   color: var(--ink-faint);
 }

 .cap-card .note {
   font-size: 12.5px;
   color: var(--accent-dark);
   font-weight: 500;
 }

 .icon-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
 }

 .icon-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 24px;
 }

 .icon-card h4 {
   font-size: 15px;
   margin-bottom: 6px;
 }

 .icon-card p {
   font-size: 13px;
   color: var(--ink-soft);
 }

 .alert-screen {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   box-shadow: 0 20px 50px -30px rgba(16, 21, 31, 0.25);
   overflow: hidden;
   max-width: 620px;
   margin: 0 auto;
 }

 .alert-head {
   background: #FBEAE5;
   color: #C2543A;
   padding: 14px 22px;
   font-size: 13px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 8px;
   letter-spacing: 0.02em;
 }

 .alert-head .dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #C2543A;
 }

 .alert-body {
   padding: 26px;
 }

 .alert-body h3 {
   font-size: 22px;
   margin-bottom: 18px;
 }

 .alert-label {
   font-size: 11.5px;
   color: var(--ink-faint);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-bottom: 8px;
 }

 .alert-body ul {
   list-style: none;
   margin-bottom: 20px;
 }

 .alert-body li {
   font-size: 14px;
   color: var(--ink-soft);
   padding: 5px 0 5px 16px;
   position: relative;
 }

 .alert-body li::before {
   content: '—';
   position: absolute;
   left: 0;
   color: var(--ink-faint);
 }

 .alert-rec {
   background: var(--accent-light);
   border-radius: 10px;
   padding: 14px 16px;
   margin-bottom: 14px;
 }

 .alert-rec p {
   font-size: 14px;
   color: var(--ink);
   font-weight: 600;
 }

 .alert-impact {
   font-size: 12.5px;
   color: #C2543A;
   font-weight: 600;
 }

 .netty-feature-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-top: 22px;
 }

 .netty-feature {
   background: var(--surface-alt);
   border-radius: 10px;
   padding: 14px;
 }

 .netty-feature h5 {
   font-size: 13px;
   margin-bottom: 4px;
   color: var(--ink);
 }

 .netty-feature p {
   font-size: 12px;
   color: var(--ink-soft);
 }

 .wa-bubble.user {
   background: var(--accent-light);
   margin-left: auto;
   border-top-left-radius: 10px;
   border-top-right-radius: 2px;
 }

 /* ---------- WhatsApp-style phone chrome ---------- */
 .wa-header {
   background: #075E54;
   margin: -14px -12px 12px;
   padding: 12px;
   display: flex;
   align-items: center;
   gap: 10px;
   border-radius: 24px 24px 0 0;
 }

 .wa-header .wa-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 6px;
   flex-shrink: 0;
 }

 .wa-header .wa-avatar img {
   width: 100%;
   height: 100%;
 }

 .wa-header .who {
   color: #fff;
   font-size: 13px;
   font-weight: 600;
 }

 .wa-header .status {
   color: rgba(255, 255, 255, 0.75);
   font-size: 10px;
 }

 .wa-thread {
   background: #ECE5DD;
   margin: 0 -12px -14px;
   padding: 14px 12px;
   min-height: 230px;
 }

 .wa-msg-title {
   font-weight: 700;
   font-size: 12px;
   margin-bottom: 6px;
   color: #111;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .wa-divider {
   height: 1px;
   background: rgba(0, 0, 0, 0.08);
   margin: 6px 0 8px;
 }

 .wval.down {
   color: #C2543A;
 }

 .wval.up {
   color: var(--accent-dark);
 }

 .wa-action {
   margin-top: 8px;
   background: var(--accent-light);
   color: var(--accent-dark);
   font-weight: 600;
   font-size: 11px;
   padding: 7px 9px;
   border-radius: 6px;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .wa-time {
   font-size: 9px;
   color: rgba(0, 0, 0, 0.35);
   text-align: right;
   margin-top: 3px;
 }

 @media(max-width:900px) {

   .problem-grid,
   .cap-grid,
   .icon-grid {
     grid-template-columns: 1fr 1fr;
   }

   .page-hero h1 {
     font-size: 38px;
   }
 }

 @media(max-width:520px) {

   .problem-grid,
   .cap-grid,
   .icon-grid,
   .netty-feature-grid {
     grid-template-columns: 1fr;
   }
 }

 /* ---------- Nav dropdown ---------- */
 .nav-dropdown {
   position: relative;
 }

 .nav-dropdown>span {
   display: flex;
   align-items: center;
   gap: 4px;
   cursor: pointer;
 }

 .nav-dropdown>span svg {
   width: 12px;
   height: 12px;
   stroke: currentColor;
   transition: transform 0.15s;
 }

 .nav-dropdown:hover>span svg {
   transform: rotate(180deg);
 }

 .dropdown-menu {
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translate(-50%, 6px);
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 14px;
   box-shadow: 0 16px 36px -12px rgba(16, 21, 31, 0.18);
   padding: 14px 8px 8px;
   min-width: 190px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.15s ease, transform 0.15s ease;
   z-index: 50;
 }

 .nav-dropdown:hover .dropdown-menu {
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, 0);
 }

 .dropdown-menu a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 12px;
   border-radius: 9px;
   font-size: 13.5px;
   color: var(--ink-soft);
   font-weight: 500;
 }

 .dropdown-menu a:hover {
   background: var(--surface-alt);
   color: var(--ink);
 }

 .dropdown-menu .dd-icon {
   width: 26px;
   height: 26px;
   border-radius: 7px;
   background: var(--accent-light);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .dropdown-menu .dd-icon svg {
   width: 14px;
   height: 14px;
   stroke: var(--accent-dark);
 }

 .toggle-row {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 12px;
   margin-bottom: 36px;
 }

 .toggle-pill {
   display: flex;
   background: var(--surface-alt);
   border: 1px solid var(--border);
   border-radius: 999px;
   padding: 4px;
 }

 .toggle-pill button {
   border: none;
   background: transparent;
   padding: 9px 20px;
   border-radius: 999px;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--ink-soft);
   cursor: pointer;
   font-family: 'Inter', sans-serif;
 }

 .toggle-pill button.active {
   background: var(--ink);
   color: #fff;
 }

 .save-badge {
   background: var(--accent-light);
   color: var(--accent-dark);
   font-size: 11.5px;
   font-weight: 700;
   padding: 4px 10px;
   border-radius: 999px;
 }

 /* ---------- Mobile navigation ---------- */
 .nav-toggle {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5px;
   width: 36px;
   height: 36px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   flex-shrink: 0;
   -webkit-tap-highlight-color: transparent;
 }

 .nav-toggle span {
   display: block;
   width: 21px;
   height: 2px;
   background: var(--ink);
   border-radius: 2px;
   transition: transform .2s ease, opacity .2s ease;
 }

 .nav-toggle.active span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
 }

 .nav-toggle.active span:nth-child(2) {
   opacity: 0;
 }

 .nav-toggle.active span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
 }

 body.nav-open {
   overflow: hidden;
 }

 @media(max-width:900px) {
   .nav-toggle {
     display: flex;
   }

   nav.links {
     display: none;
     position: fixed;
     top: 72px;
     left: 0;
     right: 0;
     bottom: 0;
     background: var(--surface);
     flex-direction: column;
     gap: 0;
     padding: 8px 28px 28px;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     z-index: 39;
   }

   nav.links.open {
     display: flex;
   }

   nav.links>a {
     padding: 16px 2px;
     border-bottom: 1px solid var(--border);
     font-size: 16.5px;
     width: 100%;
     color: var(--ink);
   }

   .nav-dropdown {
     width: 100%;
   }

   .nav-dropdown>span {
     padding: 16px 2px;
     border-bottom: 1px solid var(--border);
     font-size: 16.5px;
     width: 100%;
     justify-content: space-between;
     color: var(--ink);
   }

   .dropdown-menu {
     position: static;
     opacity: 1;
     visibility: visible;
     transform: none;
     box-shadow: none;
     border: none;
     min-width: 0;
     width: 100%;
     padding: 2px 0 10px;
     display: none;
     background: transparent;
   }

   .nav-dropdown.open .dropdown-menu {
     display: block;
   }

   .nav-dropdown.open>span svg {
     transform: rotate(180deg);
   }

   .dropdown-menu a {
     padding: 12px 10px;
     font-size: 15px;
   }
 }

 @media(max-width:460px) {
   .nav-cta {
     gap: 10px;
   }

   .nav-cta .link-quiet {
     display: none;
   }

   .nav-cta .btn-primary {
     padding: 9px 16px;
     font-size: 13.5px;
   }

   .brand {
     font-size: 0;
   }

   .nav-row {
     gap: 8px;
   }
 }

 @media(max-width:900px) {
   .wrap {
     padding: 0 20px;
   }
 }

 @media (max-width: 767px) {
   .page-hero {
     padding: 30px 0 30px;

   }

   section {
     padding: 30px 0;
   }

   .final-cta h2 {
     font-size: 26;

   }


   .final-cta {
     padding: 30px 30px;

   }

 }

 @media(max-width:400px) {

   .hero h1,
   .page-hero h1 {
     font-size: 30px;
   }
 }





 @media(max-width:900px) {

   .problem-grid,
   .cap-grid,
   .icon-grid {
     grid-template-columns: 1fr 1fr;
   }

   .page-hero h1 {
     font-size: 38px;
   }

   .page-hero {
     padding-top: 60px;
   }

   a.btn {
     padding: 9px 20px !important;
   }

   section {
     padding: 60px 0;
   }

   .section-head .kicker {
     font-size: 18px;
   }

   .page-hero p.lede {
     font-size: 18.5px;
   }

   .foot-grid {
     grid-template-columns: 1fr 1fr 1fr 1fr;
   }
 }

 @media(max-width: 767px) {
   .page-hero {
     padding-top: 40px;
   }
	 
	 .page-hero h1 {
		font-size: 30px;
	}

   .solution-chips {
     margin: 0;
   }

   .cap-card ul {
     gap: 4px;
   }

   .foot-col ul {
     gap: 0;
   }

   .foot-grid {
     grid-template-columns: 1fr 1fr;
   }

   .alert-body,
   .final-cta {
     padding: 16px;
   }

   .compare-col,
   .stage-card,
   .cap-card, .price-card {
     padding: 14px;
   }
	 .faq-item {
		padding: 10px 0;
	}

   .section-head {
     margin-bottom: 30px;
   }
	 .toggle-row{
		 margin-bottom: 20px;
	 }

   section {
     padding: 40px 0;
   }

   a.btn.btn-accent {
     padding: 9px 16px !important;
   }

   .final-cta {
     margin: 0 20px;
   }

   .hero-meta,
   .mismatch-row,
   .kicker,
   .layer-text li,
   .layer-num,
   .stage-card p,
   .price-card .btn,
   .faq-a p,
   .btn-accent,
   .foot-col a,
   .solution-chip,
   .cap-card li {
     font-size: 13px !important;
   }

   .page-hero p.lede,
   .section-head .kicker,
   .section-head p,
   .narrative p,
   .compare-col li,
   .layer-text p.desc,
   .stage-card h4,
   .industry-body h4,
   .faq-q,
   .final-cta p,
   .app-download-text p,
   a.btn {
     font-size: 14px !important;
   }

   .stat-block .num,
   .stat-row .stat .num,
   .compare-col h3 {
     font-size: 18px !important;
   }

   .section-head h2,
   .kicker+h2,
   .layer-text h3,
   .app-download-text h3 {
     font-size: 22px !important;
   }

   .final-cta h2 {
     font-size: 28px;
   }

   .price-card .amount {
     font-size: 32px;
   }

 }


 /* Prevent any accidental horizontal overflow on small screens */
 table {
   max-width: 100%;
 }

 .legal-table {
   display: block;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   white-space: nowrap;
 }

 .legal-table th,
 .legal-table td {
   white-space: normal;
 }