/* Canvas Wrapper & Aesthetics */
.canvas-container { width: 100%; height: 160px; position: relative; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at center, #FAFAFD 0%, #F5F7FF 100%); border: 1px solid #EEF2F6; }
.interaction-tip { position: absolute; bottom: 8px; right: 12px; font-size: 0.65rem; color: #94A3B8; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; font-weight: 500; }
.canvas-container:hover .interaction-tip { opacity: 1; }
/* Stage Canvas & Hybrid Layout */
.flow-stage-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 24px; position: relative; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02), 0 8px 10px -6px rgba(0, 0, 0, 0.02); overflow: hidden; }
.canvas-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* Node Cards (HTML overlays for high-fidelity rendering) */
.nodes-overlay-container { position: relative; z-index: 2; }
.node-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.25rem 1rem; width: 100%; max-width: 150px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03); }
.node-card:hover { transform: translateY(-4px); border-color: #6366f1; box-shadow: 0 12px 20px -8px rgba(99, 102, 241, 0.15); }
/* Selected state highlighting representing starting core module */
.node-card.origin-node { border-color: #4f46e5; background: #f5f3ff; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08); }
.node-icon-wrapper { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto; transition: all 0.3s ease; }
.node-card:hover .node-icon-wrapper { transform: scale(1.1); }
/* Pulse/Ripple feedback on data arrival */
@keyframes card-ripple {
  0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.2); }
  70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.pulse-trigger { animation: card-ripple 0.6s ease-out; }


/* New Aug 24 */
  :root{
    --ink:#0B0D14;
    --ink-soft:#141824;
    --charcoal:#171B27;
    --charcoal-soft:#1E2331;
    --amber:#F5A524;
    --amber-deep:#D9820A;
    --amber-light:#FCE3B6;
    --secondary:#F2600C;
    --secondary-deep:#C7440A;
    --secondary-light:#FFD9B8;
    --cyan:#4587ff;
    --cyan-deep:#0891B2;
    --steel:#60A5FA;
    --emerald:#22C55E;
    --red:#F87171;
    --slate-100:#F4F5FA;
    --border-light:#E7E9F1;
    --border-dark:rgba(30,28,28,.09);
    --text-dark:#0F1420;
    --text-light:#F6F7FB;
    --muted-light:#98A3B8;
    --muted-dark:#5A6473;
    --radius-lg:22px;
    --radius-md:16px;
  }
     /* ══ Hero background — Asprova-style teal → navy gradient ══ */
    /* .hero.hero-section.bg-gradient1 {
      background:
        radial-gradient(1100px 700px at 4% -8%, rgba(255, 86, 30, 0.55), transparent 52%),
        radial-gradient(800px 560px at 14% 26%, rgba(14, 54, 255, 0.55), transparent 60%),
        linear-gradient(150deg, #0e2161 0%, #103086 38%, #0021a2 100%) !important;
    } */
    .hero-sub {    font-size: 16px;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.65;}
     .hero h1 .accent{
    display:block; background:linear-gradient(120deg,#FCE3B6 10%, var(--amber) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .hero h1 {line-height: 1.21;}
    .hero-badge1{    margin-bottom: 20px !important;
    display:inline-flex; align-items:center; gap:.5rem; background:rgba(255, 255, 255, 0.06); color:var(--white);
    border:1px solid rgba(245,165,36,.3); padding:.5rem 1.1rem; border-radius:999px; font-size:.82rem; font-weight:600;
  }
.hero-section .hero-badge {background:#fbfbfb !important;border:3px solid color-mix(in oklab, #fff 70%, transparent); color: var(--primary)}
  /* .hero-badge {background:none !important;} */
    .hero-badge::before{display:none !important;}
  .hero-badge1 i{color:var(--primary);}
        /* ══ Integrated Platform hub diagram — align accent to page's orange theme (was indigo) ══ */
    .node-card:hover{
      border-color:#E8500A !important;
      box-shadow:0 12px 20px -8px rgba(232,80,10,.18) !important;
    }
    .node-card.origin-node{
      border-color:#E8500A !important;
      background:#FFF3EA !important;
      box-shadow:0 4px 12px rgba(232,80,10,.12) !important;
    }
    .node-card.origin-node .node-icon-wrapper{
      background:#FDE3D0 !important; color:#E8500A !important;
    }
    .node-card.origin-node h6{color:#E8500A !important;}
    @keyframes card-ripple {
      0% { box-shadow: 0 0 0 0 rgba(232, 80, 10, 0.25); }
      70% { box-shadow: 0 0 0 10px rgba(232, 80, 10, 0); }
      100% { box-shadow: 0 0 0 0 rgba(232, 80, 10, 0); }
    }

     .hero-ctas{display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:2rem;}

  .hero-stats{display:flex; justify-content:center; gap:1.4rem; flex-wrap:wrap; margin:2.4rem 0 0; position:relative; z-index:2;}
  .hero-stats .hs-num{font-weight:800; font-size:2rem; color:var(--dark-2); margin-bottom: 0;}
  .hero-stats .hs-label{font-size:12px; color:var(--text-muted); margin-top:.1rem;line-height: 1.4;}



  /* ===== Buttons ===== */
   .btn-gold{ gap: .55rem; display: flex;
    background:var(--primary); color:#fff !important; font-weight:600; border:none; padding:.9rem 1.7rem; border-radius:12px;
    box-shadow:0 1px 0 rgba(0,0,0,.05), 0 10px 20px -10px rgba(31, 34, 95, 0.55); transition:transform .2s ease;
  }
  .btn-gold:hover{transform:translateY(-2px); color:#2A1E05; background:var(--primary);}
    .hero-btn-primary,.hero-btn-outline {display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.85rem 1.7rem;border-radius:12px;font:600 .95rem/1.5 'Inter',sans-serif;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;}
.hero-btn-primary {color:#fff;background:linear-gradient(180deg,#6B60ED,#4F46E5 55%,#4338CA);border:1px solid #4338CA;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -8px rgba(79,70,229,.4);}
.hero-btn-primary:hover {color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(79,70,229,.45);}
.hero-btn-outline {color:var(--primary);background:rgba(255,255,255,.45);border:1px solid #9496AE;}
.hero-btn-outline:hover {color:var(--primary-dark);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 10px -6px rgba(79,70,229,.18);background:linear-gradient(180deg,#FFFFFF,#F4F2FF);}
.hero-btn-primary:focus-visible,.hero-btn-outline:focus-visible {outline:3px solid #8279ED;outline-offset:4px;}

  .btn-amber{
    background:var(--primary);
    color:#fff; border:none; font-weight:700; font-size:.95rem;
    padding:.85rem 1.7rem; border-radius:12px;
    box-shadow:0 12px 26px -8px rgba(12, 35, 242, 0.55);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn-amber:hover{color:#fff; transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(242,96,12,.65);}

  .btn-ghost-onblue{
    background:transparent; border:1.5px solid rgba(28, 28, 30, 0.5); color:var(--primary); font-weight:600; font-size:.95rem;
    padding:.85rem 1.7rem; border-radius:12px; display:inline-flex; align-items:center; gap:.55rem; transition:all .2s ease;
  }
  .btn-ghost-onblue:hover{background:none; border-color:var(--primary); transform:translateY(-2px);color:var(--primary); box-shadow:0 8px 18px -6px rgba(79,70,229,.22);}

  .btn-ghost-onink{
    background:transparent; border:1.5px solid rgba(30,28,28,.5); color:#fff; font-weight:600; font-size:.95rem;
    padding:.85rem 1.7rem; border-radius:12px; display:inline-flex; align-items:center; gap:.55rem;
    transition:all .2s ease;
  }
  .btn-ghost-onink:hover{background:rgba(30,28,28,.1); border-color:#fff; color:#fff;}
  .btn-outline-ink{
    background:#fff; color:var(--text-dark); font-weight:600; font-size:.95rem;
    padding:.85rem 1.6rem; border-radius:12px; border:1.5px solid var(--border-light);
    display:inline-flex; align-items:center; gap:.55rem; transition:all .2s ease;
  }
  .btn-outline-ink:hover{border-color:var(--amber-deep); color:var(--amber-deep); background:var(--amber-light);}

  
     :root{
      --mkc-ink:#0B0D14;
      --mkc-amber:#F5A524;
      --mkc-amber-deep:#D9820A;
      --mkc-amber-light:#d8a746;
      --mkc-cyan:#22D3EE;
      --mkc-emerald:#22C55E;
      --mkc-slate-100:#F4F5FA;
      --mkc-border-light:#E7E9F1;
      --mkc-border-dark:rgba(30,28,28,.09);
      --mkc-text-dark:#0F1420;
      --mkc-muted-light:#98A3B8;
      --mkc-muted-dark:#5A6473;
      --mkc-radius-md:16px;
    }

    .mkc-hero-inner{max-width:740px; margin:0 auto; position:relative; z-index:2; text-align:center;}

     /* ---- trust checkmarks row ---- */
    .mkc-trust-checks{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem; color:rgba(30,28,28,.85); font-size:.88rem; font-weight:500;}
    .mkc-trust-checks .tc-item{display:flex; align-items:center; gap:.5rem;}
    .mkc-trust-checks .tc-dot{width:20px; height:20px; border-radius:50%; background:var(--mkc-amber); color:#241300; display:flex; align-items:center; justify-content:center; font-size:.68rem; flex-shrink:0;}
    .mkc-trust-checks .tc-divider{width:1px; height:16px; background:rgba(30,28,28,.2);}


    /* ---- mockup dashboard composition ---- */
    .mockup-stage{position:relative; width:100%; margin-top:2.8rem; padding:0 1.2rem 5rem; display:flex; align-items:flex-end; justify-content:center; gap:1.3rem;}
    .mockup-side{display:flex; flex-direction:column; justify-content:flex-end; gap:1rem; width:228px; flex-shrink:0; padding-bottom:1.4rem;}
    .mockup-window{
      position:relative; z-index:5; width:min(860px, 54vw); flex-shrink:0; background:#fff; border-radius:12px 12px 6px 6px; overflow:hidden; text-align:left;
      box-shadow:0 20px 60px -20px rgba(22,35,31,.25); opacity:0; transform:translateY(50px); animation:mkcRiseIn .9s .15s cubic-bezier(.2,.7,.3,1) forwards;
    }
    @keyframes mkcRiseIn{ to{opacity:1; transform:translateY(0);} }
    .mockup-topbar{background:var(--mkc-ink); color:#fff; padding:.75rem 1.2rem; display:flex; align-items:center; gap:1rem;}
    .mt-logo{font-family:'Inter',sans-serif; font-weight:600; font-size:.825rem; display:flex; align-items:center; gap:.45rem; white-space:nowrap;}
    .mt-logo i{color:var(--mkc-amber);}
    .mt-search{flex:1; max-width:280px; background:rgba(30,28,28,.09); border-radius:8px; padding:.4rem .8rem; font-size:.78rem; color:rgba(30,28,28,.55); display:flex; align-items:center; gap:.5rem;}
    .mt-icons{display:flex; gap:.9rem; align-items:center; margin-left:auto; color:rgba(30,28,28,.65); font-size:.95rem;}
    .mt-avatar{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--mkc-amber),var(--mkc-cyan)); flex-shrink:0;}
    .mockup-tabs{display:flex; gap:1.4rem; padding:.65rem 1.6rem 0; border-bottom:1px solid var(--mkc-border-light); background:#fff;}
    .mt-tab{font-size:.8rem; font-weight:600; color:var(--mkc-muted-dark); padding-bottom:.6rem; border-bottom:2px solid transparent;}
    .mt-tab.active{color:var(--mkc-amber-deep); border-bottom-color:var(--mkc-amber-deep);}
    .mockup-body{display:flex;}
    .mockup-sidebar{width:168px; border-right:1px solid var(--mkc-border-light); padding:1rem .7rem; flex-shrink:0; display:flex; flex-direction:column;}
    .mockup-sidebar a{display:flex; align-items:center; gap:.55rem; padding:.55rem .65rem; border-radius:8px; font-size:.79rem; color:var(--mkc-muted-dark); font-weight:500; margin-bottom:.15rem; text-decoration:none;}
    .mockup-sidebar a.active{background:var(--mkc-amber-light); color:var(--mkc-amber-deep); font-weight:700;}
    .mockup-content{flex:1; padding:1.3rem 1.5rem 1.5rem; min-width:0;}
    .mockup-stat-row{display:flex; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap;}
    .mockup-stat{flex:1; min-width:200px; border:1px solid var(--mkc-border-light); border-radius:12px; padding:1rem 1.2rem;}
    .ms-label{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mkc-muted-dark); font-weight:700;}
    .ms-value{font-family:'Poppins',sans-serif; font-weight:700; font-size:1.15rem; margin:.35rem 0 .5rem; color:var(--mkc-text-dark);}
    .ms-value.pos{color:var(--mkc-emerald);}
    .ms-trend{display:flex; align-items:flex-end; gap:4px; height:26px;}
    .ms-trend i{flex:1; display:block; border-radius:2px; background:var(--mkc-border-light);}
    .ms-trend i.on{background:var(--mkc-amber);}
    .mockup-chart-card{border:1px solid var(--mkc-border-light); border-radius:12px; padding:1rem 1.2rem 0;}
    .cc-title{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mkc-muted-dark); font-weight:700; margin-bottom:.3rem;}
    .cc-row{display:flex; gap:1.4rem; align-items:flex-end;}
    .cc-chart{flex:1;}
    .cc-side{width:150px; padding:.6rem 0 1rem; flex-shrink:0;}
    .cc-side .cs-item{margin-bottom:.75rem;}
    .cc-side .cs-label{font-size:.68rem; color:var(--mkc-muted-dark); font-weight:600;}
    .cc-side .cs-value{font-family:'Poppins',sans-serif; font-weight:700; font-size:.92rem; color:var(--mkc-text-dark);}
    .cc-side .cs-value.pos{color:var(--mkc-emerald);}



    /* ---- companion widget cards flanking the mockup ---- */
    .peek-card{
      position:relative; width:100%; text-align:left; color:#fff;
      background:rgba(255, 255, 255, 0.07); backdrop-filter:blur(8px); border:1px solid rgba(30,28,28,.14);
      border-radius:16px; padding:1rem 1.1rem; box-shadow:0 18px 32px -15px rgba(0,0,0,.2);
      opacity:0; animation:mkcFadeUp .7s ease forwards;
    }
    @keyframes mkcFadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
    .mockup-side .peek-card:nth-child(1){animation-delay:.35s;}
    .mockup-side .peek-card:nth-child(2){animation-delay:.55s;}
    .mkc-float-loop{animation:mkcBobY 6s ease-in-out infinite;}
    .mockup-side .peek-card:nth-child(2) .mkc-float-loop{animation-duration:7s; animation-delay:.6s;}
    @keyframes mkcBobY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
    .peek-eyebrow{font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(30,28,28,.6); font-weight:700; margin-bottom:.6rem;}
    .peek-row{display:flex; justify-content:space-between; gap:.6rem; font-size:.74rem; padding:.35rem 0; border-top:1px dashed rgba(30,28,28,.16); color:rgba(30,28,28,.85);}
    .peek-row span:first-child{color:rgba(30,28,28,.6);}
    .peek-status{display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700; padding:.22rem .6rem; border-radius:999px;}
    .peek-status.running{background:rgba(245,165,36,.18); color:var(--mkc-amber-light);}
    .peek-status.done{background:rgba(34,197,94,.18); color:#86EFAC;}
    .peek-bar{height:6px; border-radius:6px; background:rgba(30,28,28,.15); overflow:hidden; margin:.6rem 0 .35rem;}
    .peek-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--mkc-amber),var(--mkc-cyan));}
    .peek-big{font-family:'Inter',sans-serif; font-weight:800; font-size:1.6rem; color:#444444; margin:.2rem 0;}
    .peek-sub{font-size:.74rem; color:rgba(30,28,28,.65);}

    .widget-delta{display:inline-flex; align-items:center; gap:.2rem; font-size:.72rem; font-weight:700; padding:.15rem .5rem; border-radius:999px; background:rgba(34,197,94,.16); color:#426e52;}
    .widget-spark{margin:.6rem 0 .1rem;}
    .widget-spark svg{display:block; width:100%; height:40px;}

    .donut-row{display:flex; align-items:center; gap:1rem; margin-top:.3rem;}
    .donut-wrap{position:relative; width:74px; height:74px; flex-shrink:0;}
    .donut-wrap svg{width:100%; height:100%; transform:rotate(-90deg);}
    .donut-center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column;left: 36px;top: 36px;}
    .donut-center b{font-family:'Poppins',sans-serif; font-size:.75rem; color:#fff;line-height: 1.1;}
    .donut-center span{font-size:.6rem; color:rgba(30,28,28,.55);line-height: 1;}
    .donut-legend{flex:1; display:flex; flex-direction:column; gap:.4rem;}
    .dl-item{display:flex; align-items:center; justify-content:space-between; font-size:.72rem; color:rgba(30,28,28,.8);}
    .dl-left{display:flex; align-items:center; gap:.4rem;}
    .dl-dot{width:8px; height:8px; border-radius:2px; flex-shrink:0;}

    .seg-bar-list{display:flex; flex-direction:column; gap:.65rem; margin-top:.5rem;}
    .seg-bar-item .sb-top{display:flex; justify-content:space-between; font-size:.72rem; color:rgba(30,28,28,.8); margin-bottom:.28rem;}
    .seg-bar-item .sb-top b{color:#fff; font-weight:700;}
    .seg-bar-track{height:6px; border-radius:6px; background:rgba(30,28,28,.12); overflow:hidden;}
    .seg-bar-track i{display:block; height:100%; border-radius:6px;}

    .mkc-trust-strip{margin-top:.5rem; position:relative; z-index:2; border-top:1px solid var(--mkc-border-dark); padding:1.6rem 1rem .5rem;}
    .mkc-trust-strip small{color:var(--mkc-muted-light); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600;}
    .mkc-trust-logos{display:flex; flex-wrap:wrap; justify-content:center; gap:2.2rem; margin-top:1rem;}
    .mkc-trust-logos span{font-family:'Poppins',sans-serif; font-weight:600; font-size:.87rem; color:rgba(30,28,28,.5); letter-spacing:.03em;}

    @media (max-width:1199px){
      .mockup-side{display:none;}
      .mockup-window{width:min(760px, 88vw);}
    }
    @media (max-width:991px){
      .mockup-stage{margin-top:2.2rem; padding:0 1rem 2rem;}
      .mockup-sidebar{display:none;}
      .mockup-tabs{padding:.6rem 1.1rem 0;}
      .mockup-content{padding:1.1rem 1.1rem 1.3rem;}
      .mockup-stat-row{flex-direction:column;}
      .cc-row{flex-direction:column;}
      .cc-side{width:100%; display:flex; gap:1.2rem; padding-top:0;}
      .mt-search{display:none;}
      .mkc-trust-logos {gap:.87rem; }
        .mkc-trust-checks{flex-direction:column; gap:.6rem;}
      .mkc-trust-checks .tc-divider{display:none;}
      .logos-row {gap:.8rem;}
      .strip-wrapper {margin-top: -20px !important;}
    }

    /* ---- capability cards (Features section), canvas mini-animations preserved inside ---- */
    .cap-card{background:#fff; border:1px solid var(--mkc-border-light); border-radius:var(--mkc-radius-md); padding:1.7rem 1.6rem; height:100%; transition:all .25s ease; display:flex; flex-direction:column;}
    .cap-card:hover{transform:translateY(-6px); box-shadow:0 24px 46px -20px rgba(15,20,32,.14); border-color:#c1bfff;}
    .cap-icon{width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--primary-light); color:var(--primary); font-size:1.3rem; margin-bottom:1rem;}
    .cap-card h5{font-family:'Poppins',sans-serif; font-weight:600; font-size:1.2rem;margin-bottom: 16px;}
    .cap-card p{font-size:.9rem; line-height:1.6; margin-bottom:1rem;}
    .cap-tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.1rem;}
    .cap-tag{background:var(--mkc-slate-100); color:var(--mkc-muted-dark); font-size:.72rem; font-weight:600; padding:.28rem .6rem; border-radius:999px; border:1px solid var(--mkc-border-light);}
   /* stat strip */
  .stat-strip{
    background:#fff; box-shadow: 0 8px 10px rgba(0, 70, 4, 0.053); border-radius:22px;
    padding:2rem 1rem; color:#fff; margin-bottom: .5rem;
  }