/* :root {
      --bg: #fbfdff;
      --card: #fff;
      --muted: #6b7280;
      --text: #07122a;
      --panel-shadow: 0 18px 40px rgba(9,30,66,0.04);
      --border: rgba(9,30,66,0.04);
      --accent-grad: linear-gradient(90deg,#255bff,#27c0ff);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      --text-dark: #0b1b2b;
      --text-muted: #475569;
      --text-subtle: #334155;
      --brand: #1f6fff;
      --border: rgba(11,27,43,.05);
      --shadow: 0 14px 34px rgba(11,27,43,.06);
      --radius: 14px;
      --transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
     */
 .wrap {
   max-width: 1100px;
   margin: 48px auto;
   box-sizing: border-box;
 }

 .kicker {
   color: #475569;
   font-size: 12px;
   letter-spacing: 1px;
   text-transform: uppercase;
 }

 h1 {
   margin: 8px 0 10px 0;
   font-size: 34px;
   line-height: 1.05;
   font-weight: 900;
 }

 p.lead {
   color: #475569;
   margin: 0 0 12px 0;
   max-width: 72ch;
   font-size: 15px;
 }

 /* hmetrics grid */
 .hmetrics {
   display: grid;
   gap: 14px;
   grid-template-columns: repeat(4, 1fr);
   margin-bottom: 20px;
 }

 .metric {
   background: #fff;
   border-radius: 10px;
   padding: 16px;
   box-shadow: var(--panel-shadow);
   border: 1px solid #eef2f7;
 }

 .metric .title {
   font-size: 13px;
   color: #475569;
   font-weight: 600;
 }

 .metric .value {
   font-weight: 900;
   font-size: 20px;
   color: #07122a;
 }

 .metric .desc-sp {
   color: #475569;
   font-size: 13px;
   padding: 0px;
 }

 /* main grid */
 .main {
   display: grid;
   grid-template-columns: 1fr 420px;
   gap: 20px;
   align-items: start;
 }

 .hcard {
   background: linear-gradient(180deg, #fff, #fbfdff);
   border-radius: 12px;
   padding: 18px;
   box-shadow: var(--panel-shadow);
   border: 1px solid #eef2f7;
   position: relative;
 }

 .results {
   background: #fff;
   border-radius: 12px;
   padding: 18px;
   box-shadow: var(--panel-shadow);
   border: 1px solid #eef2f7;
 }

 form {
   display: grid;
   gap: 10px;
   position: relative;
 }

 label {
   font-size: 13px !important;
   color: #334155;
   display: block;
 }

 input[type="number"],
 input[type="text"] {
   width: 100%;
   margin-top: 6px;
   padding: 10px 12px;
   border-radius: 8px;
   /* border: 1px solid rgba(9, 30, 66, 0.06); */
   box-sizing: border-box;
 }

 input[type="range"] {
   margin-top: 15px;
   width: 100%;
   box-shadow: none;
   padding: 0px;
 }

 .rows {
   display: flex;
   gap: 10px;
 }

 .rows>label {
   flex: 1;
 }

 input[type="number"] {
   padding-right: 0.5rem;
   padding: 0.5rem 0.5rem !important;
 }

 .btn-bl {
   padding: 8px 12px;
   background: #0053a600;
   color: #0054a6;
   text-decoration: none;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 600;
   margin-top: 10px;
   transition: background 0.3s;
   outline: none !important;
   cursor: pointer;
   box-shadow: 4px 4px 6px #ccc;
   border: 2px solid #0054a5;
 }

 .btn-bl:hover {
   background-color: #0057a0;
   color: #ffffff;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
   border-radius: 12px;
   text-decoration: none;
   font-weight: 700;
   cursor: pointer;
 }

 .primary {
   background: #0054a6;
   color: white !important;
   text-decoration: none;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 600;
   margin-top: 10px;
   transition: background 0.3s;
   outline: none !important;
   cursor: pointer;
   box-shadow: 4px 4px 6px #ccc;
 }

 .primary:hover {
   background: #0056b300;
   color: #0054a6 !important;
   border: 2px solid #0054a6;
   outline: none !important;
 }

 .actions {
   display: flex;
   gap: 10px;
   align-items: center;
 }

 .btn {
   padding: 10px 14px;
   border-radius: 8px;
   border: none;
   font-weight: 800;
   cursor: pointer;
 }

 .btn-primary {
   background: linear-gradient(90deg, #255bff, #27c0ff);
   color: #fff !important;
 }
 .btn-primary:hover {
   background: linear-gradient(90deg, #255bff, #27c0ff);
   color: #fff;
 }

 .btn-calc {
   background: #0b74ff;
   color: #fff;
 }

 .btn-ghost {
   background: #fff;
   border: 1px solid rgba(9, 30, 66, 0.06);
   color: #111;
 }

 /* results styles */
 .small-muted {
   color: #475569;
   font-size: 13px;
 }

 .big {
   font-size: 22px;
   font-weight: 900;
   color: #07122a;
   margin-top: 6px;
 }

 .subgrid {
   display: flex;
   gap: 8px;
   margin-top: 12px;
 }

 .subcard {
   flex: 1;
   background: #f7f9fc;
   padding: 10px;
   border-radius: 8px;
   text-align: center;
 }

 /* responsive */
 @media (max-width:980px) {
   .main {
     grid-template-columns: 1fr !important;
   }

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

 /* focus */
 form :focus {
   /* outline: 3px solid rgba(37, 91, 255, 0.16); */
   box-shadow: 0 6px 18px rgba(37, 91, 255, 0.08);
   outline-offset: 3px;
 }

 /* small misc */
 .muted {
   color: #475569;
 }

 /* Hero Section */
 .hero-section {
   padding: 48px 40px;
   max-width: 1200px;
   margin: 0 auto;
   box-sizing: border-box;
 }

 .hero-container {
   display: flex;
   gap: 32px;
   align-items: flex-start;
   flex-wrap: wrap;
 }

 /* LEFT COPY */
 .hero-copy {
   flex: 0 1 52%;
   min-width: 300px;
   max-width: 760px;
 }

 .tagline {
   display: inline-block;
   background: #f3f7fb;
   color: #556;
   padding: 6px 12px;
   border-radius: 20px;
   font-size: 13px;
   margin-bottom: 18px;
 }

 .hero-copy h1 {
   margin: 0 0 16px 0;
   font-size: 40px;
   line-height: 1.05;
   font-weight: 700;
   color: #0b1b2b;
 }

 .hero-desc {
   color: #4b5563;
   font-size: 16px;
   margin: 0 0 18px 0;
   max-width: 60ch;
 }

 /* Stats */
 .stats {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin: 12px 0 20px 0;
 }

 .stat-item {
   display: flex;
   gap: 8px;
   align-items: center;
   font-weight: 700;
   color: #0b1b2b;
   font-size: 15px;
 }

 .stat-item span {
   font-size: 15px;
 }

 /* Buttons */
 .hero-buttons {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
 }

 .btn-primary,
 .btn-secondary {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
   padding: 12px 20px;
   border-radius: 10px;
   font-weight: 600;
   transition: transform 0.28s ease, box-shadow 0.28s ease;
 }

 .btn-primary {
   background: #2867ff;
   color: #fff;
   box-shadow: 0 6px 16px rgba(40, 103, 255, 0.18);
 }

 .btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(40, 103, 255, 0.28);
 }

 .btn-secondary {
   background: #f3f4f6;
   color: #0b1b2b;
   border: 1px solid rgba(11, 27, 43, 0.06);
   padding: 12px 18px;
 }

 .btn-secondary:hover {
   background: #e5e7eb;
 }

 /* RIGHT IMAGE */
 .hero-image {
   flex: 0 1 45%;
   min-width: 260px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }

 .hero-image img {
   display: block;
   width: 420px;
   max-width: 100%;
   height: auto;
   border-radius: 12px;
   background: #fff;
   border: 1px solid rgba(11, 27, 43, 0.04);
   box-shadow: 0 22px 48px rgba(11, 27, 43, 0.08);
   transition: transform 0.28s ease, box-shadow 0.28s ease;
 }

 .hero-image img:hover {
   transform: scale(1.03);
   box-shadow: 0 28px 56px rgba(11, 27, 43, 0.12);
 }

 /* Responsive */
 @media (max-width: 768px) {
   .hero-copy h1 {
     font-size: 32px;
   }

   .hero-copy,
   .hero-image {
     flex: auto;
   }
 }

 /* Painpoints Section */
 .painpoints-section {
   font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
   max-width: 1200px;
   margin: 28px auto 20px;
   padding: 18px;
   box-sizing: border-box;
 }

 .painpoints-section h3 {
   margin: 0 0 14px 6px;
   font-size: 20px;
   font-weight: 700;
   color: #0b1b2b;
 }

 .painpoints-container {
   display: flex;
   gap: 14px;
   align-items: stretch;
   background: linear-gradient(180deg, #fbfdff, #f6f9ff);
   padding: 14px;
   border-radius: 12px;
   border: 1px solid rgba(11, 27, 43, 0.04);
   box-shadow: 0 10px 30px rgba(11, 27, 43, 0.03);
   flex-wrap: wrap;
   /* makes it responsive */
 }

 .painpoint-item {
   flex: 1 1 0;
   display: flex;
   gap: 12px;
   align-items: flex-start;
   padding: 10px;
   min-width: 200px;
 }

 .painpoint-icon {
   width: 44px;
   height: 44px;
   flex: 0 0 44px;
   border-radius: 8px;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 6px 12px rgba(11, 27, 43, 0.03);
   font-size: 20px;
 }

 .painpoint-title {
   font-weight: 700;
   color: #0b1b2b;
   font-size: 15px;
 }

 .painpoint-subtext {
   font-size: 13px;
   margin-top: 6px;
 }

 .painpoint-subtext.green {
   color: #0b946c;
 }

 .painpoint-subtext.gray {
   color: #6b7280;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .painpoints-container {
     flex-direction: column;
   }
 }

 /* Core Foundations */
 .core-section {
   max-width: 1200px;
   margin: 0 auto 40px;
   padding: 18px;
   box-sizing: border-box;
 }

 .core-header .core-subtitle {
   color: #6b7280;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .core-header h2 {
   margin: 8px 0 6px 0;
   font-size: 36px;
   color: #0b1b2b;
   font-weight: 800;
 }

 .core-header p {
   color: #374151;
   font-size: 15px;
   max-width: 60ch;
   line-height: 1.6;
 }

 .core-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 18px;
   align-items: start;
 }

 .core-card {
   background: #fff;
   border-radius: 12px;
   padding: 10px;
   box-shadow: 0 18px 40px rgba(11, 27, 43, 0.06);
   min-height: 160px;
   display: flex;
   flex-direction: column;
 }

 .core-card p {
   margin-top: 12px;
   color: #374151;
   font-size: 14px;
   line-height: 1.7;
 }

 .core-top {
   display: flex;
   gap: 12px;
   align-items: flex-start;
 }

 .core-icon {
   width: 48px;
   height: 48px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 6px 12px rgba(11, 27, 43, 0.03);
   font-size: 22px;
 }

 .core-label {
   font-size: 12px;
   color: #6b7280;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .core-title {
   font-size: 16px;
   font-weight: 700;
   color: #0b1b2b;
   margin-top: 6px;
 }

 .core-blue {
   border-left: 6px solid #eaf6ff;
 }

 .core-orange {
   border-left: 6px solid #fff4e8;
 }

 .core-green {
   border-left: 6px solid #ebfff3;
 }

 .core-yellow {
   border-left: 6px solid #fff7e9;
 }

 .core-purple {
   border-left: 6px solid #eef5ff;
 }

 .core-icon {
   background: #f3f8ff;
 }

 .core-cta {
   margin-top: 18px;
 }

 .core-cta a {
   display: inline-block;
   padding: 12px 18px;
   border-radius: 10px;
   background: #1f6fff;
   color: #fff;
   text-decoration: none;
   font-weight: 600;
   box-shadow: 0 12px 28px rgba(31, 111, 255, 0.12);
 }

 /* One Connected System */
 .connected-section {
   max-width: 1200px;
   margin: 48px auto;
   padding: 36px 20px;
   box-sizing: border-box;
 }

 .connected-wrapper {
   display: flex;
   gap: 40px;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .connected-left {
   flex: 1 1 550px;
   min-width: 300px;
   max-width: 700px;
 }

 .connected-subtitle {
   color: #7b8794;
   font-size: 12px;
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: 10px;
 }

 .connected-left h2 {
   margin: 0 0 18px 0;
   color: #07122a;
   font-size: 40px;
   line-height: 1.04;
   font-weight: 800;
 }

 .connected-left h2 span {
   background: linear-gradient(90deg, #2346ff, #1fb7ff);
   -webkit-background-clip: text;
   color: transparent;
 }

 .connected-left p {
   margin: 0 0 24px 0;
   color: #475569;
   font-size: 16px;
   line-height: 1.75;
   max-width: 56ch;
 }

 .connected-ctas {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   margin-top: 6px;
 }

 .primary-btn,
 .secondary-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 18px;
   border-radius: 12px;
   font-weight: 700;
   text-decoration: none;
 }

 .primary-btn {
   background: linear-gradient(90deg, #235dff, #1fb7ff);
   color: #fff;
   box-shadow: 0 18px 40px rgba(35, 93, 255, 0.18);
 }

 .secondary-btn {
   background: #fff;
   color: #07122a;
   border: 1px solid rgba(7, 18, 42, 0.06);
 }

 .connected-right {
   flex: 0 1 520px;
   min-width: 280px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }

 .diagram-card {
   width: 520px;
   max-width: 100%;
   background: linear-gradient(180deg,
       rgba(255, 255, 255, 0.96),
       rgba(245, 250, 255, 0.85));
   border-radius: 18px;
   padding: 20px;
   box-shadow: 0 30px 70px rgba(9, 30, 66, 0.08);
   border: 1px solid rgba(13, 44, 92, 0.04);
   transition: transform 0.36s ease, box-shadow 0.36s ease;
 }

 .diagram-grid {
   display: grid;
   grid-template-columns: 1fr 30px 1fr 30px 1fr;
   gap: 10px;
   align-items: center;
 }

 .module-card {
   width: 124px;
   height: 86px;
   background: #fff;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
   box-shadow: 0 10px 26px rgba(13, 44, 92, 0.04);
   font-weight: 700;
   color: #07122a;
   font-size: 14px;
 }

 .diagram-caption {
   margin-top: 12px;
   color: #6b7280;
   font-size: 13px;
   text-align: center;
 }

 /* Responsive */
 @media (max-width: 1100px) {
   .core-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 @media (max-width: 720px) {
   .core-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
   }
 }

 @media (max-width: 440px) {
   .core-grid {
     grid-template-columns: 1fr;
   }
 }

 /* float effect on diagram card */
 .diagram-card:hover {
   transform: translateY(-8px) scale(1.005);
   box-shadow: 0 40px 90px rgba(9, 30, 66, 0.12);
 }

 /* module card hover (lift) */
 .diagram-card .module-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 22px 48px rgba(9, 30, 66, 0.10);
   cursor: pointer;
 }

 /* arrow draw animation (pulse) */
 .diagram-card .arrow path {
   transition: stroke 320ms ease, opacity 320ms ease;
   opacity: 0.9;
 }

 .diagram-card:hover .arrow path {
   opacity: 1;
   stroke: #5f6f88;
 }

 /* responsive grid wrap */
 @media (max-width:980px) {
   #connected-system {
     font-size: 34px !important;
   }
 }

 @media (max-width:720px) {
   section[aria-labelledby="connected-system"]>div {
     flex-direction: column-reverse;
     gap: 18px;
     align-items: flex-start;
   }

   .diagram-card {
     width: 100% !important;
   }

   .diagram-card>div {
     grid-template-columns: 1fr 44px 1fr !important;
   }

   /* simpler stacking on small screens */
 }

 @media (max-width:420px) {
   #connected-system {
     font-size: 26px !important;
   }

   .diagram-card>div {
     grid-template-columns: 1fr !important;
     gap: 10px;
   }

   .diagram-card .module-card {
     width: 100%;
     justify-content: flex-start;
     padding-left: 16px;
     height: auto;
     align-items: flex-start;
   }
 }

 /* ax card */
 section.erp-modules {
   max-width: 1200px;
   margin: 56px auto;
   padding: 0 20px;
 }

 .section-label {
   color: #6b7280;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 8px;
 }

 .section-title {
   margin: 0 0 8px;
   font-size: 36px;
   line-height: 1.06;
   color: #0b1b2b;
   font-weight: 800;
 }

 .section-desc {
   margin: 0 0 22px;
   color: #475569;
   max-width: 68ch;
 }

 /* Grid */
 .modules-grid {
   display: grid;
   gap: 18px;
   grid-template-columns: repeat(3, 1fr);
 }

 @media (max-width: 1020px) {
   .modules-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 620px) {
   .modules-grid {
     grid-template-columns: 1fr;
   }
 }

 /* Card */
 .ax-card {
   display: block;
   text-decoration: none;
   border-radius: 12px;
   background: #fff;
   border: 1px solid #eef2f7;
   box-shadow: 0 14px 40px rgba(2, 6, 23, 0.06);
   transition: 200ms cubic-bezier(.2, .9, .3, 1);
   overflow: hidden;
 }

 .ax-card:hover,
 .ax-card:focus-within {
   transform: translateY(-8px);
   border-color: rgba(31, 111, 255, .3);
   box-shadow: 0 28px 60px rgba(31, 111, 255, .12);
 }

 .ax-card:focus {
   outline: 3px solid rgba(31, 111, 255, .2);
   border-radius: 12px;
 }

 .hcard-header {
   padding: 18px;
   border-bottom: 1px solid rgba(11, 27, 43, .04);
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
 }

 .hcard-header .icon {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   flex-shrink: 0;
 }

 .hcard-header h3 {
   margin: 0;
   font-size: 18px;
   font-weight: 800;
   color: #0b1b2b;
 }

 .hcard-subtitle {
   margin-top: 10px;
   font-size: 14px;
   color: #475569;
 }

 .hcard-list {
   margin: 14px 18px 6px 34px;
   padding: 0;
   list-style: disc;
   font-size: 14px;
   line-height: 1.6;
   color: #334155;
 }

 .hcard-footer {
   padding: 12px 18px 16px;
   color: #1f6fff;
   font-weight: 700;
   background: #ffffff;
 }

 /* Background gradients per module */
 .finance {
   background: linear-gradient(180deg, #f7fbff, #ffffff 40%);
 }

 .hinventory {
   background: linear-gradient(180deg, #f2fffa, #ffffff 40%);
 }

 .crm {
   background: linear-gradient(180deg, #f7f8ff, #ffffff 40%);
 }

 .orders {
   background: linear-gradient(180deg, #fff6f1, #ffffff 40%);
 }

 .hr {
   background: linear-gradient(180deg, #f1fbff, #ffffff 40%);
 }

 .suppliers {
   background: linear-gradient(180deg, #fff7f8, #ffffff 40%);
 }

 /* Icon background colors */
 .finance .icon {
   background: #eaf2ff;
 }

 .hinventory .icon {
   background: #eafff4;
 }

 .crm .icon {
   background: #eef1ff;
 }

 .orders .icon {
   background: #ffefe6;
 }

 .hr .icon {
   background: #e9faff;
 }

 .suppliers .icon {
   background: #fff1f3;
 }

 .automation {
   font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
   max-width: 1200px;
   margin: 48px auto;
   padding: 28px 20px;
   box-sizing: border-box;
 }

 .automation-header {
   max-width: 980px;
   margin-bottom: 18px;
 }

 .automation-label {
   color: #6b7280;
   font-size: 12px;
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: 8px;
 }

 .automation h2 {
   margin: 0 0 8px;
   font-size: 36px;
   line-height: 1.06;
   color: #07122a;
   font-weight: 800;
 }

 .automation p {
   margin: 0;
   color: #475569;
   font-size: 15px;
   line-height: 1.7;
   max-width: 72ch;
 }

 .automation-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   align-items: stretch;
 }

 .automation-card {
   background: #fff;
   border-radius: 12px;
   padding: 18px;
   box-shadow: 0 12px 30px rgba(9, 30, 66, 0.06);
   border: 1px solid rgba(9, 30, 66, 0.04);
   display: flex;
   gap: 14px;
   align-items: flex-start;
   transition: transform .22s ease, box-shadow .22s ease;
   cursor: default;
 }

 .automation-card:hover,
 .automation-card:focus {
   transform: translateY(-8px);
   box-shadow: 0 30px 60px rgba(9, 30, 66, 0.14);
   outline: none;
   border-color: rgba(47, 123, 255, 0.2);
 }

 .automation-badge {
   flex: 0 0 48px;
   width: 48px;
   height: 48px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-weight: 800;
   font-size: 16px;
 }

 .automation-content h3 {
   margin: 0 0 6px;
   font-weight: 800;
   color: #07122a;
   font-size: 16px;
 }

 .automation-content p {
   margin: 0;
   color: #475569;
   font-size: 14px;
   line-height: 1.7;
 }

 /* Badge Colors */
 .bg-blue {
   background: linear-gradient(180deg, #2f7bff, #1fb7ff);
 }

 .bg-purple {
   background: linear-gradient(180deg, #6b46ff, #b28bff);
 }

 .bg-green {
   background: linear-gradient(180deg, #10b981, #6fe6c4);
 }

 .bg-yellow {
   background: linear-gradient(180deg, #f59e0b, #ffd27a);
 }

 .bg-cyan {
   background: linear-gradient(180deg, #06b6d4, #8ff1ff);
 }

 .bg-red {
   background: linear-gradient(180deg, #ef4444, #ff9b9b);
 }

 /* CTA */
 .automation-cta {
   margin-top: 20px;
   display: flex;
   gap: 12px;
   align-items: center;
 }

 .btn-primary {
   background: linear-gradient(90deg, #2f7bff, #1fb7ff);
   color: #fff;
   padding: 12px 18px;
   border-radius: 10px;
   text-decoration: none;
   font-weight: 700;
   box-shadow: 0 12px 28px rgba(47, 123, 255, 0.18);
 }

 .btn-secondary {
   padding: 10px 16px;
   border-radius: 10px;
   text-decoration: none;
   color: #374151;
   border: 1px solid rgba(9, 30, 66, 0.06);
   background: #fff;
 }

 /* Responsive */
 @media (max-width: 1000px) {
   .automation-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 620px) {
   .automation-grid {
     grid-template-columns: 1fr;
   }

   .automation h2 {
     font-size: 26px;
   }
 }

 .industries {
   font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
   max-width: 1200px;
   margin: 48px auto;
   padding: 20px;
   box-sizing: border-box;
 }

 .industries-container {
   display: flex;
   gap: 28px;
   align-items: flex-start;
   flex-wrap: wrap;
 }

 .industries-intro {
   flex: 1 1 420px;
   min-width: 300px;
   max-width: 520px;
 }

 .section-label {
   color: #6b7280;
   font-size: 12px;
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: 8px;
 }

 .industries-intro h2 {
   margin: 0 0 12px;
   font-size: 36px;
   line-height: 1.06;
   color: #07122a;
   font-weight: 900;
 }

 .industries-intro p {
   color: #475569;
   margin: 0 0 18px;
   font-size: 15px;
   line-height: 1.7;
   max-width: 44ch;
 }

 .cta-row {
   display: flex;
   gap: 12px;
   margin-bottom: 18px;
 }

 .btn-primary {
   background: linear-gradient(90deg, #255bff, #27c0ff);
   color: #fff;
   padding: 12px 16px;
   border-radius: 10px;
   text-decoration: none;
   font-weight: 700;
   box-shadow: 0 12px 30px rgba(37, 91, 255, 0.18);
 }

 .btn-secondary {
   padding: 12px 16px;
   border-radius: 10px;
   background: #fff;
   border: 1px solid rgba(9, 30, 66, 0.06);
   text-decoration: none;
   color: #07122a;
   font-weight: 600;
 }

 .benefits {
   padding-left: 18px;
   margin: 6px 0 0;
   color: #374151;
   line-height: 1.6;
 }

 /* Right Grid */
 .industries-grid {
   flex: 1 1 620px;
   min-width: 300px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px;
   align-items: start;
 }

 /* Tiles */
 .industry-tile {
   display: flex;
   gap: 12px;
   min-height: 110px;
   align-items: center;
   padding: 14px;
   border-radius: 12px;
   overflow: hidden;
   text-decoration: none;
   transition: transform .26s ease, box-shadow .26s ease;
   border: 1px solid rgba(9, 30, 66, 0.06);
   box-shadow: 0 8px 22px rgba(9, 30, 66, 0.04);
   background: #fff;
 }

 .industry-tile:hover,
 .industry-tile:focus-within {
   transform: translateY(-8px);
   box-shadow: 0 30px 60px rgba(9, 30, 66, 0.12);
 }

 .tile-icon {
   width: 64px;
   height: 64px;
   border-radius: 10px;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .tile-content h3 {
   font-weight: 800;
   color: #07122a;
   font-size: 18px;
   margin: 0;
 }

 .tile-content p {
   margin: 8px 0 0;
   color: #374151;
   font-size: 14px;
   line-height: 1.6;
 }

 .tile-link {
   margin-top: 10px;
   color: #1f6fff;
   font-weight: 700;
   display: inline-block;
 }

 /* Tile-specific backgrounds */
 .industry-tile.retail {
   background: linear-gradient(180deg, #eef6ff, #f8fbff);
   border: 1px solid rgba(37, 91, 255, 0.08);
 }

 .industry-tile.hdistribution {
   background: linear-gradient(180deg, #fff8ed, #fffdf8);
   border: 1px solid rgba(245, 158, 67, 0.08);
 }

 .industry-tile.services {
   background: linear-gradient(180deg, #fff7f8, #fff9fb);
   border: 1px solid rgba(180, 85, 166, 0.08);
 }

 .industry-tile.manufacturing {
   background: linear-gradient(180deg, #effaf7, #f8fffb);
   border: 1px solid rgba(71, 181, 127, 0.08);
 }

 .industry-tile.ecommerce {
   background: linear-gradient(180deg, #f2f5ff, #fbfdff);
   border: 1px solid rgba(107, 111, 240, 0.08);
 }

 .industry-tile.petroleum {
   background: linear-gradient(180deg, #fff6f6, #fff9fb);
   border: 1px solid rgba(244, 114, 114, 0.08);
 }

 /* Responsive */
 @media (max-width: 1000px) {
   .industries-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 720px) {
   .industries-container {
     flex-direction: column;
   }

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

   .industries-intro h2 {
     font-size: 28px;
   }
 }

 .integrations {
   font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
   padding: 56px 20px;
   background: #fff;
 }

 .integrations {
   max-width: 1200px;
   margin: 0 auto;
 }

 .integrations-header {
   text-align: center;
   margin-bottom: 22px;
 }

 .integrations-label {
   font-size: 12px;
   letter-spacing: 1px;
   color: #6b7280;
   text-transform: uppercase;
   margin-bottom: 10px;
 }

 .integrations h2 {
   margin: 0;
   font-size: 30px;
   line-height: 1.12;
   color: #0f1724;
   font-weight: 700;
 }

 .integrations p {
   margin: 14px auto 0;
   max-width: 820px;
   color: #6b7280;
   font-size: 15px;
   line-height: 1.6;
 }

 .integrations-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 18px;
   margin-top: 28px;
 }

 .integration-card {
   cursor: pointer;
   text-align: left;
   display: flex;
   gap: 14px;
   align-items: center;
   padding: 20px;
   border-radius: 12px;
   border: 1px solid #e6eef8;
   background: #fff;
   box-shadow: 0 6px 18px rgba(15, 23, 36, 0.04);
   transition: transform .18s ease, box-shadow .18s ease;
   outline: none;
 }

 .integration-card:hover,
 .integration-card:focus {
   transform: translateY(-6px);
   box-shadow: 0 12px 30px rgba(15, 23, 36, 0.08);
 }

 .integration-icon {
   width: 44px;
   height: 44px;
   display: inline-grid;
   place-items: center;
   border-radius: 10px;
 }

 .integration-info {
   flex: 1;
 }

 .integration-name {
   font-weight: 700;
   color: #0f1724;
   font-size: 16px;
 }

 .integration-desc {
   font-size: 13px;
   color: #6b7280;
   margin-top: 4px;
 }

 /* Special card */
 .integration-card.view-all {
   justify-content: center;
   text-align: center;
   font-weight: 700;
   color: #0f1724;
   border: 1px dashed #e6eef8;
   background: #fafcff;
 }

 /* Icon Backgrounds */
 .int-bg-blue {
   background: linear-gradient(135deg, #eef6ff, #e8f0ff);
 }

 .int-bg-orange {
   background: linear-gradient(135deg, #fff7ed, #fff1e6);
 }

 .int-bg-green {
   background: linear-gradient(135deg, #ecfdf5, #e6fff0);
 }

 .int-bg-purple {
   background: linear-gradient(135deg, #f3e8ff, #efe6ff);
 }

 /* CTA */
 .integrations-cta {
   text-align: center;
   margin-top: 34px;
 }

 .btn-gradient {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   background: linear-gradient(90deg, #2563eb, #7c3aed);
   color: #fff;
   padding: 14px 22px;
   border-radius: 12px;
   font-weight: 700;
   text-decoration: none;
   box-shadow: 0 12px 30px rgba(37, 99, 235, 0.18);
 }

 .btn-gradient:hover {
   background: #0056b300;
   color: #0054a6 !important;
   border: 2px solid #0054a6;
   outline: none !important;
 }

 .hq-section {
   background: #fbfdff;
   padding: 56px 20px;
   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
 }

 .hq-container {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 32px;
   align-items: center;
 }

 /* Left */
 .hq-left {
   text-align: center;
   box-shadow: 0 10px 30px rgba(11, 27, 43, 0.3);
 }

 .hq-flag {
   width: 160px;
   height: 96px;
   border-radius: 12px;
   background: #fff;
   border: 1px solid #f1f5f9;
   box-shadow: 0 6px 20px rgba(15, 23, 36, 0.04);
   display: grid;
   place-items: center;
   margin: 0 auto;
 }

 .hq-flag svg {
   width: 140px;
   height: 84px;
   border-radius: 8px;
 }

 .hq-badge {
   font-weight: 700;
   color: #b91c1c;
   font-size: 16px;
   margin-top: 14px;
 }

 .hq-subtext {
   font-size: 13px;
   color: #6b7280;
   max-width: 260px;
   margin: 0 auto;
 }

 /* Right */
 .hq-eyebrow {
   text-transform: uppercase;
   color: #94a3b8;
   font-size: 12px;
   letter-spacing: 1px;
   margin-bottom: 8px;
 }

 .hq-title {
   font-size: 30px;
   line-height: 1.06;
   color: #0f1724;
   margin: 0 0 12px;
   font-weight: 600;
 }

 .hq-description {
   color: #475569;
   max-width: 760px;
   margin: 0 0 22px;
 }

 /* Features */
 .hq-features {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
   margin-top: 8px;
 }

 .hq-feature {
   background: #fff;
   border: 1px solid #eef2f7;
   border-radius: 12px;
   padding: 18px;
   box-shadow: 0 6px 18px rgba(15, 23, 36, 0.04);
   display: flex;
   align-items: flex-start;
   gap: 12px;
   transition: transform .15s ease, box-shadow .15s ease;
   cursor: default;
 }

 .hq-feature:focus,
 .hq-feature:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(15, 23, 36, 0.06);
   outline: none;
 }

 .hq-icon {
   width: 42px;
   height: 42px;
   border-radius: 10px;
   display: grid;
   place-items: center;
 }

 .hq-icon--green {
   background: linear-gradient(180deg, #ecfeff, #e6fffa);
 }

 .hq-icon--orange {
   background: linear-gradient(180deg, #fff7ed, #fff1e6);
 }

 .hq-icon--red {
   background: linear-gradient(180deg, #fff0f6, #fff7fb);
 }

 .hq-feature-title {
   font-weight: 800;
   color: #0f1724;
 }

 .hq-feature-text {
   font-size: 13px;
   color: #6b7280;
   margin-top: 6px;
 }

 /* CTA */
 .hq-cta {
   margin-top: 20px;
 }

 .hq-link {
   display: inline-block;
   padding: 10px 16px;
   border-radius: 10px;
   border: 1px solid #e6eef8;
   background: #fff;
   color: #0f1724;
   font-weight: 700;
   text-decoration: none;
   box-shadow: inset 0 -2px 0 rgba(15, 23, 36, 0.02);
 }

 /* Responsive */
 @media (max-width:880px) {
   .hq-container {
     grid-template-columns: 1fr;
     text-align: center;
   }

   .hq-right {
     text-align: left;
   }

   .hq-features {
     grid-template-columns: 1fr;
   }

   .hq-feature {
     text-align: left;
   }
 }

 .security-section {
   background: #fff;
   padding: 56px 20px;
   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
 }

 .security-container {
   max-width: 1200px;
   margin: 0 auto;
 }

 .security-header {
   /* max-width:880px; */
   margin: 0 auto 28px;
   text-align: left;
 }

 .security-eyebrow {
   text-transform: uppercase;
   color: #94a3b8;
   font-size: 12px;
   letter-spacing: 1px;
   margin-bottom: 8px;
 }

 .security-title {
   font-size: 32px;
   line-height: 1.06;
   color: #0f1724;
   margin: 0 0 12px;
   font-weight: 600;
 }

 .security-lead {
   font-size: 16px;
   line-height: 1.7;
   color: #475569;
   max-width: 72ch;
   margin: 0;
 }

 #integrations-title {
   margin: 0;
   font-size: 30px;
   line-height: 1.12;
   color: #0f1724;
   font-weight: 700;
 }

 /* Features */
 .security-features {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   align-items: stretch;
 }

 .security-feature {
   background: #fff;
   border: 1px solid #eef2f7;
   border-radius: 12px;
   padding: 26px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   transition: transform .16s ease, box-shadow .16s ease;
   outline: none;
 }

 .security-feature:hover,
 .security-feature:focus {
   transform: translateY(-8px);
   box-shadow: 0 22px 48px rgba(15, 23, 36, 0.08);
 }

 .security-icon {
   width: 88px;
   height: 88px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   margin-bottom: 14px;
   box-shadow: 0 6px 18px rgba(15, 23, 36, 0.04);
 }

 .security-icon--blue {
   background: linear-gradient(180deg, #eff6ff, #e6f0ff);
 }

 .security-icon--green {
   background: linear-gradient(180deg, #ecfdf5, #e6fff6);
 }

 .security-icon--orange {
   background: linear-gradient(180deg, #fff7ed, #fff2e8);
 }

 .security-icon--indigo {
   background: linear-gradient(180deg, #eef2ff, #e6f0ff);
 }

 .feature-title {
   font-size: 16px;
   font-weight: 800;
   color: #0f1724;
   margin: 0;
 }

 .feature-text {
   font-size: 14px;
   line-height: 1.6;
   color: #6b7280;
   margin: 10px 0 0;
   max-width: 18rem;
 }

 /* CTA */
 .security-cta {
   text-align: center;
   margin-top: 28px;
 }

 .security-link {
   display: inline-block;
   padding: 10px 18px;
   border-radius: 8px;
   background: linear-gradient(90deg, #2563eb, #7c3aed);
   color: #fff;
   font-weight: 700;
   text-decoration: none;
   box-shadow: 0 12px 30px rgba(37, 99, 235, 0.12);
 }

 /* Responsive */
 @media (max-width:980px) {
   .security-features {
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
   }

   .security-feature {
     padding: 20px;
   }
 }

 @media (max-width:560px) {
   .security-features {
     grid-template-columns: 1fr;
   }

   .security-title {
     font-size: 24px;
   }
 }


 #case-studies {
   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
   padding: 56px 20px;
   background: #fff;
 }

 .cs-wrap {
   margin: 0 auto;
   display: grid;
   gap: 20px;
 }

 .cs-header .kicker {
   color: #475569;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: 12px;
 }

 .cs-header h2 {
   font-size: 30px;
   margin: 6px 0;
   color: #07122a;
   font-weight: 600;
 }

 .cs-lead {
   color: #475569;
   max-width: 72ch;
   font-size: 15px;
   line-height: 1.6;
 }

 /* Grid */
 .grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   align-items: stretch;
 }

 @media (max-width:1100px) {
   .grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width:640px) {
   .grid {
     grid-template-columns: 1fr;
   }
 }

 /* Cards */
 .hcard {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   box-shadow: 0 14px 40px rgba(2, 6, 23, 0.06);
   transition: transform .18s ease, box-shadow .18s ease;
 }

 .hcard:hover,
 .hcard:focus-within {
   transform: translateY(-6px);
   box-shadow: 0 26px 60px rgba(2, 6, 23, 0.08);
 }

 .thumb {
   width: 100%;
   aspect-ratio: 16/9;
   position: relative;
   background: #f3f4f6;
   display: block;
   overflow: hidden;
 }

 .thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .6s ease;
   will-change: transform;
 }

 .hcard:hover .thumb img,
 .thumb:focus-within img {
   transform: scale(1.03);
 }

 /* Overlay */
 .overlayh {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 14px;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
   color: #fff;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .overlayh-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 18px;
 }

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

 .chip {
   background: rgba(255, 255, 255, 0.12);
   padding: 6px 10px;
   border-radius: 999px;
   font-weight: 700;
   font-size: 13px;
   color: #fff;
   backdrop-filter: blur(4px);
 }

 /* Card body */
 .hcard-body {
   padding: 18px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   height: 100%;
 }

 .hcard h3 {
   margin: 0;
   font-size: 18px;
   color: #07122a;
 }

 .hcard p {
   margin: 0;
   color: #475569;
   font-size: 14px;
   line-height: 1.6;
 }

 .hcard-actions {
   display: flex;
   gap: 12px;
   margin-top: auto;
 }

 /* Buttons */
 .btn-ghost,
 .btn-primary {
   padding: 10px 14px;
   border-radius: 10px;
   font-weight: 700;
   text-decoration: none;
   display: inline-block;
 }

 .btn-ghost {
   border: 1px solid #085de8;
   background: #fff;
   color: #07122a !important;
   outline: none !important;
 }

 .btn-ghost:hover {
   background: #f1f5f9;
   color: #085de8 !important;
   outline: none;
 }

 .btn-primary {
   background: linear-gradient(90deg, #1f6feb, #7c3aed);
   color: #fff;
 }

 /* CTA row */
 .cta-row {
   display: flex;
   justify-content: flex-start;
   margin-top: 6px;
   gap: 12px;
 }

 /* Modal */
 .cs-modal {
   border: none;
   border-radius: 12px;
   padding: 0;
   width: min(980px, 96%);
   box-shadow: 0 40px 120px rgba(2, 6, 23, 0.6);
 }

 .cs-modal::backdrop {
   background: rgba(2, 6, 23, 0.45);
 }

 .modal-inner {
   display: flex;
   flex-direction: column;
 }

 .modal-hero {
   width: 100%;
   aspect-ratio: 16/7;
   overflow: hidden;
   background: #eaeefb;
 }

 .modal-hero img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .modal-content {
   padding: 20px;
   display: grid;
   gap: 12px;
   background: #fff;
   border-radius: 0 0 12px 12px;
 }

 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .modal-controls {
   display: flex;
   gap: 8px;
   align-items: center;
 }

 .modal-close {
   background: transparent;
   border: 0;
   font-size: 26px;
   cursor: pointer;
   color: #475569;
 }

 .modal-actions {
   display: flex;
   gap: 12px;
   justify-content: flex-end;
 }

 #csModalBody {
   color: #475569;
   font-size: 15px;
   line-height: 1.6;
 }

 /* Focus styles */
 .hcard a:focus,
 .cs-modal button:focus {
   outline: none;
   box-shadow: 4px solid rgba(37, 99, 235, 0.12);
   border-radius: 8px;
 }

 /* Mobile modal hero */
 @media (max-width:640px) {
   .modal-hero {
     aspect-ratio: 3/1
   }
 }

 #why-axiever-user {
   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
   background: #fff;
   padding: 56px 20px;
   color: #0f1724;
 }

 .wrap {
   max-width: var(--maxw);
   margin: 0 auto;
   display: grid;
   gap: 0px;
 }

 .hero {
   display: block;
   margin-bottom: 6px;
 }

 .kicker {
   font-size: 12px;
   color: #475569;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 8px;
 }

 #why-user-title {
   margin: 0 0 8px;
   font-size: 28px;
   line-height: 1.04;
 }

 .sub {
   margin: 0;
   color: #475569;
   max-width: 68ch;
   font-size: 15px;
   line-height: 1.6;
 }

 /* Benefits */
 .benefits {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 18px;
 }

 @media (max-width:920px) {
   .benefits {
     grid-template-columns: 1fr;
   }
 }

 .benefit {
   background: #fff;
   border: 1px solid #eef2f7;
   border-radius: 12px;
   padding: 18px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   transition: box-shadow .14s ease, transform .14s ease;
 }

 .benefit:hover,
 .benefit:focus-within {
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(15, 23, 36, 0.06);
 }

 .benefit-header {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .icon {
   width: 56px;
   height: 56px;
   border-radius: 10px;
   display: grid;
   place-items: center;
   background: linear-gradient(180deg, #eef6ff, #e8f0ff);
   flex: 0 0 56px;
 }

 .benefit h3 {
   margin: 0;
   font-size: 18px;
   color: #071123;
   font-weight: 800;
 }

 .benefit p {
   margin: 0;
   color: #475569;
   font-size: 14px;
   line-height: 1.6;
 }

 .metric {
   margin-top: 8px;
   font-weight: 900;
   color: #071123;
 }

 /* CTA buttons */
 .cta-row {
   display: flex;
   gap: 12px;
   align-items: center;
   margin-top: 18px;
 }

 .btn-primary,
 .btn-secondary {
   border-radius: 10px;
   font-weight: 700;
   text-decoration: none;
   display: inline-block;
 }

 .btn-primary {
   background: #1f6feb;
   color: #fff;
   padding: 12px 18px;
   box-shadow: 0 12px 30px rgba(31, 111, 235, 0.14);
 }

 .btn-secondary {
   background: transparent;
   border: 1px solid #eef2f7;
   padding: 10px 14px;
   color: #071123;
 }

 /* Trust row */
 .trust {
   margin-top: 14px;
   color: #475569;
   font-size: 13px;
   display: flex;
   gap: 12px;
   align-items: center;
   flex-wrap: wrap;
 }

 .trust .divider {
   width: 1px;
   height: 14px;
   background: #eef2f7;
   display: inline-block;
 }

 /* Focus ring */
 .benefit:focus-within,
 .btn-primary:focus,
 .btn-secondary:focus {
   outline: none;
   box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
   border-radius: 8px;
 }

 .blog-section {
   padding: 56px 20px;
   background: #f9fafb;
   font-family: Inter, system-ui, sans-serif;
   color: #0f172a;
 }



 .eyebrow {
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #475569;
   margin-bottom: 8px;
 }

 .blog-title {
   font-size: 28px;
   margin: 0 0 28px;
 }

 .blog-grid {
   display: grid;
   gap: 24px;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 }

 .blog-card {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
   display: flex;
   flex-direction: column;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .blog-card:hover,
 .blog-card:focus-within {
   transform: translateY(-6px);
   box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
 }

 .blog-card img {
   width: 100%;
   height: auto;
   object-fit: cover;
   padding: 12px;
 }

 .card-body h3 {
   margin: 0;
   font-size: 17px;
   color: #0f1724;
   font-weight: 600;
   margin-bottom: 10px;
 }

 .card-body p {
   margin: 0;
   color: #6b7280;
   font-size: 14px;
   line-height: 1.6;
   margin-bottom: 15px;
 }

 .hcard-body {
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .hcard-body h3 {
   font-size: 18px;
   margin: 0;
   font-weight: 600;
 }

 .hcard-body p {
   font-size: 14px;
   color: #475569;
   margin: 0;
   line-height: 1.6;
 }

 .btn {
   color: #1f6feb;
   font-weight: 600;
   text-decoration: none;
   /* margin-top: auto; */
   transition: color 0.2s;
 }

 .btn:hover,
 .btn:focus {
   color: #174ea6;
 }

 /* :root {
    --maxw: 1100px;
    --text: #0f1724;
    --muted: #6b7280;
    --border: #eef2f7;
    --radius: 12px;
    --transition: 200ms cubic-bezier(.2,.9,.3,1);
  } */

 .faq-section {
   font-family: Inter, system-ui, sans-serif;
   background: #fff;
   padding: 56px 20px;
 }

 .faq-wrap {
   max-width: var(--maxw);
   margin: 0 auto;
   display: grid;
   gap: 18px;
 }

 .kicker {
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #475569;
   margin-bottom: 8px;
 }

 #faq-title {
   margin: 0;
   font-size: 32px;
   color: #07122a;
 }

 .faq-lead {
   color: #475569;
   font-size: 15px;
   max-width: 72ch;
   line-height: 1.6;
   margin-top: 10px;
 }

 .faq-list {
   display: grid;
   gap: 12px;
   margin-top: 12px;
 }

 .faq-item {
   border-radius: 12px;
   border: 1px solid #eef2f7;
   background: #fff;
   box-shadow: 0 6px 18px rgba(15, 23, 36, 0.02);
   overflow: hidden;
 }

 .faq-question {
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100%;
   padding: 16px 18px;
   cursor: pointer;
   border: 0;
   background: transparent;
   text-align: left;
   font-weight: 700;
   font-size: 16px;
   color: #07122a;
 }

 .faq-question .chev {
   transition: transform 200ms cubic-bezier(.2, .9, .3, 1);
   opacity: 0.9;
   flex: 0 0 22px;
 }

 .faq-question:focus {
   outline: none;
   box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
   border-radius: 10px;
 }

 .faq-answer {
   max-height: 0;
   overflow: hidden;
   padding: 0 18px;
   transition: max-height 200ms cubic-bezier(.2, .9, .3, 1), padding 200ms cubic-bezier(.2, .9, .3, 1);
   color: #475569;
   font-size: 15px;
   line-height: 1.7;
   text-align: left;
 }

 .faq-item[aria-expanded="true"] .faq-answer {
   padding: 14px 18px 18px;
   max-height: 600px;
 }

 .faq-item[aria-expanded="true"] .chev {
   transform: rotate(180deg);
 }

 @media (max-width: 720px) {
   #faq-title {
     font-size: 26px;
   }
 }



 /* Section wrapper */
 .contact-section {
   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
   background: #fff;
   padding: 60px 20px;
 }

 /* Container */
 .contact-wrap {
   max-width: var(--maxw);
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 28px;
 }

 /* Header */
 .contact-head {
   text-align: center;
   max-width: 720px;
   margin: 0 auto;
 }

 .contact-kicker {
   font-size: 13px;
   text-transform: uppercase;
   color: #475569;
   letter-spacing: 1px;
   margin-bottom: 6px;
 }

 .contact-head h2 {
   margin: 0;
   font-size: 30px;
   color: #071123;
   line-height: 1.15;
   font-weight: 600;
 }

 .contact-lead {
   margin-top: 10px;
   color: #475569;
   max-width: 60ch;
   font-size: 15px;
   line-height: 1.6;
 }

 /* Actions */
 .contact-actions {
   display: flex;
   gap: 14px;
   justify-content: center;
   margin-top: 18px;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 42px;
   border-radius: 10px;
   text-decoration: none;
   font-weight: 700;
   transition: all 0.25s ease;
 }

 .btn-demo {
   background: #1f6feb;
   color: #fff;
   min-width: 200px;
   font-weight: 800;
   box-shadow: 0 10px 24px rgba(37, 99, 235, 0.15);
 }

 .btn-demo:hover {
   background: #1e4fc8;
 }

 .btn-chat {
   background: #fff;
   border: 1px solid rgba(15, 23, 36, 0.08);
   color: #071123;
   min-width: 160px;
 }

 .btn-chat:hover {
   background-color: #fff;
   border-color: #1f6feb;
   color: #1f6feb;
 }

 /* Mini contact info */
 .contact-mini {
   display: flex;
   gap: 32px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 14px;
 }

 .contact-mini div {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   color: #475569;
 }

 .contact-mini a {
   color: #475569;
   text-decoration: none;
   font-weight: 600;
 }

 .contact-mini a:hover {
   color: #1f6feb;
 }

 /* Trust line */
 .contact-trust {
   text-align: center;
   color: #475569;
   font-size: 13px;
   margin-top: 10px;
 }

 /* Chat FAB */
 .chat-fab {
   position: fixed;
   right: 20px;
   bottom: 20px;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   border: none;
   cursor: pointer;
   background: linear-gradient(180deg, #2563eb, #7c3aed);
   display: grid;
   place-items: center;
   box-shadow: 0 12px 32px rgba(15, 23, 36, 0.18);
 }

 .chat-fab .icon {
   stroke: #fff;
   stroke-width: 1.6;
   fill: none;
 }

 .chat-fab:focus {
   outline: 4px solid rgba(37, 99, 235, 0.12);
 }

 /* Icons */
 .cicon {
   width: 18px;
   height: 18px;
   stroke: #94a3b8;
   stroke-width: 1.4;
   fill: none;
 }

 /* Responsive */
 @media (max-width: 720px) {

   .contact-head h2,
   .industries-intro h2 {
     font-size: 26px;
   }

   .contact-actions {
     flex-direction: column;
     align-items: center;
     gap: 10px;
   }

   .btn-demo,
   .btn-chat {
     width: 100%;
     max-width: 280px;
   }

   .contact-mini {
     gap: 18px;
     margin-top: 12px;
   }

   .actions {
     flex-direction: column;
     align-items: center;
     gap: 10px;
   }
 }

 /* home slider */
 /* Right slider */
 .right-slider {
   flex: 1;
   position: relative;
   overflow: hidden;
   border-radius: 8px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 }

 .right_slides {
   display: flex;
   width: 100%;
   transition: transform 0.6s ease-in-out;
 }

 .right_slides img {
   width: 100%;
   flex-shrink: 0;
   object-fit: cover;
 }

 /* Navigation buttons */
 .nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.5);
   color: #fff;
   border: none;
   padding: 4px 15px;
   cursor: pointer;
   border-radius: 50%;
   z-index: 2;
 }

 .nav-btn:hover {
   background: rgba(0, 0, 0, 0.7);
 }

 .prev {
   left: 15px;
 }

 .next {
   right: 15px;
 }

 /* Dot indicators */
 .right_slides_dots {
   position: absolute;
   bottom: 15px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 8px;
   z-index: 2;
 }

 .dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.6);
   cursor: pointer;
   transition: background 0.3s;
 }

 .dot.active {
   background: #fff;
 }

 /*solution page customer rahat/

  /* SECTION LAYOUT */
 .ax-hero-improved {
   font-family: Inter, system-ui, Segoe UI, Roboto, Arial;
   color: #05203a;
   position: relative;
   overflow: hidden;
 }

 .ax-hero-inner {
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 460px;
   gap: 36px;
   align-items: center;
 }

 @media (max-width:1024px) {
   .ax-hero-inner {
     grid-template-columns: 1fr;
     gap: 22px;
     padding: 18px 12px;
   }

   .ax-right {
     order: -1;
   }
 }

 /* LEFT text */

 #ax-hero-title {
   font-size: 36px;
   line-height: 1.02;
   margin: 0 0 14px;
   font-weight: 800;
 }

 .ax-sub {
   color: #6b7280;
   font-size: 16px;
   max-width: 700px;
   line-height: 1.5;
   margin: 0 0 20px;
 }

 /* CTAs */
 .ax-ctas {
   display: flex;
   gap: 12px;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
   border-radius: 12px;
   text-decoration: none;
   font-weight: 700;
   cursor: pointer
 }

 .btn-primary {
   background: linear-gradient(180deg, #0b66ff, #0556d6);
   color: #fff;
   box-shadow: 0 12px 30px rgba(11, 102, 255, 0.14);
 }

 .btn-outline {
   background: transparent;
   border: 2px solid rgba(11, 102, 255, 0.12);
   color: #0b66ff;
   padding: 8px 14px;
 }

 /* RIGHT decorative area */
 .ax-right {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
 }

 .glass-card {
   width: 100%;
   max-width: 420px;
   /* height: 220px; */
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 26px 60px rgba(2, 30, 70, 0.06);
   border: 1px solid rgba(10, 30, 80, 0.04);
   background: rgba(255, 255, 255, 0.86);
   display: block;
 }

 .glass-bg {
   width: 100%;
   height: 100%;
   display: block;
   pointer-events: none;
 }

 .funnel-block {
   display: flex;
   align-items: center;
   gap: 16px;
 }

 .funnel-svg {
   width: 86px;
   height: 110px;
   display: block;
 }

 .funnel-svg .layer {
   fill: #e8f1ff;
   stroke: rgba(6, 80, 255, 0.06);
   transition: transform .9s ease, fill .9s ease;
 }

 .funnel-svg .top {
   fill: rgba(6, 80, 255, 0.16);
 }

 .funnel-svg .mid {
   fill: rgba(6, 120, 200, 0.12);
 }

 .funnel-svg .low {
   fill: rgba(6, 160, 140, 0.10);
 }

 .funnel-svg .out {
   fill: rgba(0, 120, 80, 0.12);
 }

 .funnel-text {
   display: flex;
   flex-direction: column;
   gap: 8px;
   font-size: 13px;
   color: #6b7280;
 }

 .funnel-text strong {
   color: #05203a;
   font-size: 13px;
   display: block;
 }

 .funnel-text span {
   font-size: 12px;
   color: #6b7280;
   display: block;
   margin-top: 2px;
 }

 @keyframes nudge {
   0% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-6px);
   }

   100% {
     transform: translateY(0);
   }
 }

 .funnel-svg .top {
   animation: nudge 5s ease-in-out infinite;
 }

 .funnel-svg .mid {
   animation: nudge 4s ease-in-out infinite;
 }

 .funnel-svg .low {
   animation: nudge 3s ease-in-out infinite;
 }

 /* STICKY CTA (auto-show after hero) */
 .sticky-cta {
   position: fixed;
   right: 18px;
   bottom: 18px;
   z-index: 140;
   background: #0b66ff;
   color: #fff;
   padding: 10px 14px;
   border-radius: 999px;
   font-weight: 800;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   box-shadow: 0 14px 36px rgba(2, 40, 120, 0.18);
   transform: translateY(0);
   transition: opacity .18s ease, transform .18s ease;
   opacity: 0;
   pointer-events: none;
 }

 .sticky-cta.visible {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(-6px);
 }

 @media (max-width:520px) {
   .sticky-cta {
     right: 12px;
     bottom: 12px;
     padding: 9px 12px;
     font-size: 14px;
   }
 }

 /* responsive */
 @media (max-width:640px) {
   #ax-hero-title {
     font-size: 22px;
   }

   .ax-sub {
     font-size: 15px;
   }

   .ax-ctas {
     flex-wrap: wrap;
   }

   .ax-right {
     justify-content: flex-start;
   }

   .glass-card {
     height: 160px;
   }

   .funnel-svg {
     width: 74px;
     height: 94px;
   }
 }

 .ax-ch-card {
   background: #fff;
   border-radius: 14px;
   padding: 20px;
   border: 1px solid rgba(10, 30, 80, 0.06);
   box-shadow: 0 14px 34px rgba(9, 24, 60, 0.05);
   display: flex;
   gap: 14px;
   align-items: flex-start;
   transition: transform .2s ease, box-shadow .2s ease;
 }

 .ax-ch-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 20px 40px rgba(9, 24, 60, 0.08);
 }

 .ax-ch-icon {
   flex: 0 0 48px;
   height: 48px;
   border-radius: 12px;
   background: linear-gradient(180deg, #f7fbff, #ffffff);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   box-shadow: 0 6px 16px rgba(6, 30, 70, 0.06);
 }

 .ax-ch-title {
   font-weight: 800;
   color: #0b2f4a;
   font-size: 16px;
   margin-bottom: 6px;
 }

 .ax-ch-text {
   color: #374151;
   font-size: 14.5px;
   line-height: 1.6;
 }

 @media (max-width:1000px) {
   .ax-challenge-grid {
     grid-template-columns: repeat(2, 1fr) !important;
   }
 }

 @media (max-width:640px) {
   .ax-challenge-grid {
     grid-template-columns: 1fr !important;
   }

   #ax-customer-challenges {
     padding: 36px 14px;
   }
 }

 .ax-automation {
   font-family: Inter, system-ui, Segoe UI, Roboto, Arial;
   color: #06202e;
 }

 .ax-inner {
   max-width: 1200px;
   margin: 0 auto;
   text-align: center;
 }

 .ax-title {
   font-size: 28px;
   margin: 0 0 6px;
   font-weight: 800;
   color: #0b2f4a;
 }

 .ax-sub {
   color: #56646f;
   margin: 0 0 28px;
   font-size: 15px;
 }

 .ax-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 18px;
   align-items: start;
 }

 @media (max-width:1000px) {
   .ax-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width:640px) {
   .ax-grid {
     grid-template-columns: 1fr;
   }
 }

 .ax-card_r {
   background: linear-gradient(180deg, #fff, #fbfdff);
   border-radius: 14px;
   padding: 20px;
   box-shadow: 0 18px 44px rgba(9, 24, 60, 0.06);
   border: 1px solid rgba(10, 30, 80, 0.04);
   text-align: left;
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-height: 220px;
   opacity: 0;
   transform: translateY(12px);
   transition: transform .55s cubic-bezier(.2, .9, .2, 1), opacity .5s ease, box-shadow .18s ease;
 }

 .ax-card_r.in-view {
   opacity: 1;
   transform: none;
 }

 .ax-card_r:hover {
   transform: translateY(-8px);
   box-shadow: 0 28px 64px rgba(6, 30, 80, 0.12);
 }

 .ax-icon {
   width: 64px;
   height: 64px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 6px;
 }

 .ax-card_r-title {
   font-size: 18px;
   margin: 0;
   color: #0b2f4a;
   font-weight: 800;
 }

 .ax-bullets {
   margin: 0px 0 0;
   padding-left: 18px;
   color: #465a66;
   font-size: 13px;
   line-height: 1.6;
 }

 .ax-bullets li {
   margin: 5px 0;
 }

 .ax-learn {
   display: inline-block;
   margin-top: auto;
   color: #0b66ff;
   font-weight: 800;
   text-decoration: none;
   font-size: 14px;
 }

 .ax-learn:hover {
   text-decoration: underline;
 }

 .ax-cta {
   margin-top: 28px;
   text-align: center;
 }

 .ax-primary {
   display: inline-block;
   background: linear-gradient(180deg, #0b66ff, #0758d6);
   color: #fff !important;
   padding: 12px 18px;
   border-radius: 12px;
   text-decoration: none;
   font-weight: 800;
   box-shadow: 0 18px 44px rgba(11, 102, 255, 0.12);
   border: 2px solid #0758d6;
   cursor: pointer;
 }

 .ax-primary:hover {
   background: transparent;
   color: #0758d6 !important;
   border: 2px solid #0758d6;
 }

 /* small tweaks for mobile */
 @media (max-width:480px) {
   .ax-card_r {
     min-height: auto;
     padding: 16px;
   }

   .ax-icon {
     width: 56px;
     height: 56px;
   }

   .ax-card_r-title {
     font-size: 16px;
   }

   .ax-bullets {
     font-size: 13px;
   }
 }

 .ax-container {
   max-width: 1200px;
   margin: 0 auto;
   text-align: center;
 }

 #ax-workflow-final-title {
   font-size: 28px;
   margin-bottom: 50px;
   font-weight: 800;
   color: #263238;
 }

 .ax-steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   align-items: start;
   margin-bottom: 12px;
 }

 .ax-step {
   position: relative;
   padding: 12px 8px;
   min-height: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
   cursor: pointer;
 }

 .ax-badge {
   position: absolute;
   left: 50%;
   top: -12px;
   transform: translateX(-50%);
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #2b9fff;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   box-shadow: 0 8px 22px rgba(11, 102, 255, 0.12);
 }

 .ax-icon {
   font-size: 22px;
   width: 64px;
   height: 64px;
   border-radius: 14px;
   background: linear-gradient(180deg, #fff, #f6fbff);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 20px rgba(6, 30, 70, 0.06);
   margin: 12px 0;
 }

 .ax-icon-green {
   background: linear-gradient(180deg, #fff, #f6fffb);
 }

 .ax-icon-yellow {
   background: linear-gradient(180deg, #fff8ea, #fff);
 }

 .ax-icon-purple {
   background: linear-gradient(180deg, #fff6ff, #fff);
 }

 .ax-pill {
   padding: 10px 20px;
   border-radius: 14px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 10px;
 }

 .ax-pill-blue {
   background: linear-gradient(180deg, #4ba3ff, #2b9fff);
 }

 .ax-pill-green {
   background: linear-gradient(180deg, #6fe0c6, #2fcfa6);
 }

 .ax-pill-yellow {
   background: linear-gradient(180deg, #ffc67d, #f5a623);

 }

 .ax-pill-purple {
   background: linear-gradient(180deg, #b57bff, #9b4bff);
 }

 .ax-desc {
   max-width: 260px;
   color: #55646f;
   margin: 0;
   font-size: 14px;
   line-height: 1.6;
   padding: 0 6px;
 }

 /* Converge lines */
 .ax-lines {
   display: flex;
   justify-content: center;
   gap: 14px;
   margin-top: 6px;
 }

 .ax-line {
   display: inline-block;
   width: 44px;
   height: 6px;
   border-radius: 6px;
   box-shadow: 0 6px 18px rgba(6, 30, 80, 0.06);
 }

 .ax-line-blue {
   background: #4ba3ff;
 }

 .ax-line-green {
   background: #6fe0c6;
 }

 .ax-line-yellow {
   background: #f5a623;
 }

 .ax-line-purple {
   background: #9b4bff;
 }

 /* Surveys */
 .ax-survey {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 12px;
 }

 #ax-survey-click {
   display: flex;
   flex-direction: column;
   align-items: center;
   cursor: pointer;
 }

 .ax-survey-icon {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
   margin-bottom: -22px;
   z-index: 2;
 }

 .ax-survey-box {
   background: linear-gradient(135deg, #e53935, #c62828);
   color: #fff;
   padding: 6px 16px;
   border-radius: 14px;
   /* box-shadow: 0 14px 40px rgba(198, 40, 40, 0.2); */
   max-width: 680px;
   text-align: center;
   animation: fadeUp 0.8s ease;
   margin-top: 10px;
 }

 .ax-survey-title {
   font-weight: 800;
   font-size: 18px;
   margin-bottom: 6px;
 }

 .ax-survey-desc {
   font-size: 14px;
   opacity: 0.95;
 }

 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(10px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* Responsive */
 @media (max-width: 768px) {
   .ax-steps {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 480px) {
   .ax-steps {
     grid-template-columns: 1fr;
   }
 }

 /* Why choose */

 .why .section {
   background: linear-gradient(180deg, #fff, #fff);
   border-radius: var(--radius-xl);
   padding: 28px;
   box-shadow: var(--shadow-lg);
   border: 1px solid rgba(11, 27, 43, 0.04)
 }

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

 .why .badge-ax {
   min-width: 46px;
   height: 46px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   font-weight: 900;
   color: #044a63;
   background: linear-gradient(180deg, #f0fbff, rgba(0, 123, 255, 0.06));
   border: 1px solid rgba(6, 95, 115, 0.06)
 }

 .why .item {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   min-height: 110px
 }

 .card-ax {
   background: #ffffff;
   padding: 18px;
   border-radius: 18px;
   box-shadow: 0 6px 18px rgba(11, 27, 43, 0.06);
   border: 1px solid rgba(11, 27, 43, 0.04)
 }

 #why1,
 #why2,
 #why3 {
   font-size: 20px;
   margin: 0 0 6px;
   font-weight: 800;
 }

 .why-wrap {
   flex-wrap: wrap;
 }

 .why-flex {
   display: flex;
   gap: 20px;
 }

 #supplier-why {
   font-size: clamp(20px, 3.2vw, 28px);
   margin: 0 0 8px;
   font-weight: 900;
 }

 @media (max-width: 980px) {
   .why .grid {
     grid-template-columns: 1fr;
   }
 }

 /* Feature cards */
 .features-wrap {
   padding: 0 20px
 }

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

 .feature-card {
   background: linear-gradient(180deg, #fff, #fff);
   border-radius: 18px;
   padding: 18px;
   box-shadow: 0 8px 20px rgba(2, 6, 23, 0.04);
   display: flex;
   gap: 14px;
   align-items: flex-start;
   position: relative;
   overflow: hidden;
   min-height: 86px;
   transition: transform .22s cubic-bezier(.2, .9, .2, 1), box-shadow .22s;
   opacity: 0;
   transform: translateY(8px) scale(.995)
 }

 .feature-card.show {
   opacity: 1;
   transform: none
 }

 .feature-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 48px rgba(2, 6, 23, 0.08)
 }

 .feature-card .icon {
   min-width: 50px;
   min-height: 50px;
   border-radius: 12px;
   background: rgba(0, 123, 255, 0.06);
   display: grid;
   place-items: center;
   color: #007bff;
   font-size: 20px
 }

 .feature-card.integration {
   grid-column: 1 / -1;
   justify-content: space-between
 }

 /* Infographic: Pipeline */
 .pipe .panel-ax {
   position: relative;
   margin-top: 14px;
   border-radius: var(--radius-xl);
   background: #fff;
   box-shadow: 0 10px 26px rgba(8, 20, 52, .08);
   border: 1px solid #e6eaf3;
   padding: 34px 20px
 }

 .pipe .pipeline {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap
 }

 .pipe .stage {
   flex: 1;
   min-width: 150px;
   text-align: center;
   margin: 10px 0
 }

 .pipe .icon {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: #f6f8ff;
   border: 2px solid #dfe7ff;
   margin: 0 auto 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   color: #2f72ff;
   box-shadow: 0 4px 12px rgba(47, 114, 255, .12)
 }

 .pipe .title {
   font-weight: 900;
   font-size: 15px;
   color: #14234d;
   margin: 4px 0
 }

 .pipe .desc-sp {
   font-size: 13px;
   color: #54617f;
   max-width: 200px;
   margin: 0 auto
 }

 .pipe .connector {
   flex: 0 0 25px;
   height: 2px;
   background: linear-gradient(90deg, #bcd2ff, #2f72ff);
   position: relative;
   margin: 0 10px;
   border-radius: 2px
 }

 .pipe .connector::after {
   content: "▶";
   position: absolute;
   right: -14px;
   top: -14px;
   color: #2f72ff;
   font-size: 20px
 }

 /* Infographic: 3-step */
 .steps .panel-ra {
   border: 1px solid #e6eaf3;
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 10px 26px rgba(8, 20, 52, .08);
   overflow: hidden
 }

 .steps .track {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   padding: 34px;
   position: relative
 }

 .steps .line {
   position: absolute;
   top: 56px;
   left: calc(34px + 44px);
   right: calc(34px + 44px);
   height: 4px;
   border-radius: 3px;
   background: #e9efff
 }

 .steps .fill {
   position: absolute;
   inset: 0;
   width: 0;
   background: linear-gradient(90deg, #bcd2ff, #2f72ff);
   border-radius: 3px;
   transition: width 1.4s cubic-bezier(.2, .8, .2, 1)
 }

 .steps .step {
   display: flex;
   gap: 14px;
   background: #fff;
   border: 1px solid #e6eaf3;
   border-radius: 16px;
   padding: 16px 18px;
   box-shadow: 0 8px 22px rgba(18, 38, 90, .06);
   align-items: flex-start
 }

 .steps .num {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: linear-gradient(180deg, #eef3ff, #fff);
   border: 1px solid #dfe7ff;
   display: grid;
   place-items: center;
   font-weight: 900;
   color: #17357b
 }

 .steps .title {
   margin: 0 0 4px;
   font-size: 16px;
   font-weight: 900;
   color: #15224f
 }

 .steps .desc-sp {
   margin: 0;
   color: #4b5a83;
   font-size: 13px
 }

 .steps .hint {
   margin: 10px 0 0;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 10px;
   border-radius: 999px;
   border: 1px solid #e6ecf7;
   background: #f7f9ff;
   color: #1f2a55;
   font-weight: 800;
   font-size: 11px
 }

 /* Automations flowline */
 .autos .panel-sp {
   border: 1px solid #e6eaf3;
   border-radius: var(--radius-xl);
   background: #fff;
   box-shadow: 0 10px 26px rgba(8, 20, 52, .08);
   overflow: hidden
 }

 .autos .head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px;
   padding: 22px 24px;
   border-bottom: 1px solid #e6eaf3;
   background: linear-gradient(180deg, #fbfdff, #fff)
 }

 .autos .grid-wrap {
   position: relative
 }

 .autos .grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   padding: 24px
 }

 .autos .card-sp {
   display: flex;
   gap: 14px;
   align-items: center;
   background: #fff;
   border: 1px solid #e6eaf3;
   border-radius: 16px;
   padding: 14px 16px;
   box-shadow: 0 8px 22px rgba(18, 38, 90, .06)
 }

 .autos .ico {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   background: #f6f8ff;
   border: 1px solid #dfe7ff;
   display: grid;
   place-items: center;
   box-shadow: 0 10px 24px rgba(47, 114, 255, .12)
 }

 .autos .title {
   margin: 0;
   font-weight: 900;
   font-size: 16px;
   color: #15224f
 }

 .autos .desc-sp {
   margin: 2px 0 0;
   color: #4b5a83;
   font-size: 13px
 }

 .autos .flow {
   position: absolute;
   inset: 0;
   pointer-events: none
 }

 .autos .flow path {
   stroke: #bcd2ff;
   stroke-width: 2;
   fill: none
 }

 .autos .pulse {
   stroke: url(#grad);
   stroke-width: 3;
   stroke-dasharray: 10 10;
   opacity: 0
 }

 .autos .animate .pulse {
   animation: dash 2.8s linear infinite;
   opacity: 1
 }

 @keyframes dash {
   to {
     stroke-dashoffset: -120
   }
 }

 /* Responsive */
 @media (max-width:980px) {
   .why .grid {
     grid-template-columns: 1fr
   }

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

   .steps .track {
     grid-template-columns: 1fr
   }

   .steps .line {
     display: none
   }

   .autos .grid {
     grid-template-columns: 1fr
   }

   .calc .grid {
     grid-template-columns: 1fr
   }

   header.hero {
     flex-direction: column
   }
 }

 @media (max-width:640px) {
   .features-grid {
     grid-template-columns: 1fr
   }
 }

 /* ---------- HERO ---------- */
 .hero-inv {
   display: grid;
   grid-template-columns: 1fr 460px;
   gap: 24px;
   align-items: center;
   padding: 0px;
   border-radius: 14px;
 }

 .eyebrow {
   display: inline-block;
   background: linear-gradient(90deg, #0561a5, #0b84d6);
   color: #fff;
   padding: 8px 14px;
   border-radius: 999px;
   font-weight: 700;
   margin-bottom: 14px
 }

 .lead {
   font-size: 17px;
   color: #334556;
   margin-bottom: 18px
 }

 .cta-row {
   display: flex;
   gap: 12px;
   flex-wrap: wrap
 }

 .btn {
   background: #0561a5;
   color: #fff;
   padding: 12px 18px;
   border: 0;
   border-radius: 10px;
   font-weight: 700;
   cursor: pointer;
   box-shadow: 0 8px 20px rgba(5, 97, 165, 0.12)
 }

 .btn-secondary {
   background: transparent;
   border: 2px solid rgba(5, 97, 165, 0.08);
   padding: 10px 16px;
   border-radius: 10px;
   color: #0561a5;
   font-weight: 700
 }

 .hero-fig {
   background: #fff;
   padding: 16px;
   border-radius: 12px;
   border: 1px solid #eef4fb;
   box-shadow: 0 12px 30px rgba(12, 36, 70, 0.03);
   text-align: center
 }

 .hero-fig img {
   max-width: 100%;
   border-radius: 8px
 }

 .why-card-inv {
   background: #fff;
   border: 1px solid #eef6fb;
   border-radius: 14px;
   padding: 22px;
   box-shadow: 0 8px 22px rgba(12, 36, 70, 0.04);
   transition: all .3s ease;
   text-align: left;
 }

 .why-card-inv:hover {
   transform: translateY(-6px);
   box-shadow: 0 14px 34px rgba(5, 97, 165, 0.12);
   border-color: #d6ecf8;
 }

 .why-icon {
   width: 54px;
   height: 54px;
   border-radius: 12px;
   background: linear-gradient(135deg, #e6f5ff, #f7fbff);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 14px;
   box-shadow: inset 0 2px 6px rgba(5, 97, 165, 0.08);
 }

 .why-card-inv h3 {
   margin: 0 0 8px;
   font-size: 18px;
   color: #042a3c;
 }

 .why-card-inv p {
   margin: 0 0 14px;
   color: #495a63;
   font-size: 14.5px;
   line-height: 1.55;
 }

 .why-metric {
   font-size: 13px;
   font-weight: 800;
   color: #0561a5;
   background: #f2faff;
   padding: 6px 10px;
   border-radius: 8px;
   display: inline-block;
 }

 /* VIDEO */
 .video-wrap {
   max-width: 100%;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid #eef4fb;
   box-shadow: var(--shadow)
 }

 .video-wrap iframe {
   width: 100%;
   height: 420px;
   border: 0
 }

 /* RESPONSIVE */
 @media (max-width:980px) {
   .hero-inv {
     grid-template-columns: 1fr
   }

   .features {
     grid-template-columns: 1fr 1fr
   }

   .case-grid {
     grid-template-columns: 1fr
   }

   .flow {
     flex-direction: column
   }

   .auto-grid {
     grid-template-columns: 1fr
   }
 }

 @media (max-width:640px) {
   .features {
     grid-template-columns: 1fr
   }

   .hero-fig {
     order: 0;
     margin-bottom: 18px
   }

   .video-wrap iframe {
     height: 240px
   }
 }

 /* Section container */
 .workflow_int {
   display: flex;
   flex-direction: column;
   gap: 40px;
   font-family: "Inter", sans-serif;
 }

 /* Grid rows */
 .wf-row {
   display: grid;
   grid-template-columns: 520px 1fr;
   gap: 28px;
   align-items: stretch;
 }

 .wf-row.reverse {
   grid-template-columns: 1fr 520px;
 }

 /* Image block */
 .wf-image {
   margin: 0;
   position: relative;
   border-radius: 14px;
   overflow: hidden;
   border: 1px solid #eef6fb;
   box-shadow: 0 18px 40px rgba(12, 36, 70, 0.04);
 }

 .wf-image img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
 }

 /* Overlay labels */
 .wf-label {
   position: absolute;
   left: 16px;
   bottom: 16px;
   background: linear-gradient(90deg, #0561a5, #0b84d6);
   color: #fff;
   padding: 10px 14px;
   border-radius: 10px;
   font-weight: 800;
   box-shadow: 0 10px 30px rgba(5, 97, 165, 0.12);
   min-width: 180px;
 }

 .wf-label-sub {
   font-size: 12px;
   opacity: 0.95;
 }

 .wf-label-main {
   font-size: 15px;
   margin-top: 4px;
   line-height: 1.05;
 }

 /* Impact overlay (white version) */
 .wf-impact {
   position: absolute;
   left: 16px;
   bottom: 16px;
   background: #ffffff;
   border-radius: 10px;
   padding: 8px 10px;
   border: 1px solid #eef6fb;
   font-weight: 800;
   font-size: 13px;
   color: #023a58;
   box-shadow: 0 8px 20px rgba(12, 36, 70, 0.04);
   min-width: 150px;
 }

 .wf-impact-label {
   font-size: 12px;
   color: #6a7b86;
 }

 .wf-impact-value {
   font-size: 16px;
   color: #0561a5;
   margin-top: 4px;
 }

 /* Text block */
 .wf-content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 6px 0;
 }

 .wf-content h3 {
   font-size: 30px;
    margin: 0 0 10px;
    color: #05263c;
    font-weight: 600;
 }

 .wf-content p {
   margin: 0 0 14px;
   color: #455a64;
   font-size: 15px;
   line-height: 1.55;
 }

 .wf-content ul {
   margin: 0 0 18px;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 10px;
   color: #263238;
   font-size: 15px;
 }

 .wf-content li {
   display: flex;
   gap: 12px;
   align-items: flex-start;
 }

 /* Buttons */
 .wf-buttons {
   display: flex;
   gap: 12px;
   align-items: center;
 }

 .wf-btn-primary {
   background: #0561a5;
   color: #fff;
   padding: 10px 14px;
   border-radius: 10px;
   text-decoration: none;
   font-weight: 800;
   box-shadow: 0 10px 30px rgba(5, 97, 165, 0.08);
 }

 .wf-btn-link {
   color: #0561a5;
   font-weight: 700;
   text-decoration: none;
   font-size: 14px;
 }

 /* Compact cards */
 .wf-extras {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
 }

 .wf-card {
   background: #fff;
   border: 1px solid #eef6fb;
   border-radius: 12px;
   padding: 16px;
   box-shadow: 0 10px 24px rgba(12, 36, 70, 0.03);
 }

 .wf-card-title {
   font-size: 14px;
   font-weight: 800;
   color: #04263c;
   margin-bottom: 8px;
 }

 .wf-card-text {
   color: #556070;
   font-size: 14px;
   line-height: 1.4;
 }

 /* Responsive behavior */
 @media (max-width: 900px) {

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

   .wf-extras {
     grid-template-columns: 1fr;
   }

   .wf-content h3 {
     font-size: 18px;
   }

   .wf-content p,
   .wf-content ul {
     font-size: 14px;
   }

   .wf-btn-primary {
     font-size: 14px;
   }
 }

 .pd-wrapper {
   position: relative;
   margin-top: 16px;
   background: #fff;
   border: 1px solid #e6f2fb;
   padding: 22px;
   border-radius: 12px;
   box-shadow: 0 12px 30px rgba(6, 22, 36, 0.03);
 }

 .pd-connector {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 0;
 }

 .pd-grid {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
 }

 .pd-card {
   background: #fff;
   border: 1px solid #e6f4fb;
   border-radius: 12px;
   padding: 16px;
   box-shadow: 0 10px 28px rgba(6, 22, 36, 0.03);
   cursor: pointer;
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-height: 120px;
   transition: all 0.25s ease;
 }

 .pd-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 36px rgba(6, 22, 36, 0.06);
 }

 .pd-card.active {
   border-color: #0b7fb8;
 }

 .pd-header {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .pd-dot {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
 }

 .pd-dot.blue {
   background: #eaf8ff;
   border: 1px solid #cfeefc;
   color: #0561a5;
 }

 .pd-dot.green {
   background: #eaf7f3;
   border: 1px solid #d6f1ea;
   color: #0b8b6d;
 }

 .pd-dot.orange {
   background: #fff7ed;
   border: 1px solid #ffe9d7;
   color: #d97300;
 }

 .pd-role {
   font-size: 15px;
   font-weight: 900;
   color: #042737;
   line-height: 1;
 }

 .pd-title {
   font-size: 14px;
   font-weight: 800;
   color: #042737;
   margin-top: 2px;
 }

 .pd-card p {
   color: #2f4f57;
   font-size: 14px;
   line-height: 1.35;
 }

 /* Detail panel */
 .pd-detail {
   margin-top: 20px;
   display: none;
   padding: 14px;
   border-radius: 10px;
   background: #fff;
   border: 1px solid #e6f2fb;
   box-shadow: 0 12px 30px rgba(6, 22, 36, 0.03);
 }

 .pd-detail-inner {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   flex-wrap: wrap;
 }

 .pd-detail-left {
   flex: 0 0 160px;
 }

 #pd-detail-num {
   font-size: 22px;
   font-weight: 900;
   color: #0b7fb8;
 }

 #pd-detail-role {
   color: #45616a;
   font-weight: 700;
   margin-top: 6px;
   font-size: 13px;
 }

 .pd-detail-main {
   flex: 1;
   min-width: 240px;
 }

 .pd-detail-main h3 {
   margin: 0 0 6px;
   color: #042737;
   font-size: 18px;
 }

 .pd-detail-main p {
   margin: 0 0 10px;
   color: #2f4f57;
   font-size: 14px;
 }

 .pd-detail-cols {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }

 .pd-detail-cols strong {
   display: block;
   margin-bottom: 8px;
   color: #042737;
 }

 #pd-detail-what,
 #pd-detail-outcome {
   margin: 0 0 6px 18px;
   color: #475a64;
 }

 #pd-detail-extra {
   margin-top: 10px;
   color: #3f5960;
 }

 #pd-detail-close {
   background: transparent;
   border: 0;
   color: #6b7b88;
   font-size: 20px;
   cursor: pointer;
 }

 /* Responsive */
 @media (max-width: 900px) {
   .pd-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (max-width: 550px) {
   .pd-grid {
     grid-template-columns: 1fr;
   }
 }

 /* Tabs */
 .tabs_inv {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 40px;
 }

 .tab_inv {
   background: #f4f6f8;
   color: #111827;
   border: none;
   border-radius: 999px;
   padding: 12px 24px;
   font-weight: 600;
   font-size: 15px;
   cursor: pointer;
   transition: all 0.3s ease;
   outline: none;
 }

 .tab_inv:hover {
   background: #e8edf1;
 }

 .tab_inv.active {
   background: #0d63b8;
   color: #fff;
   box-shadow: 0 6px 18px rgba(13, 99, 184, 0.25);
   outline: none;
 }

 /* Cards grid */
 .card-grid_inv {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 24px;
 }

 /* Feature cards */
 .feature-card_inv {
   display: block;
   background: #f9fbff;
   border-radius: 16px;
   padding: 24px;
   text-decoration: none;
   color: #0b1324;
   box-shadow: 0 6px 16px rgba(13, 99, 184, 0.08);
   transition: all 0.3s ease;
 }

 .feature-card_inv:hover {
   transform: translateY(-4px);
   box-shadow: 0 10px 24px rgba(13, 99, 184, 0.12);
 }

 .feature-card_inv .stat_inv {
   font-size: 13px;
   color: #5d6b82;
   font-weight: 600;
   margin-bottom: 6px;
 }

 .feature-card_inv h3 {
   font-size: 20px;
   color: #094c8a;
   margin: 6px 0;
   font-weight: 600;
 }

 .feature-card_inv p {
   font-size: 15px;
   margin-bottom: 8px;
   color: #0b1324;
 }

 .feature-card_inv ul {
   margin: 0;
   padding-left: 18px;
   color: #5d6b82;
   font-size: 14px;
 }

 /* Tab content */
 .tab-content_inv {
   display: none;
 }

 .tab-content_inv.active {
   display: block;
 }

 /* Responsive */
 @media (max-width: 768px) {
   #axiever-deep-features h2 {
     font-size: 26px;
   }

   .tab_inv {
     font-size: 14px;
     padding: 10px 20px;
   }
 }

 .auto-journey {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 22px;
   margin-top: 22px;
 }

 .auto-node {
   background: #fff;
   border: 1px solid #eef6fb;
   border-radius: 14px;
   padding: 18px;
   box-shadow: 0 12px 28px rgba(10, 22, 40, 0.04);
   text-align: center;
   transition: transform .4s, box-shadow .4s;
 }

 .auto-node:hover {
   transform: translateY(-6px);
   box-shadow: 0 22px 40px rgba(10, 22, 40, 0.08);
 }

 .auto-node .icon-inv {
   font-size: 32px;
   margin-bottom: 10px;
 }

 .auto-node h3 {
   font-size: 20px;
   margin: 0 0 8px;
   color: #052b3c;
   font-weight: 600;
 }

 .auto-node p {
   font-size: 13px;
   color: #55616a;
   line-height: 1.5;
 }

 .fade {
   opacity: 0;
   transform: translateY(10px);
   transition: all .6s ease;
 }

 .fade.visible {
   opacity: 1;
   transform: translateY(0);
 }

 /* order module */
 /* ===== Hero ===== */
 .hero-od {
   display: grid;
   grid-template-columns: 1fr 480px;
   gap: 24px;
   align-items: center;
   /* padding: 28px;
   border-radius: 14px;
   background: linear-gradient(180deg, #ffffff, #fbfdff);
   border: 1px solid rgba(5, 97, 165, .06);
   box-shadow: 0 10px 26px rgba(12, 36, 70, .06) */
 }

 .pill {
   display: inline-block;
   background: linear-gradient(90deg, #0561a5, #0b84d6);
   color: #fff;
   padding: 8px 12px;
   border-radius: 999px;
   font-weight: 800
 }

 .hero-fig {
   background: #fff;
   border: 1px solid #eef4fb;
   border-radius: 12px;
   text-align: center;
   padding: 16px;
   box-shadow: 0 12px 30px rgba(12, 36, 70, .03)
 }

 .hero-fig img {
   max-width: 100%;
   border-radius: 10px
 }

 .trust {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 10px
 }

 .trust .t {
   background: #f3fbff;
   padding: 10px 12px;
   border-radius: 10px;
   font-weight: 700;
   color: #0561a5;
   border: 1px solid #e8f2fb
 }

 @media (max-width:1060px) {
   .hero-od {
     grid-template-columns: 1fr
   }
 }

 #order-flow-section * {
   box-sizing: border-box
 }

 #order-flow-section a {
   text-decoration: none;
   color: inherit
 }

 #order-flow-section .wrap-od {
   max-width: 1160px;
   margin: 0 auto;
   padding: 0 16px
 }

 /* Section Title */
 #order-flow-section .head {
   text-align: center;
   margin-bottom: 28px
 }

 #order-flow-section .head h2 {
   font-size: 30px;
   font-weight: 900;
   color: #06263c;
   margin: 0
 }

 #order-flow-section .head p {
   font-size: 16px;
   color: #586173;
   margin: 8px 0 0
 }

 /* Flow Container */
 #order-flow-section .rail {
   position: relative;
   background: #fff;
   border: 1px solid #eaf2fb;
   border-radius: 20px;
   padding: 26px 20px;
   box-shadow: 0 10px 30px rgba(12, 36, 70, .05)
 }

 #order-flow-section .line {
   position: absolute;
   left: 50px;
   right: 50px;
   top: 98px;
   height: 2px;
   background: linear-gradient(90deg, #eaf2fb, #cfe8ff, #eaf2fb);
   z-index: 0;
   border-radius: 2px
 }

 #order-flow-section .grid-od {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 16px
 }

 /* Step cards */
 #order-flow-section .step {
   position: relative;
   z-index: 1;
   border: 1px solid #eaf2fb;
   background: #fff;
   border-radius: 14px;
   padding: 18px;
   text-align: center;
   transition: .25s
 }

 #order-flow-section .step:hover {
   transform: translateY(-3px);
   box-shadow: 0 14px 28px rgba(12, 36, 70, .08)
 }

 #order-flow-section .n {
   width: 48px;
   height: 48px;
   margin: 0 auto 10px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   font-weight: 900;
   font-size: 18px;
   color: #0561a5;
   background: #ecf6ff;
   border: 1px solid #cfe8ff
 }

 #order-flow-section .title {
   font-weight: 900;
   letter-spacing: .02em;
   margin-bottom: 4px
 }

 #order-flow-section .hint {
   font-size: 13px;
   color: #586173
 }

 #order-flow-section .ico {
   font-size: 20px;
   margin-right: 6px
 }

 /* Tooltip */
 #order-flow-section .tip {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 100%;
   margin-bottom: 12px;
   display: none;
   white-space: nowrap;
   background: #0b1220;
   color: #fff;
   font-size: 12px;
   padding: 8px 10px;
   border-radius: 8px
 }

 #order-flow-section .tip:after {
   content: "";
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 100%;
   border: 6px solid transparent;
   border-top-color: #0b1220
 }

 #order-flow-section .step:hover .tip {
   display: block
 }

 /* Arrow connectors */
 #order-flow-section .arrow {
   position: absolute;
   top: 88px;
   right: -8px;
   width: 16px;
   height: 16px;
   border-right: 2px solid #cfe8ff;
   border-top: 2px solid #cfe8ff;
   transform: rotate(45deg)
 }

 /* Responsive */
 @media (max-width:980px) {
   #order-flow-section .grid-od {
     grid-template-columns: repeat(4, 1fr)
   }

   #order-flow-section .line {
     display: none
   }
 }

 @media (max-width:640px) {
   #order-flow-section .grid-od {
     grid-template-columns: repeat(2, 1fr)
   }

   #order-flow-section .line {
     display: none
   }
 }

 #order-module-showcase * {
   box-sizing: border-box
 }

 #order-module-showcase .wrap-or {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
   text-align: center
 }

 /* --- Header --- */
 #order-module-showcase h2 {
   font-size: 30px;
   font-weight: 900;
   margin: 0;
   color: #06263c
 }

 #order-module-showcase p.sub {
   color: #586173;
   margin: 10px 0 30px;
   font-size: 16px
 }

 /* --- Grid --- */
 #order-module-showcase .grid-or {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   justify-content: center;
 }

 @media(max-width:1024px) {
   #order-module-showcase .grid-or {
     grid-template-columns: 1fr 1fr
   }
 }

 @media(max-width:680px) {
   #order-module-showcase .grid-or {
     grid-template-columns: 1fr
   }
 }

 /* --- Card --- */
 #order-module-showcase .card-or {
   position: relative;
   background: rgba(255, 255, 255, 0.9);
   border: 1px solid #eaf2fb;
   border-radius: 20px;
   padding: 28px 20px;
   box-shadow: 0 12px 32px rgba(5, 97, 165, 0.06);
   backdrop-filter: blur(10px);
   transition: all .3s ease;
   cursor: pointer;
   overflow: hidden;
 }

 #order-module-showcase .card-or:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(5, 97, 165, 0.12);
   border-color: #cfe8ff;
 }

 /* --- Icon --- */
 #order-module-showcase .icon-or {
   width: 70px;
   height: 70px;
   margin: 0 auto 12px;
   border-radius: 20px;
   background: linear-gradient(145deg, #ecf6ff, #d9edff);
   display: grid;
   place-items: center;
   font-size: 30px;
   color: #0561a5;
   position: relative;
 }

 /* Number badge inside icon */
 #order-module-showcase .icon-or span.badge {
   position: absolute;
   bottom: -8px;
   right: -8px;
   background: #0561a5;
   color: #fff;
   font-size: 12px;
   font-weight: 800;
   width: 24px;
   height: 24px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   box-shadow: 0 0 0 2px #fff;
 }

 /* Title & Desc */
 #order-module-showcase .title-or {
   font-weight: 800;
   font-size: 18px;
   color: #06263c;
   margin-top: 8px
 }

 #order-module-showcase .desc-or {
   font-size: 14px;
   color: #4b5563;
   line-height: 1.7;
   margin-top: 6px;
   min-height: 60px;
   transition: all .3s;
 }

 /* Hover effect - subtle expansion */
 #order-module-showcase .card-or:hover .desc-or {
   color: #06263c;
 }

 /* Connecting arrows (desktop) */
 @media(min-width:1025px) {
   #order-module-showcase .card-or::after {
     content: "";
     position: absolute;
     top: 50%;
     right: -18px;
     width: 22px;
     height: 22px;
     border-right: 3px solid #cfe8ff;
     border-top: 3px solid #cfe8ff;
     transform: translateY(-50%) rotate(45deg);
   }

   #order-module-showcase .grid-or>a:nth-child(3n)::after {
     display: none
   }
 }

 /* CTA Button */
 #order-module-showcase .cta {
   display: inline-block;
   background: #0561a5;
   color: #fff;
   padding: 14px 24px;
   border-radius: 12px;
   font-weight: 800;
   font-size: 15px;
   margin-top: 40px;
   box-shadow: 0 12px 26px rgba(5, 97, 165, .12);
   transition: .2s;
 }

 #order-module-showcase .cta:hover {
   background: #0b84d6
 }

 #order-automation * {
   box-sizing: border-box;
   transition: all .3s ease;
 }

 #order-automation .wrap-ord {
   max-width: 1160px;
   margin: 0 auto;
   padding: 24px 16px;
   text-align: left;
   position: relative;
   z-index: 2
 }

 #order-automation h2 {
   font-size: 30px;
   margin: 0 0 10px;
   color: #07263c;
   font-weight: 800;
   letter-spacing: -.5px;
   text-align: center;
 }

 #order-automation h2 span {
   color: #0b84d6;
 }

 #order-automation p.sub-ord {
   font-size: 18px;
   color: #42526e;
   margin: 0 auto 40px;
   text-align: center;
   max-width: 720px;
 }

 #order-automation .grid-ord {
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   gap: 36px;
   align-items: center;
 }

 @media (max-width:980px) {
   #order-automation .grid-ord {
     grid-template-columns: 1fr
   }
 }

 /* left: bullet list */
 #order-automation .panel-ord {
   background: #fff;
   border: 1px solid #eaf2fb;
   border-radius: 20px;
   padding: 30px;
   box-shadow: 0 16px 40px rgba(12, 36, 70, .08);
   position: relative;
 }

 #order-automation .panel-ord::before {
   content: "";
   position: absolute;
   top: -20px;
   right: -30px;
   width: 160px;
   height: 160px;
 }

 #order-automation ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 6px;
 }

 #order-automation li {
   display: grid;
   grid-template-columns: 50px 1fr;
   gap: 14px;
   align-items: start;
   padding: 10px 0;
   border-bottom: 1px dashed #eaf2fb;
 }

 #order-automation li:last-child {
   border-bottom: none;
 }

 #order-automation .dot-ord {
   width: 50px;
   height: 50px;
   border-radius: 14px;
   background: #ecf6ff;
   border: 1px solid #cfe8ff;
   display: grid;
   place-items: center;
   box-shadow: 0 4px 10px rgba(11, 132, 214, .08);
 }

 #order-automation .txt {
   color: #324255;
   line-height: 1.7;
   font-size: 15px;
 }

 #order-automation strong {
   color: #06263c
 }

 /* hover motion */
 #order-automation li:hover .dot-ord {
   transform: scale(1.1);
   background: #0b84d6;
   color: #fff;
 }

 #order-automation li:hover .txt {
   color: #07263c;
 }

 /* right: cross-module sync card */
 #order-automation .side-ord {
   position: relative;
   background: linear-gradient(180deg, #ffffff, #f8fbff);
   border: 1px solid #eaf2fb;
   border-radius: 20px;
   padding: 30px;
   box-shadow: 0 16px 40px rgba(12, 36, 70, .06);
   overflow: hidden;
 }

 #order-automation .side-ord h3 {
   margin: 0 0 10px;
   font-size: 18px;
   color: #06263c;
   font-weight: 700;
 }

 #order-automation .side-ord div {
   font-size: 15px;
   color: #324255;
   line-height: 1.7;
   margin-bottom: 16px;
 }

 #order-automation .chip-ord {
   display: inline-block;
   background: #fff;
   border: 1px solid #eaf2fb;
   border-radius: 999px;
   padding: 10px 16px;
   font-weight: 700;
   font-size: 14px;
   margin-right: 10px;
   margin-top: 10px;
   box-shadow: 0 8px 18px rgba(12, 36, 70, .06);
   color: #06263c;
 }

 #order-automation .chip-ord:hover {
   border-color: #0b84d6;
   background: #ecf6ff;
   transform: translateY(-2px);
 }

 #order-automation .side img {
   width: 100%;
   border-radius: 16px;
   margin-top: 20px;
   box-shadow: 0 12px 24px rgba(12, 36, 70, .08);
 }

 /* ctas */
 #order-automation .actions-ord {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 28px;
 }

 #order-automation .btn {
   display: inline-block;
   border-radius: 12px;
   padding: 14px 22px;
   font-weight: 800;
   font-size: 15px;
   text-decoration: none;
 }

 #order-automation .btn.primary {
   background: #0b84d6;
   color: #fff;
   box-shadow: 0 12px 26px rgba(11, 132, 214, .2);
 }

 #order-automation .btn.primary:hover {
   background: #096ab3;
   transform: translateY(-2px);
 }

 #order-automation .btn.ghost {
   background: #fff;
   border: 2px solid rgba(11, 132, 214, .15);
   color: #0b84d6;
 }

 #order-automation .btn.ghost:hover {
   background: #ecf6ff;
 }


 #axv-sections {
   --axv-bg1: #f7fbff;
   --axv-bg2: #eef6ff;
   --axv-ink: #0a2540;
   --axv-muted: #4f6b88;
   --axv-accent: #2d74ff;
   --axv-card: #ffffff;
   --axv-pill: #f0f5ff;
   --axv-shadow: 0 10px 30px rgba(18, 42, 66, 0.08);

   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   color: var(--axv-ink);
   display: block;
 }

 /* Gradient band */
 .axv-gradient-band {
   background: linear-gradient(180deg, var(--axv-bg1), var(--axv-bg2));
   border-radius: 28px;
   padding: 48px 28px;
 }

 /* Layout container */
 .axv-container {
   max-width: 1100px;
   margin: 0 auto 40px;
 }

 /* Header */
 .axv-header {
   text-align: center;
   margin-bottom: 28px;
 }

 .axv-header .axv-pill {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 14px;
   border-radius: 999px;
   background: var(--axv-pill);
   font-weight: 600;
   font-size: 14px;
   letter-spacing: 0.2px;
 }

 .axv-header h2 {
   margin: 12px 0 6px;
   font-size: 30px;
   line-height: 1.15;
   font-weight: 700;
   color: #252a32;
 }

 .axv-header p {
   color: var(--axv-muted);
   font-size: 15px;
 }

 /* Feature Grid */
 .axv-feature-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   justify-content: center;
 }

 .axv-feature {
   text-decoration: none;
   color: inherit;
   background: var(--axv-card);
   border: 1px solid #e7eef7;
   box-shadow: var(--axv-shadow);
   padding: 14px 16px;
   border-radius: 16px;
   display: flex;
   align-items: center;
   gap: 10px;
   min-width: 240px;
   flex: 1 1 300px;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .axv-feature:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 30px rgba(18, 42, 66, 0.12);
 }

 .axv-feature .title {
   font-weight: 700;
 }

 .axv-feature .subtitle {
   font-size: 12px;
   color: var(--axv-muted);
 }

 /* Proof Section */
 .axv-proof-section {
   display: flex;
   gap: 22px;
   flex-wrap: wrap;
   margin-top: 12px;
 }

 .axv-card {
   flex: 1 1 420px;
   background: var(--axv-card);
   border: 1px solid #e7eef7;
   border-radius: 20px;
   padding: 22px;
   box-shadow: var(--axv-shadow);
 }

 .axv-card-header {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 6px;
 }

 .axv-card h3 {
   font-size: 20px;
   margin: 0;
   font-weight: 600;
 }

 .axv-card p {
   color: var(--axv-muted);
   font-size: 14px;
   margin-bottom: 14px;
 }

 /* Proof Stats */
 .axv-proof-stats {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
 }

 .axv-proof-stats .stat {
   flex: 1 1 160px;
   border: 1px dashed #ddd;
   border-radius: 16px;
   padding: 16px;
   text-align: left;
 }

 .stat-blue {
   background: #effcff;
   border-color: #cdefff;
 }

 .stat-green {
   background: #f1fff6;
   border-color: #c8f2da;
 }

 .stat-yellow {
   background: #fff8ee;
   border-color: #ffe2bb;
 }

 .stat .num {
   font-size: 28px;
   font-weight: 800;
   line-height: 1;
 }

 .stat .label-axv {
   font-size: 12px;
   color: var(--axv-muted);
 }

 /* Document List */
 .axv-doc-list {
   list-style: none;
   padding: 0;
   margin: 10px 0 18px;
   display: grid;
   gap: 10px;
 }

 .axv-doc-list li {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 /* Buttons */
 .axv-cta {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
 }

 .btn-primary {
   background: var(--axv-accent);
   color: #fff;
   padding: 12px 16px;
   border-radius: 12px;
   font-weight: 700;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }

 .btn-secondary {
   background: #f2f6ff;
   color: var(--axv-accent);
   padding: 12px 16px;
   border-radius: 12px;
   font-weight: 700;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 1px solid #e0e9ff;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .axv-feature {
     flex: 1 1 100%;
   }

   .axv-proof-section {
     flex-direction: column;
   }
 }

 /* ---------- Professional hero CSS (merged) ---------- */
 .hero-prof {
   max-width: 1200px;
   margin: 0;
   padding: 34px 0;
   display: grid;
   grid-template-columns: 1fr 420px;
   gap: 28px;
   align-items: center;
 }

 .kicker {
   display: inline-block;
   font-weight: 600;
   color: #0b66ff;
   font-size: 13px;
   padding: 8px 12px;
   border-radius: 999px;
   background: rgba(11, 97, 255, 0.06);
   margin-bottom: 12px;
 }

 .hero-prof h1 {
   font-size: 40px;
   line-height: 1.06;
   margin: 0 0 14px;
   font-weight: 700;
   letter-spacing: -0.4px;
   color: var(--text);
 }

 .hero-prof .lead {
   margin: 0 0 22px;
   color: #5d7380;
   font-size: 15px;
   max-width: 640px;
 }

 .features-dms {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 20px;
 }

 .feature-dms-pill {
   background: var(--surface);
   padding: 9px 12px;
   border-radius: 10px;
   border: 1px solid rgba(9, 34, 68, 0.04);
   font-weight: 600;
   color: #183049;
   font-size: 13px;
   box-shadow: var(--card-shadow);
 }

 .actions {
   display: flex;
   gap: 12px;
   align-items: center;
   margin-top: 25px;
 }

 .btn-primary {
   background: linear-gradient(180deg, #0b66ff, #0758d6);
   color: #fff;
   padding: 12px 18px;
   border-radius: 10px;
   border: 0;
   font-weight: 700;
   font-size: 15px;
   cursor: pointer;
   box-shadow: 0 10px 26px rgba(23, 102, 255, 0.12);
 }

 .btn-secondary {
   background: transparent;
   border: 1px solid rgba(9, 34, 68, 0.08);
   padding: 11px 16px;
   border-radius: 10px;
   font-weight: 700;
   color: #0b66ff;
   cursor: pointer;
 }

 .trust {
   color: #5d7380;
   font-size: 13px;
   margin-top: 16px;
 }

 .card-prof {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 251, 255, 0.96));
   border-radius: 14px;
   padding: 22px;
   border: 1px solid rgba(11, 45, 74, 0.04);
   box-shadow: var(--card-shadow);
   display: flex;
   flex-direction: column;
   gap: 14px;
 }

 .card-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .card-title {
   font-weight: 700;
   font-size: 15px;
   color: #183049;
 }

 .card-sub {
   font-size: 13px;
   color: #5d7380;
 }

 .preview {
   display: flex;
   gap: 14px;
   align-items: center;
 }

 .doc {
   width: 72px;
   height: 56px;
   border-radius: 8px;
   background: linear-gradient(180deg, #f4f8ff, #ffffff);
   border: 1px solid rgba(9, 34, 68, 0.03);
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 8px;
   box-shadow: 0 6px 18px rgba(9, 34, 68, 0.03);
 }

 .doc-line {
   height: 6px;
   border-radius: 4px;
   background: linear-gradient(90deg, #e9f2ff, #fff);
   margin-bottom: 6px;
 }

 .doc-line.short {
   width: 54%
 }

 .doc-line.full {
   width: 86%
 }

 .chart {
   flex: 1;
   height: 56px;
   border-radius: 8px;
   background: linear-gradient(90deg, #ffffff, #f7fbff);
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(9, 34, 68, 0.03);
   padding: 6px;
 }

 .meta-row {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   align-items: center;
   margin-top: 2px;
 }

 .meta-left {
   display: flex;
   flex-direction: column;
 }

 .meta-key {
   font-size: 13px;
   color: #5d7380;
 }

 .meta-value {
   font-weight: 700;
   color: #1b3350;
   font-size: 14px;
 }

 /* subtle entrance animations */
 .fade-in {
   opacity: 0;
   transform: translateY(6px);
   animation: fadeIn 560ms cubic-bezier(.2, .9, .3, 1) forwards;
 }

 .delay-1 {
   animation-delay: .12s
 }

 .delay-2 {
   animation-delay: .22s
 }

 .delay-3 {
   animation-delay: .32s
 }

 @keyframes fadeIn {
   to {
     opacity: 1;
     transform: none;
   }
 }

 @media (max-width:980px) {
   .hero-prof {
     grid-template-columns: 1fr
   }

   .card-prof {
     order: 2
   }
 }

 #resources * {
   box-sizing: border-box
 }

 #resources .wrap {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px
 }

 #resources h2 {
   font-size: 30px;
   font-weight: 700;
   color: #252a32;
 }

 #resources p.sub {
   font-size: 18px;
   color: #475569;
   max-width: 700px;
   margin-bottom: 50px;
 }

 /* Grid */
 #resources .grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
 }

 @media(max-width:980px) {
   #resources .grid {
     grid-template-columns: 1fr 1fr
   }
 }

 @media(max-width:640px) {
   #resources .grid {
     grid-template-columns: 1fr
   }
 }

 /* Card */
 #resources .post {
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid #eaf2fb;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 10px 26px rgba(5, 97, 165, .08);
   transition: .2s
 }

 #resources .post:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 40px rgba(5, 97, 165, .12)
 }

 #resources .body {
   flex: 1;
   display: flex;
   flex-direction: column;
   padding: 14px 16px
 }

 /* Cover — stable 16:9, no layout shift */
 #resources .cover-wrap {
   position: relative;
   aspect-ratio: 16/9;
   border-bottom: 1px solid #eef2f7;
   background: linear-gradient(180deg, #f4f8ff, #eef4fb);
 }

 #resources .cover {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
 }

 /* Fallback when image fails */
 #resources .cover-wrap.fallback {
   display: grid;
   place-items: center
 }

 #resources .cover-wrap.fallback::before {
   content: "🖼️";
   font-size: 32px;
   opacity: .9
 }

 #resources .cover-wrap.fallback::after {
   content: "Image unavailable";
   position: absolute;
   bottom: 10px;
   left: 12px;
   font-size: 12px;
   color: #5b6b7f;
   background: #fff;
   padding: 4px 8px;
   border-radius: 8px;
   border: 1px solid #e6edf6
 }

 /* Text */
 #resources .kicker {
   font-size: 12px;
   font-weight: 900;
   letter-spacing: .06em;
   color: #094c8a;
   text-transform: uppercase;
   margin-bottom: 6px
 }

 #resources .title {
   font-weight: 900;
   color: #06263c;
   margin-bottom: 6px
 }

 #resources .post:hover .title {
   color: #0b84d6
 }

 #resources .meta {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   color: #6b7280;
   font-size: 12px
 }

 #resources .readmore {
   display: inline-block;
   margin-top: auto;
   font-weight: 800;
   color: #0561a5;
   text-decoration: none
 }

 #resources .readmore:hover {
   text-decoration: underline
 }

 /* ------- attractive interactive styles (kept minimal here) ------- */
 /* ---------- HERO / top section ---------- */
 .hero-dms {
   display: grid;
   grid-template-columns: 1fr 380px;
   gap: 28px;
   align-items: start;
   margin-bottom: 26px;
   position: relative;
 }

 @media (max-width:980px) {
   .hero-dms {
     grid-template-columns: 1fr
   }

   .aside {
     order: 2
   }
 }

 .hero-card {
   border-radius: 20px;
   padding: 34px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(250, 255, 255, 0.75));
   box-shadow: 0 30px 60px rgba(6, 30, 44, 0.08);
   backdrop-filter: blur(8px);
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(6, 30, 44, 0.04);
 }

 /* animated background waves-dms */
 .waves-dms {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .38;
   mix-blend-mode: normal
 }

 .wave-dms {
   transform: translateZ(0)
 }

 @media (max-width:980px) {
   .waves-dms {
     display: none
   }
 }

 .eyebrow-dms {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 14px;
   background: linear-gradient(90deg, #eaf9ff, #f0fbff);
   border-radius: 999px;
   color: #0a87c2;
   font-weight: 700;
   font-size: 13px;
   margin-bottom: 12px;
   box-shadow: 0 8px 24px rgba(6, 30, 44, 0.04)
 }

 h1 {
   font-size: 36px;
   line-height: 1.02;
   margin: 6px 0 12px;
   color: #052233
 }

 p.lead {
   color: #587382;
   font-size: 15px;
   max-width: 720px;
   margin-bottom: 20px
 }

 /* ---------- Feature cards ---------- */
 .feature-dms-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px
 }

 @media (max-width:720px) {
   .feature-dms-grid {
     grid-template-columns: 1fr
   }
 }

 .feature-dms {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   padding: 18px;
   border-radius: 14px;
   background: linear-gradient(180deg, #ffffff, #fbfeff);
   box-shadow: 0 14px 40px rgba(6, 30, 44, 0.06);
   border: 1px solid rgba(6, 30, 44, 0.03);
   transition: transform .28s cubic-bezier(.2, .9, .2, 1), box-shadow .28s;
 }

 .feature-dms:hover {
   transform: translateY(-10px);
   box-shadow: 0 30px 60px rgba(6, 30, 44, 0.10)
 }

 .feat-icon {
   width: 56px;
   height: 56px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: linear-gradient(180deg, #eaf9ff, #dff6ff);
   box-shadow: inset 0 -6px 16px rgba(0, 0, 0, 0.03);
   flex: 0 0 56px;
   position: relative;
   overflow: visible;
 }

 .feat-title {
   font-weight: 700;
   color: #052233;
   font-size: 16px;
   margin-bottom: 6px
 }

 .feat-desc {
   color: #5d7b86;
   font-size: 14px;
   line-height: 1.45
 }

 /* subtle accent stripe for important card */
 .feature-dms.accent {
   border-left: 6px solid #0aa2ff;
   padding-left: 12px
 }

 /* ---------- Right aside (metrics / CTA) ---------- */
 .aside {
   position: relative;
   padding: 20px;
   border-radius: 14px;
   background: linear-gradient(180deg, #ffffff, #fbfeff);
   box-shadow: 0 20px 48px rgba(6, 30, 44, 0.07);
   border: 1px solid rgba(6, 30, 44, 0.03);
 }

 .aside h4 {
   font-size: 18px;
   margin: 0 0 10px;
   color: #042236;
   font-weight: 700
 }

 .aside p {
   margin: 0 0 14px;
   color: #6b8794;
   font-size: 14px
 }

 .metrics {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 12px
 }

 .metric {
   min-width: 110px;
   padding: 14px;
   border-radius: 12px;
   background: linear-gradient(180deg, rgba(61, 176, 255, 0.06), rgba(61, 176, 255, 0.02));
   border: 1px solid rgba(61, 176, 255, 0.10);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 26px rgba(10, 46, 70, 0.04);
 }

 .metric .num {
   font-size: 22px;
   font-weight: 800;
   color: #073048
 }

 .metric .lbl {
   font-size: 13px;
   color: #5d7b86;
   margin-top: 4px
 }

 .cta-row {
   display: flex;
   gap: 12px;
   margin-top: 10px;
   flex-wrap: wrap
 }

 .btn-primary {
   background: linear-gradient(90deg, #007cf7, #00b2ff);
   color: white;
   padding: 12px 16px;
   border-radius: 12px;
   font-weight: 800;
   border: none;
   cursor: pointer;
   box-shadow: 0 18px 44px rgba(0, 130, 255, 0.14);
   transition: transform .18s
 }

 .btn-primary:hover {
   transform: translateY(-4px)
 }

 .btn-ghost {
   background: transparent;
   border: 1px solid rgba(4, 34, 48, 0.06);
   padding: 10px 14px;
   border-radius: 12px;
   font-weight: 700;
   color: #034155
 }

 /* ---------- Testimonials ribbon (under hero) ---------- */
 .ribbon {
   display: flex;
   gap: 12px;
   align-items: center;
   margin-top: 18px;
   padding: 12px 16px;
   border-radius: 12px;
   background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.9));
   box-shadow: 0 10px 32px rgba(6, 30, 44, 0.04);
   border: 1px solid rgba(6, 30, 44, 0.03)
 }

 .ribbon .logo {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   background: linear-gradient(180deg, #f0fbff, #e9f7ff);
   display: grid;
   place-items: center;
   font-weight: 800;
   color: #0a87c2
 }

 .ribbon p {
   color: #587382;
   font-size: 14px
 }

 /* ---------- Floating micro-illustrations ---------- */
 .float-ico {
   position: absolute;
   will-change: transform;
   transition: transform 0.45s ease-out;
   opacity: .98;
   pointer-events: none
 }

 .ico-1 {
   right: 18px;
   top: -28px;
   width: 84px;
   height: 84px
 }

 .ico-2 {
   left: -22px;
   bottom: -22px;
   width: 88px;
   height: 88px;
   opacity: .9
 }

 /* ---------- Footer small details ---------- */
 .meta {
   margin-top: 20px;
   color: #8aa0ab;
   font-size: 13px
 }

 .hr {
   height: 1px;
   background: linear-gradient(90deg, rgba(4, 34, 48, 0.06), rgba(4, 34, 48, 0.02));
   margin: 18px 0;
   border-radius: 1px
 }

 /* ---------- animations & counters ---------- */
 .fade-in {
   opacity: 0;
   transform: translateY(12px);
   animation: fadeIn .6s forwards
 }

 .delay-1 {
   animation-delay: .06s
 }

 .delay-2 {
   animation-delay: .12s
 }

 .delay-3 {
   animation-delay: .18s
 }

 .delay-4 {
   animation-delay: .24s
 }

 @keyframes fadeIn {
   to {
     opacity: 1;
     transform: none
   }
 }

 /* icon stroke animation */
 .stroke-anim path {
   stroke-dasharray: 200;
   stroke-dashoffset: 200;
   animation: dash 1.3s ease forwards
 }

 @keyframes dash {
   to {
     stroke-dashoffset: 0
   }
 }

 /* accessibility focus */
 .btn-primary:focus,
 .feature-dms:focus {
   outline: 3px solid rgba(3, 110, 200, 0.12);
   outline-offset: 4px
 }

 /* hero-hrm */
 .hero-hrm {
   display: flex;
   gap: 40px;
   align-items: flex-start;
   border-radius: 28px;

 }

 .hero-hrm-left {
   flex: 1
 }

 .eyebrow-hrm {
   color: #0b66ff;
   font-weight: 700;
   margin-bottom: 8px
 }

 .hero-hrm h1 {
   font-size: 40px;
   line-height: 1.05;
   color: #03132a
 }

 .hero-hrm p.lead {
   max-width: 640px;
   font-size: 16px
 }

 .cta-row {
   margin-top: 22px
 }

 .btn {
   padding: 12px 20px;
   border-radius: 12px;
   font-weight: 700;
   text-decoration: none
 }

 .btn-primary {
   background: #0b66ff;
   color: #fff;
   box-shadow: 0 6px 18px rgba(11, 102, 255, 0.18)
 }

 .btn-ghost {
   border: 2px solid #0b66ff;
   color: #0b66ff;
   background: #fff
 }

 .chip-hrms {
   margin-top: 18px;
   display: flex;
   gap: 10px;
   flex-wrap: wrap
 }

 .chip-hrm {
   background: #fff;
   padding: 8px 12px;
   border-radius: 999px;
   box-shadow: 0 4px 18px rgba(11, 102, 255, 0.04);
   font-weight: 600;
   color: #0b66ff
 }

 /* stat-hrms */
 .stat-hrms {
   display: flex;
   gap: 18px;
   margin-top: 24px
 }

 .stat-hrm {
   background: #ffffff;
   padding: 16px 20px;
   border-radius: 12px;
   min-width: 140px;
   box-shadow: 0 6px 24px rgba(6, 30, 60, 0.04);
   text-align: center
 }

 .stat-hrm .num {
   font-size: 22px;
   color: #0b66ff;
   font-weight: 800
 }

 .stat-hrm small {
   display: block;
   color: #55646f;
   margin-top: 6px
 }

 /* right panel mock */
 .hero-hrm-right {
   width: 420px;
   background: linear-gradient(180deg, #fff, #fbfdff);
   border-radius: 18px;
   padding: 18px;
   box-shadow: 0 10px 36px rgba(6, 30, 60, 0.06)
 }

 .mini-pill {
   display: inline-block;
   background: #fff;
   padding: 8px 12px;
   border-radius: 999px;
   box-shadow: inset 0 0 0 6px rgba(11, 102, 255, 0.03);
   margin-right: 8px
 }

 .user-list {
   margin-top: 12px
 }

 .user {
   background: linear-gradient(180deg, #f8fbff, #fff);
   padding: 10px;
   border-radius: 12px;
   display: flex;
   gap: 12px;
   align-items: center;
   box-shadow: 0 6px 18px rgba(11, 102, 255, 0.04)
 }

 .avatar {
   width: 44px;
   height: 44px;
   background: #eaf3ff;
   border-radius: 10px
 }

 .card-grid-hrm {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
 }

 .feature-card-hrm,
 .challenge-card {
   background: #ffffff;
   padding: 20px;
   border-radius: 16px;
   box-shadow: 0 8px 22px rgba(6, 30, 60, 0.09);
   transition: all .28s ease
 }

 .feature-card-hrm:hover,
 .challenge-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 46px rgba(6, 30, 60, 0.06)
 }

 .feature-icon {
   width: 56px;
   height: 56px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 14px
 }

 .features-list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px
 }

 .features-list .feature-card-hrm {
   display: flex;
   align-items: flex-start
 }

 /* --- RESPONSIVE --- */
 @media (max-width: 992px) {
   .card-grid-hrm {
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     padding: 40px 16px;
   }

 }

 @media (max-width: 600px) {
   .card-grid-hrm {
     grid-template-columns: 1fr;
     gap: 16px;
     padding: 30px 14px;
   }

   .features-list {
     grid-template-columns: repeat(1, 1fr);
   }
 }

 /* automation columns */
 .two-col {
   display: grid;
   grid-template-columns: 1fr 340px;
   gap: 28px;
   align-items: start
 }

 .impact-box {
   background: #fff;
   padding: 18px;
   border-radius: 12px;
   box-shadow: 0 6px 18px rgba(6, 30, 60, 0.03)
 }

 /* workflow vertical */
 .workflow {
   display: grid;
   grid-template-columns: 80px 1fr;
   gap: 18px;
   align-items: start
 }

 .step-bullet {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: #0b66ff;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   box-shadow: 0 8px 18px rgba(11, 102, 255, 0.14)
 }

 .step-card {
   background: #ffffff;
   padding: 18px;
   border-radius: 12px;
   box-shadow: 0 6px 20px rgba(6, 30, 60, 0.04)
 }

 /* case studies */
 .case-row-hrm {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
 }

 .case-hrm {
   border-radius: 14px;
   padding: 18px;
   background: linear-gradient(180deg, #fff, #fbfdff);
   box-shadow: 0 8px 30px rgba(6, 30, 60, 0.04)
 }

 .case-hrm .tag {
   display: inline-block;
   font-size: 13px;
   color: #0b66ff;
   margin-bottom: 8px
 }

 /* faq accordion */
 .faq {
   max-width: 900px
 }

 .faq-item {
   background: #ffffff;
   border-radius: 12px;
   padding: 14px 18px;
   margin-bottom: 10px;
   box-shadow: 0 6px 18px rgba(6, 30, 60, 0.04)
 }

 .faq-item summary {
   cursor: pointer;
   font-weight: 700
 }

 .faq-item p {
   margin-top: 8px
 }

 @media (max-width: 900px) {
   .hero-hrm {
     flex-direction: column;
     padding: 40px 16px;
   }

   .hero-hrm-left h1 {
     font-size: 2rem;
   }

   .hero-hrm-right {
     width: 100%;
   }

   .stat-hrms {
     gap: 12px;
     display: grid;
   }
 }

 /* SECTION WRAPPER */
 .hrm-feature-section {
   background: #f8fbff;
   padding: 80px 20px;
   text-align: center;
 }

 /* HEADINGS */
 .hrm-feature-section h2 {
   font-size: 30px;
   font-weight: 700;
   color: #0a2540;
   margin-bottom: 8px;
 }

 .hrm-feature-section .subtext {
   color: #4f6b88;
   font-size: 1rem;
   max-width: 680px;
   margin: 0 auto 40px;
   line-height: 1.5;
 }

 /* GRID LAYOUT */
 .hrm-feature-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   justify-items: stretch;
 }

 /* CARD STYLE */
 .hrm-feature-card {
   background: #ffffff;
   border-radius: 20px;
   padding: 24px;
   display: flex;
   align-items: flex-start;
   gap: 14px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 6px 12px rgba(0, 0, 0, 0.04);
   transition: all 0.3s ease;
 }

 .hrm-feature-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
 }

 /* ICON */
 .hrm-icon-box {
   width: 56px;
   height: 56px;
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   flex-shrink: 0;
 }

 /* TEXT */
 .hrm-feature-card h3 {
   font-size: 1.05rem;
   margin-bottom: 6px;
   color: #0a2540;
   font-weight: 700;
   text-align: left;
 }

 .hrm-feature-card p {
   font-size: 11px;
   color: #4f6b88;
   line-height: 1.5;
   text-align: left;
 }

 /* RESPONSIVE */
 @media (max-width: 992px) {
   .hrm-feature-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
   }
 }

 @media (max-width: 640px) {
   .hrm-feature-grid {
     grid-template-columns: 1fr;
     gap: 16px;
   }

   .hrm-feature-section {
     padding: 60px 16px;
   }

   .hrm-feature-card {
     flex-direction: row;
     align-items: flex-start;
   }

   .hrm-icon-box {
     width: 48px;
     height: 48px;
     font-size: 22px;
   }
 }

 /* TITLE */
 .workflow-section h2 {
   font-size: 1.9rem;
   font-weight: 700;
   margin-bottom: 8px;
 }

 .workflow-section .subtitle {
   color: var(--muted);
   font-size: 1rem;
   margin-bottom: 40px;
   max-width: 700px;
   line-height: 1.6;
 }

 /* STEPS */
 .workflow-steps {
   display: flex;
   flex-direction: column;
   gap: 18px;
 }

 .workflow-step {
   background: #fff;
   border-radius: 14px;
   padding: 20px 24px;
   display: flex;
   align-items: center;
   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
   transition: all 0.3s ease;
 }

 .workflow-step:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
 }

 /* CIRCLE */
 .step-circle {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #0b66ff;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 1.1rem;
   margin-right: 18px;
   flex-shrink: 0;
 }

 /* CONTENT */
 .step-content h3 {
   font-size: 1.05rem;
   margin-bottom: 6px;
   font-weight: 700;
 }

 .step-content p {
   color: var(--muted);
   font-size: 0.95rem;
   line-height: 1.5;
 }

 /* CTA BOX */
 .cta-box {
   background: #fffaf6;
   border-radius: 14px;
   padding: 24px 28px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 40px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }

 .cta-box h3 {
   font-weight: 700;
   margin-bottom: 4px;
 }

 .cta-box p {
   color: var(--muted);
   font-size: 0.95rem;
 }

 .btn {
   background: #0b66ff;
   color: #fff;
   padding: 10px 22px;
   border-radius: 10px;
   font-weight: 600;
   text-decoration: none;
   transition: background 0.3s ease;
 }

 .btn:hover {
   background: #004de6;
 }

 /* RESPONSIVE */
 @media (max-width: 768px) {
   .workflow-step {
     align-items: flex-start;
     padding: 18px;
   }

   .step-circle {
     width: 38px;
     height: 38px;
     font-size: 1rem;
     margin-right: 14px;
   }

   .cta-box {
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
   }

   .btn {
     align-self: flex-end;
   }
 }

 @media (max-width: 480px) {
   .workflow-section {
     padding: 60px 16px;
   }

   .workflow-section h2 {
     font-size: 26px;
   }

   .workflow-step {
     flex-direction: row;
   }
 }

 .hrm-small {
   font-size: 11px;
   font-weight: 600;
   margin-bottom: 0px;
 }

 /* financial modules */
 .container-fin {
   margin: auto;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 2rem;
 }

 .content-fin {
   min-width: 300px;
 }

 .tag-fin {
   display: inline-block;
   background-color: #e6f0ff;
   color: #2d74ff;
   font-size: 0.9rem;
   padding: 0.25rem 0.75rem;
   border-radius: 9999px;
   margin-bottom: 1rem;
 }

 h1 {
   font-size: 30px;
   font-weight: 700;
   margin-bottom: 1rem;
   line-height: 1.5;
 }

 h2 {
   font-size: 30px;
   color: #000000;
   font-weight: 600;
 }

 .fin-text {
   margin-bottom: 1.5rem;
   max-width: 600px;
 }

 .feature-fins {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-bottom: 1.5rem;
 }

 .feature-fin {
   background-color: #fff;
   border: 1px solid #d2e3f3;
   padding: 0.5rem 1rem;
   border-radius: 9999px;
   font-size: 0.9rem;
   font-weight: 600;
 }

 .buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin-bottom: 1rem;
 }

 .btn {
   padding: 0.75rem 1.5rem;
   border-radius: 0.5rem;
   border: none;
   cursor: pointer;
   font-weight: 600;
   font-size: 1rem;
 }

 .btn-primary {
   background-color: #0a2540;
   color: #fff;
 }

 .btn-secondary {
   background-color: #fff;
   border: 1px solid #0a2540;
   color: #0a2540;
 }

 .image-container {
   flex: 1;
   min-width: 300px;
 }

 .image-container img {
   width: 100%;
   border-radius: 1rem;
   display: block;
 }

 @media (max-width: 768px) {
   .container-fin {
     flex-direction: column;
     text-align: center;
     padding-top: 50px;
   }

   .buttons {
     justify-content: center;
   }

   .feature-fins {
     justify-content: center;
   }
 }

 #why-axiever .container {
   max-width: 1200px;
   margin: 0 auto;
 }

 #why-axiever h2 {
   font-size: 30px;
   line-height: 1.03;
   margin-bottom: 20px;
   color: #05263a;
   font-weight: 800;
   letter-spacing: -0.02em;
 }

 #why-axiever .intro {
   margin-bottom: 28px;
   color: #55707a;
   font-size: 15px;
   max-width: 880px;
 }

 /* Cards grid */
 #why-axiever .cards-fin {
   display: grid;
   gap: 18px;
   grid-template-columns: repeat(2, 1fr);
 }

 #why-axiever .card-fin {
   display: flex;
   gap: 16px;
   padding: 20px;
   border-radius: 14px;
   background: linear-gradient(180deg, #ffffff, #fcfeff);
   border: 1px solid rgba(6, 40, 57, 0.04);
   box-shadow: 0 10px 30px rgba(6, 40, 57, 0.04);
   transition: transform 0.18s ease, box-shadow 0.18s ease;
 }

 #why-axiever .card-fin:hover {
   transform: translateY(-6px);
 }

 #why-axiever .icon-fin {
   min-width: 56px;
   min-height: 56px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .icon-automation {
   background: linear-gradient(180deg, #eef9ff, #e8f6ff);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }

 .icon-sync {
   background: linear-gradient(180deg, #f1fff6, #e9fff0);
 }

 .icon-shield-fin {
   background: linear-gradient(180deg, #fff9ec, #fff7eb);
 }

 .icon-briefcase-fin {
   background: linear-gradient(180deg, #fff7f2, #fff4f0);
 }

 #why-axiever .card-content-fin h3 {
   font-size: 18px;
   margin-bottom: 8px;
   color: #05263a;
   font-weight: 700;
   margin-top: 0px;
   letter-spacing: 0.6px;
 }

 #why-axiever .card-content-fin p {
   margin: 0;
   color: #526c74;
   font-size: 14px;
   line-height: 1.45;
 }

 /* CTA row */
 .cta-row {
   margin-top: 22px;
   display: flex;
   gap: 12px;
   align-items: center;
   flex-wrap: wrap;
 }

 .btn-primary {
   background: #04262f;
   color: #fff;
   padding: 12px 18px;
   border-radius: 10px;
   font-weight: 700;
   text-decoration: none;
   box-shadow: 0 8px 20px rgba(4, 38, 47, 0.12);
 }

 .btn-secondary {
   color: #0b7fc1;
   padding: 10px 14px;
   border-radius: 10px;
   text-decoration: none;
   font-weight: 600;
   border: 1px solid rgba(11, 127, 193, 0.08);
 }

 .cta-info {
   margin-left: 12px;
   color: #6f8a90;
   font-size: 14px;
 }

 /* Responsive grid */
 @media(max-width: 760px) {

   .rail {
     padding: 26px 20px 10px !important;
   }

   .rail-track {
     position: relative;
     padding-left: 22px !important;
   }

   .rail-track::before {
     left: 0px !important;
   }

   #why-axiever .cards-fin {
     grid-template-columns: repeat(1, 1fr);
   }
 }



 /* Header row */
 .header-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   margin-bottom: 34px;
 }

 .header-row h2 {
   margin: 0;
   font-weight: 900;
   letter-spacing: -0.02em;
   line-height: 1.08;
   font-size: clamp(28px, 4.5vw, 40px);
   color: #0b2036;
 }

 .btn-primary {
   text-decoration: none;
   background: #0e9276;
   color: #fff;
   font-weight: 800;
   padding: 12px 18px;
   border-radius: 100px;
   box-shadow: 0 8px 22px rgba(14, 146, 118, 0.25);
 }

 /* Layout grid */
 .layout-fin {
   display: grid;
   grid-template-columns: 520px 1fr;
   gap: 28px;
   align-items: start;
 }

 /* Rail */
 .rail {
   position: relative;
   background: #ffffff;
   border: 1px solid #e6eef7;
   border-radius: 20px;
   padding: 26px 26px 10px;
   box-shadow: 0 12px 28px rgba(11, 32, 54, 0.06);
   overflow: hidden;
 }

 .rail .grid-bg {
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(to right, rgba(11, 42, 100, 0.05) 1px, transparent 1px),
     linear-gradient(to bottom, rgba(11, 42, 100, 0.05) 1px, transparent 1px);
   background-size: 24px 24px;
   pointer-events: none;
 }

 .rail h3 {
   margin-bottom: 18px;
   font-size: 16px;
   font-weight: 800;
   color: #0b2a64;
   margin-top: 0px;
 }

 .rail-track {
   position: relative;
   padding-left: 36px;
 }

 .rail-track::before {
   content: "";
   position: absolute;
   left: 14px;
   top: 10px;
   bottom: 10px;
   width: 4px;
   border-radius: 4px;
   background: linear-gradient(180deg, #00b686 0%, #0078d4 50%, #ff7a1a 100%);
   box-shadow: 0 0 0 4px rgba(0, 182, 134, 0.06);
 }

 /* Nodes */
 .rail-node {
   position: relative;
   margin-bottom: 22px;
 }

 .node-dot {
   position: absolute;
   left: -30px;
   top: 2px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
 }

 .node-dot.blue {
   background: #0078d4;
   box-shadow: 0 0 0 6px rgba(0, 120, 212, 0.15);
 }

 .node-dot.green {
   background: #00b686;
   box-shadow: 0 0 0 6px rgba(0, 182, 134, 0.18);
 }

 .node-dot.orange {
   background: #ff7a1a;
   box-shadow: 0 0 0 6px rgba(255, 122, 26, 0.18);
 }

 .node-card {
   border-radius: 14px;
   padding: 16px;
 }

 .blue-card {
   background: #f7fbff;
   border: 1px solid #d8e7fb;
 }

 .green-card {
   background: #f6fffb;
   border: 1px solid #cfeee5;
 }

 .orange-card {
   background: #fff8f2;
   border: 1px solid #ffd9bf;
 }

 .node-header {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 6px;
 }

 .node-header strong {
   font-size: 17px;
 }

 .step-tag {
   font-weight: 900;
   font-size: 12px;
   border-radius: 999px;
   padding: 4px 8px;
 }

 .step-tag.blue {
   color: #0078d4;
   background: #e7f2ff;
 }

 .step-tag.green {
   color: #0e9276;
   background: #dff7f0;
 }

 .step-tag.orange {
   color: #a55300;
   background: #ffe9d6;
 }

 .node-card p {
   margin: 0;
   font-size: 15px;
   line-height: 1.6;
 }

 /* Side Panels */
 .side-panels {
   display: grid;
   grid-template-columns: 1fr;
   gap: 22px;
 }

 .panel-fin {
   background: #ffffff;
   border: 1px solid #e6eef7;
   border-radius: 20px;
   padding: 22px 24px;
   box-shadow: 0 10px 26px rgba(11, 32, 54, 0.06);
 }

 .panel-header {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 8px;
 }

 .fin-icon {
   width: 36px;
   height: 36px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .bg-blue {
   background: #e8f2ff;
 }

 .bg-green {
   background: #e9fff6;
 }

 .panel-fin h4 {
   margin: 0;
   font-size: 18px;
   font-weight: 800;
   color: #0b2a64;
 }

 .panel-fin ul {
   margin: 0;
   padding-left: 22px;
   color: #0b2a64;
   line-height: 1.75;
   font-size: 15px;
 }

 /* CTA button */
 .cta-btn {
   text-decoration: none;
   background: linear-gradient(90deg, #0e9276, #0078d4);
   color: #fff;
   border-radius: 16px;
   padding: 14px 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
 }

 /* Responsive Design */
 @media (max-width: 980px) {
   .layout-fin {
     grid-template-columns: 1fr;
   }
 }

 /* Header and CTA */
 .fin-heading {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
   margin-bottom: 40px;
 }

 .fin-heading h2 {
   margin: 0;
   font-size: 26px;
   font-weight: 900;
   line-height: 1.1;
   color: #0b2036;
 }

 .fin-heading h2 span {
   color: #00b686;
 }

 .fin-heading p {
   margin: 8px 0 0;
   color: #395770;
   font-size: 16px;
 }

 .cta-btn {
   text-decoration: none;
   background: #0b2a64;
   color: #fff;
   font-weight: 800;
   padding: 14px 24px;
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(11, 42, 100, 0.25);
   transition: all 0.25s ease;
 }

 .cta-btn:hover {
   background: #093058;
   transform: translateY(-2px);
 }

 /* fin-card grid layout */
 .fin-card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
   gap: 24px;
 }

 /* Base fin-card styles */
 .fin-card {
   position: relative;
   border-radius: 20px;
   padding: 28px 24px;
   box-shadow: 0 8px 24px rgba(11, 32, 54, 0.05);
   border: 1px solid #e6eef7;
   transition: all 0.25s ease;
 }

 .fin-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 14px 34px rgba(11, 32, 54, 0.12);
 }

 .fin-card h3 {
   margin: 0 0 12px;
   font-size: 18px;
   font-weight: 800;
   color: #0b2036;
   letter-spacing: 0.5px;
 }

 .fin-card ul {
   margin: 0;
   padding-left: 20px;
   color: #29455d;
   line-height: 1.7;
   font-size: 15px;
 }

 /* Color Variants */
 .fin-card.blue {
   background: #f8fcff;
 }

 .fin-card.green {
   background: #f9fffb;
 }

 .fin-card.orange {
   background: #fff8f4;
   border-color: #f6e3d4;
 }

 .fin-card.blue-light {
   background: #f8fbff;
 }

 .fin-card.green-light {
   background: #f9fffb;
 }

 .fin-card.orange-light {
   background: #fff8f4;
   border-color: #f6e3d4;
 }

 /* Gradient bars */
 .fin-card.blue .bar {
   background: linear-gradient(90deg, #0078d4, #00b686);
 }

 .fin-card.green .bar {
   background: linear-gradient(90deg, #00b686, #00dcb4);
 }

 .fin-card.orange .bar {
   background: linear-gradient(90deg, #ff7a1a, #ff9f5a);
 }

 .fin-card.blue-light .bar {
   background: linear-gradient(90deg, #4f8eff, #0078d4);
 }

 .fin-card.green-light .bar {
   background: linear-gradient(90deg, #00b686, #4acfa1);
 }

 .fin-card.orange-light .bar {
   background: linear-gradient(90deg, #ff7a1a, #f5a94b);
 }

 .bar {
   height: 4px;
   width: 70px;
   border-radius: 8px;
   margin-bottom: 16px;
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
   .fin-heading {
     flex-direction: column;
     align-items: flex-start;
   }

   .cta-btn {
     align-self: flex-start;
   }

   .fin-card-grid {
     grid-template-columns: 1fr;
   }
 }

 /* integration */
 #integrations {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
   align-items: flex-start;
   position: relative;
   box-sizing: border-box;
   font-family: "Inter", "Segoe UI", sans-serif;
   background: #fff;
 }

 .decorative-blobs {
   position: absolute;
   left: -120px;
   top: -40px;
   opacity: 0.06;
 }

 .integrations-left {
   flex: 1 1 540px;
   min-width: 280px;
   position: relative;
   z-index: 2;
 }

 .integrations-left h1 {
   margin-bottom: 14px;
   font-size: 38px;
   font-weight: 800;
   color: #071431;
   line-height: 1.03;
 }

 .integrations-left p {
   margin-bottom: 22px;
   color: #475569;
   max-width: 680px;
   font-size: 16px;
   line-height: 1.6;
 }

 .int-stats-row {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-bottom: 22px;
 }

 .int-stat-card {
   background: #fff;
   padding: 14px;
   border-radius: 12px;
   box-shadow: 0 6px 18px rgba(12, 34, 56, 0.06);
   min-width: 130px;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .int-icon {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .int-icon.blue {
   background: linear-gradient(180deg, #e7f0ff, #dbeeff);
 }

 .int-icon.orange {
   background: linear-gradient(180deg, #fff7ed, #ffedd5);
 }

 .int-icon.green {
   background: linear-gradient(180deg, #ecfff7, #d1fde6);
 }

 .int-stat-value {
   font-size: 14px;
   color: #0b1220;
   font-weight: 700;
   margin-bottom: 4px;
 }

 .int-stat-desc {
   font-size: 13px;
   color: #64748b;
 }

 .cta-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 10px;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 12px 18px;
   border-radius: 10px;
   font-weight: 700;
   text-decoration: none;
   transition: 0.25s ease;
 }

 .btn.primary {
   background: #0b69ff;
   color: #fff;
   box-shadow: 0 8px 20px rgba(11, 105, 255, 0.18);
 }

 .btn.primary:hover {
   background: #0854cc;
 }

 .btn.outline {
   border: 1px solid #dbeafe;
   color: #0b69ff;
   background: transparent;
 }

 .btn.outline:hover {
   background: #f5f9ff;
 }

 .footnote {
   font-size: 12px;
   color: #94a3b8;
   margin-top: 6px;
 }

 .integrations-right {
   flex: 0 1 425px;
   min-width: 260px;
 }

 .quick-integrations {
   background: linear-gradient(180deg, #ffffff, #fbfdff);
   padding: 18px;
   border-radius: 14px;
   box-shadow: 0 5px 10px rgba(12, 34, 56, 0.06);
 }

 .quick-integrations h3 {
   font-size: 16px;
   color: #071431;
   font-weight: 800;
   margin-bottom: 10px;
 }

 .quick-integrations h3 span {
   font-weight: 500;
   color: #6b7280;
   font-size: 13px;
 }

 .int-carousel {
   display: flex;
   gap: 12px;
   overflow-x: auto;
   scrollbar-width: thin;
   padding: 6px 6px 8px;
 }

 .int-logo-card {
   min-width: 180px;
   background: #fff;
   border-radius: 12px;
   padding: 12px;
   box-shadow: 0 8px 20px rgba(9, 30, 63, 0.06);
   display: flex;
   align-items: center;
   gap: 12px;
   flex-shrink: 0;
 }

 .int-logo {
   width: 44px;
   height: 44px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .int-logo-title {
   font-weight: 700;
   font-size: 15px;
   color: #071431;
   margin-bottom: 4px;
 }

 .int-logo-desc {
   font-size: 13px;
   color: #6b7280;
 }

 .int-logo.blue-bg {
   background: linear-gradient(180deg, #f1f9ff, #e6f2ff);
 }

 .int-logo.pink-bg {
   background: linear-gradient(180deg, #fff5f7, #ffeef2);
 }

 .int-logo.green-bg {
   background: linear-gradient(180deg, #effff9, #dffef2);
 }

 .int-logo.yellow-bg {
   background: linear-gradient(180deg, #fffaf0, #fff1d6);
 }

 .int-carousel-hint {
   margin-top: 12px;
   font-size: 13px;
   color: #64748b;
 }

 .hero-illustration {
   margin-top: 14px;
   background: linear-gradient(180deg, #ffffff, #f8fcff);
   padding: 14px;
   border-radius: 14px;
   box-shadow: 0 5px 10px rgba(12, 34, 56, 0.06);
 }

 /* ---------- RESPONSIVE DESIGN ---------- */

 /* Tablets (992px and below) */
 @media (max-width: 992px) {
   #integrations {
     flex-direction: column;
     gap: 48px;
   }

   .integrations-left {
     order: 1;
   }

   .integrations-right {
     order: 2;
     max-width: 100%;
   }

   .integrations-left h1 {
     font-size: 32px;
   }

   .int-stat-card {
     flex: 1 1 45%;
   }

   .cta-buttons {
     justify-content: flex-start;
   }
 }

 /* Mobile (767px and below) */
 @media (max-width: 767px) {
   #integrations {
     padding: 50px 18px;
     padding-bottom: 0px;
   }

   .integrations-left h1 {
     font-size: 26px;
     line-height: 1.2;
   }

   .integrations-left p {
     font-size: 15px;
   }

   .int-stats-row {
     flex-direction: column;
   }

   .int-stat-card {
     flex: 1 1 100%;
   }

   .cta-buttons {
     flex-direction: column;
   }

   .btn {
     width: 100%;
   }

   .int-logo-card {
     min-width: 150px;
   }

   .hero-illustration {
     padding: 10px;
   }
 }


 /* --- Header --- */
 .section-header {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   position: relative;
   z-index: 2;
   flex-wrap: wrap;
 }

 .section-header .int-label {
   background: linear-gradient(90deg, #4f46e5, #06b6d4);
   padding: 8px 12px;
   border-radius: 999px;
   font-weight: 700;
   font-size: 13px;
   color: white;
   box-shadow: 0 6px 20px rgba(79, 70, 229, 0.15);
   flex-shrink: 0;
 }

 .section-header h2 {
   font-size: 30px;
   font-weight: 700;
   color: #252a32;
   line-height: 1.1;
   margin: 0;
 }

 .section-header p {
   margin: 6px 0 0;
   color: #6b7280;
   max-width: 760px;
   font-size: 15px;
 }

 /* --- Steps Grid --- */
 .int-steps-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 24px;
   margin-top: 32px;
   position: relative;
   z-index: 2;
 }

 /* --- Step Card --- */
 .int-steps-card {
   background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: 16px;
   padding: 24px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
   transition: transform 0.3s, box-shadow 0.3s;
   position: relative;
 }

 .int-steps-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
 }

 .int-steps-top {
   display: flex;
   align-items: flex-start;
   gap: 16px;
 }

 .int-icon {
   width: 58px;
   height: 58px;
   border-radius: 14px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .int-icon-blue {
   background: linear-gradient(135deg, #eef2ff, #f0fdf4);
 }

 .int-icon-orange {
   background: linear-gradient(135deg, #fff7ed, #fffbee);
 }

 .int-icon-green {
   background: linear-gradient(135deg, #eff6ff, #f0fdf4);
 }

 .int-steps-card h3 {
   margin: 0;
   font-weight: 700;
   font-size: 17px;
 }

 .int-steps-card p {
   color: #6b7280;
   font-size: 14px;
   margin: 6px 0 0;
 }

 .underline {
   height: 4px;
   width: 50px;
   border-radius: 8px;
   margin-top: 10px;
   background: linear-gradient(90deg, #4f46e5, #06b6d4);
 }

 .int-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 10px;
 }

 .int-tags span {
   background: linear-gradient(90deg, #f0f9ff, #ffffff);
   padding: 6px 10px;
   border-radius: 999px;
   font-size: 12px;
   color: #4f46e5;
   font-weight: 600;
   border: 1px solid rgba(0, 0, 0, 0.05);
 }

 .number {
   position: absolute;
   top: 8px;
   right: 14px;
   font-size: 44px;
   font-weight: 800;
   color: rgba(0, 0, 0, 0.05);
 }

 /* --- Footer Row --- */
 .footer-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 32px;
   gap: 12px;
   flex-wrap: wrap;
 }

 .footer-row div {
   color: #6b7280;
   font-size: 14px;
 }

 .btn {
   padding: 12px 18px;
   border-radius: 10px;
   font-weight: 700;
   background: linear-gradient(90deg, #4f46e5, #06b6d4);
   color: white;
   text-decoration: none;
   box-shadow: 0 10px 30px rgba(79, 70, 229, 0.15);
   transition: transform 0.2s;
 }

 .btn:hover {
   transform: translateY(-2px);
 }

 /* --- Responsive --- */
 @media (max-width: 992px) {
   .integration-steps {
     padding: 0px 0px;
   }

   .section-header {
     flex-direction: column;
   }

   .section-header h2 {
     font-size: 30px;
   }
 }

 @media (max-width: 768px) {
   .integration-steps {
     padding: 0px 0px;
   }

   .section-header h2 {
     font-size: 26px;
   }

   .footer-row {
     flex-direction: column;
     text-align: center;
   }

   .btn {
     width: 100%;
     text-align: center;
   }
 }

 @media (max-width: 480px) {
   .section-header h2 {
     font-size: 20px;
   }

   .int-steps-grid {
     gap: 18px;
   }

   .int-steps-card {
     padding: 20px;
   }
 }

 .integration-container {
   max-width: 1220px;
   margin: 0 auto;
   text-align: left;
 }


 .subtitle {
   color: #64748b;
   font-size: 15px;
   margin-top: 10px;
   max-width: 780px;
 }

 /* Grid */
 .integration-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
   gap: 24px;
   margin-top: 40px;
 }

 /* card_int */
 .integration-card_int {
   display: flex;
   align-items: flex-start;
   background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: 16px;
   padding: 24px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
   position: relative;
   transition: transform 0.3s, box-shadow 0.3s;
 }

 .integration-card_int:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 32px rgba(79, 70, 229, 0.1);
 }

 .int_icon-box {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: linear-gradient(135deg, #f5f7ff, #ffffff);
   border: 1px solid rgba(0, 0, 0, 0.05);
   display: grid;
   place-items: center;
   margin-right: 16px;
 }

 .card_int-content h3 {
   margin: 0;
   font-size: 16px;
   font-weight: 700;
 }

 .card_int-content p {
   font-size: 14px;
   color: #64748b;
   margin: 6px 0 10px;
 }

 /* tag_int */
 .tag_int {
   position: absolute;
   top: 18px;
   right: 18px;
   font-size: 12px;
   font-weight: 600;
   padding: 6px 10px;
   border-radius: 999px;
   color: #0f172a;
 }

 .tag_int.insights {
   background: #e0f2fe;
   color: #0369a1;
 }

 .tag_int.finance-int {
   background: #fef3c7;
   color: #92400e;
 }

 .tag_int.scale {
   background: #fef9c3;
   color: #854d0e;
 }

 .tag_int.mapping {
   background: #dbeafe;
   color: #1e40af;
 }

 /* Progress bar */
 .progress {
   width: 50px;
   height: 3px;
   background: linear-gradient(90deg, #4f46e5, #06b6d4);
   border-radius: 8px;
   margin-top: 8px;
 }

 /* Footer */
 .integration-footer {
   margin-top: 48px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
 }

 .integration-footer p {
   color: #64748b;
   font-size: 14px;
   margin: 0;
 }

 .cta {
   display: flex;
   align-items: center;
   gap: 16px;
 }

 .btn-primary {
   background: linear-gradient(90deg, #4f46e5, #06b6d4);
   color: #fff;
   padding: 12px 18px;
   border-radius: 10px;
   text-decoration: none;
   font-weight: 700;
   box-shadow: 0 8px 20px rgba(79, 70, 229, 0.2);
 }

 .link {
   color: #4f46e5;
   font-weight: 600;
   text-decoration: none;
 }

 .integration-section h2 {
   font-size: 30px;
   font-weight: 700;
   margin: 0;
   color: #252a32;
 }

 .integration-container h2 span {
   background: linear-gradient(90deg, #4f46e5, #06b6d4);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .integration-card_int {
     flex-direction: column;
     align-items: flex-start;
   }

   .int_icon-box {
     margin-bottom: 10px;
   }

   .tag_int {
     position: static;
     margin-top: 8px;
   }

   .integration-footer {
     flex-direction: column;
     align-items: flex-start;
   }

   .integration-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
   }
 }


 /* Decorative blobs */
 .integration-map .blob {
   position: absolute;
   border-radius: 50%;
   filter: blur(70px);
   opacity: 0.14;
   pointer-events: none;
 }

 .integration-map .blob-right {
   right: 48px;
   top: -60px;
   width: 300px;
   height: 300px;
   background: radial-gradient(circle at 30% 30%, #4f46e5, transparent);
 }

 .integration-map .blob-left {
   left: 40px;
   bottom: -80px;
   width: 260px;
   height: 260px;
   background: radial-gradient(circle at 70% 70%, #06b6d4, transparent);
 }

 /* Text content_int */
 .integration-map h3 {
   margin: 0 0 6px;
   font-size: 30px;
   font-weight: 700;
 }

 .integration-map .intro_int {
   margin: 0 0 22px;
   color: #6b7280;
   font-size: 14px;
   max-width: 920px;
 }

 /* Flow node_ints */
 .flow-wrap_int {
   display: flex;
   align-items: center;
   gap: 18px;
   justify-content: space-between;
   flex-wrap: nowrap;
   overflow-x: auto;
   padding: 18px 0px;
   scroll-behavior: smooth;
 }

 .flow-wrap_int::-webkit-scrollbar {
   height: 6px;
 }

 .flow-wrap_int::-webkit-scrollbar-thumb {
   background: rgba(79, 70, 229, 0.25);
   border-radius: 3px;
 }

 /* node_int boxes */
 .node_int {
   flex: 0 0 220px;
   min-width: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .node_int>div {
   background: #ffffff;
   border: 1px solid rgba(15, 23, 42, 0.06);
   border-radius: 12px;
   padding: 16px 18px;
   box-shadow: 0 8px 30px rgba(16, 24, 40, 0.04);
   display: flex;
   align-items: center;
   justify-content_int: center;
   min-height: 56px;
   transition: transform 0.28s, box-shadow 0.28s;
 }

 .node_int>div:hover {
   transform: translateY(-6px) scale(1.02);
   box-shadow: 0 18px 40px rgba(16, 24, 40, 0.06);
 }

 /* connector_int (arrow line) */
 .connector_int {
   flex: 0 0 40px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* Legend and Actions */
 .legend {
   color: #6b7280;
   margin-top: 22px;
   font-size: 13.5px;
   max-width: 920px;
   line-height: 1.45;
 }

 .actions {
   display: flex;
   gap: 12px;
   align-items: center;
   margin-top: 18px;
   flex-wrap: wrap;
 }

 .btn-primary {
   background: linear-gradient(90deg, #4f46e5, #06b6d4);
   color: #fff;
   padding: 10px 14px;
   border-radius: 10px;
   font-weight: 700;
   text-decoration: none;
   box-shadow: 0 12px 30px rgba(79, 70, 229, 0.12);
   transition: transform 0.25s ease;
 }

 .btn-primary:hover {
   transform: translateY(-2px);
 }

 .link-docs {
   color: #4f46e5;
   text-decoration: none;
   font-weight: 600;
 }

 /* ------------------------- */
 /* 🌐 RESPONSIVE BEHAVIOR */
 /* ------------------------- */

 /* Medium screens (tablets) */
 @media (max-width: 1024px) {
   .integration-map {
     padding: 0px;
   }
 }

 /* Tablets and below */
 @media (max-width: 820px) {
   .flow-wrap_int {
     gap: 12px;
     padding: 8px 2px;
     flex-wrap: wrap;
     justify-content: center;
   }

   .flow-wrap_int .node_int {
     min-width: 160px;
     flex-basis: 45%;
   }

   .integration-map h3 {
     font-size: 28px;
   }

   .integration-map .intro_int {
     font-size: 13px;
   }
 }

 /* Mobile (under 560px) */
 @media (max-width: 560px) {
   .flow-wrap_int .node_int {
     flex-basis: 100%;
   }

   .integration-map h3 {
     font-size: 26px;
   }

   .btn-primary {
     width: 100%;
     text-align: center;
   }
 }

 /* grid layout */
 .fi-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 18px;
   margin-top: 20px;
   align-items: start;
 }

 /* card shell: glass panel + gradient outline */
 .fi-card {
   --tiltX: 0deg;
   --tiltY: 0deg;
   position: relative;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 253, 255, 0.96));
   border-radius: 16px;
   padding: 18px;
   padding-top: 22px;
   box-shadow: 0 12px 40px rgba(8, 18, 32, 0.06);
   border: 1px solid rgba(6, 21, 35, 0.04);
   overflow: visible;
   transform-style: preserve-3d;
   transition: transform .36s cubic-bezier(.2, .9, .2, 1), box-shadow .36s, filter .36s;
   will-change: transform, opacity;
   text-align: center;
   cursor: default;
   opacity: 0;
   transform: translateY(18px) scale(.995);
   animation: cardIn .54s cubic-bezier(.2, .9, .2, 1) forwards;
   perspective: 900px;
 }

 /* decorative gradient outline using pseudo-element */
 .fi-card::after {
   content: '';
   position: absolute;
   inset: -1.4px;
   border-radius: calc(16px + 1.4px);
   padding: 1.4px;
   background: linear-gradient(90deg, rgba(79, 70, 229, 0.10), rgba(6, 182, 212, 0.10));
   -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   pointer-events: none;
   z-index: 0;
   opacity: 0.98;
   transition: opacity .36s;
 }

 /* front content sits above pseudo */
 .fi-card>* {
   position: relative;
   z-index: 1;
 }

 /* logo container: frosted chip with subtle inner shadow */
 .fi-logo {
   width: 72px;
   height: 72px;
   border-radius: 14px;
   margin: 0 auto 12px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(245, 250, 255, 0.9));
   border: 1px solid rgba(6, 21, 35, 0.03);
   box-shadow: 0 8px 18px rgba(6, 21, 35, 0.04) inset;
   transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
 }

 .fi-logo img,
 .fi-logo svg {
   width: 40px;
   height: 40px;
   display: block;
   object-fit: contain;
 }

 .fi-title {
   font-weight: 800;
   font-size: 15px;
   margin: 6px 0 4px;
   color: #071426
 }

 .fi-sub {
   color: #64748b;
   font-size: 13px;
   margin: 0;
 }

 /* hover: soft 3D tilt + lift + glow */
 .fi-card:hover {
   transform: translateY(-12px) rotateX(0deg) rotateY(0deg) scale(1.02);
   box-shadow: 0 38px 110px rgba(8, 18, 32, 0.12);
   filter: saturate(1.03);
 }

 .fi-card:hover .fi-logo {
   transform: translateY(-6px) scale(1.05);
   box-shadow: 0 18px 48px rgba(79, 70, 229, 0.12);
   filter: drop-shadow(0 8px 18px rgba(79, 70, 229, 0.06));
 }

 /* keyboard focus for accessibility */
 .fi-card:focus-within {
   outline: 3px solid rgba(79, 70, 229, 0.12);
   outline-offset: 6px;
 }

 /* stagger entrance */
 @keyframes cardIn {
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 }

 .fi-card {
   animation-delay: calc(var(--i, 0) * 0.08s);
 }

 /* tiny badge style */
 .fi-badge {
   display: inline-block;
   margin-top: 10px;
   padding: 6px 9px;
   border-radius: 999px;
   font-weight: 800;
   font-size: 12px;
   color: #042014;
   background: linear-gradient(90deg, #e6ffef, #dff7e7);
   border: 1px solid rgba(3, 60, 25, 0.04);
 }

 /* respects reduced motion */
 @media (prefers-reduced-motion: reduce) {

   .fi-card,
   .fi-logo {
     animation: none !important;
     transition: none !important;
     transform: none !important;
   }
 }

 /* responsive small tweaks */
 @media (max-width:680px) {
   .fi-logo {
     width: 64px;
     height: 64px;
   }

   .fi-logo img {
     width: 32px;
     height: 32px;
   }
 }

 /* caption / CTA row */
 .fi-cta {
   margin-top: 22px;
   display: flex;
   gap: 12px;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .fi-btn {
   background: linear-gradient(90deg, #4f46e5, #06b6d4);
   color: #fff;
   padding: 10px 16px;
   border-radius: 12px;
   text-decoration: none;
   font-weight: 800;
   box-shadow: 0 16px 44px rgba(79, 70, 229, 0.14);
 }

 /* Base layout */
 .bd_hero {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   align-items: center;
   gap: 40px;
   color: #0b2036;
 }

 /* Text column */
 .bd_hero-content {
   display: flex;
   flex-direction: column;
   /* gap: 20px; */
 }

 .bd_headline {
   font-size: clamp(1.8rem, 3vw, 2.5rem);
   font-weight: 800;
   line-height: 1.2;
   color: #0b2036;
 }

 .bd_sub {
   font-size: clamp(0.95rem, 2vw, 1.05rem);
   color: #64748b;
   line-height: 1.6;
 }

 .cta-row {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 8px;
 }

 /* Buttons */
 .btn {
   background: linear-gradient(90deg, #4f46e5, #06b6d4);
   color: #fff;
   padding: 12px 18px;
   border-radius: 14px;
   font-weight: 700;
   border: none;
   cursor: pointer;
   box-shadow: 0 10px 25px rgba(79, 70, 229, 0.2);
   transition: transform 0.25s ease;
 }

 .btn:hover {
   transform: translateY(-3px);
 }

 .btn-ghost {
   background: transparent;
   border: 1.5px solid rgba(79, 70, 229, 0.2);
   color: #4f46e5;
   padding: 12px 18px;
   border-radius: 14px;
   font-weight: 700;
   cursor: pointer;
   transition: background 0.25s;
 }

 .btn-ghost:hover {
   background: rgba(79, 70, 229, 0.05);
 }

 /* KPI carousel */
 .kpi-carousel {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   margin-top: 16px;
 }

 .kpi {
   background: #f8fafc;
   border: 1px solid rgba(15, 23, 42, 0.05);
   border-radius: 12px;
   padding: 14px 16px;
   flex: 1 1 150px;
   text-align: center;
 }

 .kpi .num {
   font-size: 1.4rem;
   font-weight: 700;
   color: #4f46e5;
 }

 .kpi .lbl {
   font-size: 0.85rem;
   color: #64748b;
 }

 /* Chart column */
 .bd_hero-chart {
   display: flex;
   justify-content: center;
 }

 .chart-card {
   background: linear-gradient(90deg, #eff6ff, #f0f9ff);
   border: 1px solid rgba(37, 99, 235, 0.05);
   border-radius: 14px;
   padding: 20px;
   box-shadow: 0 8px 22px rgba(2, 6, 23, 0.04);
   width: 100%;
   max-width: 460px;
 }

 .chart-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #0b2036;
   font-size: 0.95rem;
   font-weight: 600;
 }

 .chart-area {
   height: 200px;
   margin-top: 14px;
   background: #fff;
   border-radius: 8px;
   color: #64748b;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
 }

 .chart-footer {
   display: flex;
   gap: 12px;
   margin-top: 14px;
   font-size: 0.9rem;
   color: #64748b;
 }

 .chart-footer>div {
   flex: 1;
   text-align: center;
 }

 /* Responsive adjustments */
 @media (max-width: 900px) {
   .bd_hero {
     gap: 32px;
     padding-top: 50px;
   }
 }

 @media (max-width: 640px) {
   .cta-row {
     justify-content: center;
   }

   .kpi-carousel {
     justify-content: center;
   }

   .chart-card {
     max-width: 100%;
   }
 }

 #axiever-action-reports .panel_bd {
   /* background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
      border-radius:14px;
      padding:22px;
      box-shadow:0 6px 18px rgba(15,23,42,0.06); */
   border: 1px solid rgba(15, 23, 42, 0.02);
 }

 #axiever-action-reports .kicker {
   color: #6b7280;
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   margin-bottom: 4px;
 }

 #axiever-action-reports h2 {
   margin: 6px 0 8px;
   font-size: 22px;
   font-weight: 700;
 }

 #axiever-action-reports p.lead {
   margin: 0 0 18px;
   color: #6b7280;
   font-size: 15px;
 }

 /* === Grid Table === */
 #axiever-action-reports .table {
   display: grid;
   grid-template-columns: 1fr 1fr 220px 180px;
   gap: 16px;
   align-items: center;
   border-top: 1px solid #eef2f7;
   /* padding-top:14px; */
   padding: 10px;
 }

 #axiever-action-reports .th {
   font-weight: 700;
   color: #0b1220;
   padding: 12px 0;
   border-bottom: 1px solid transparent;
 }

 #axiever-action-reports .row {
   display: contents;
 }

 #axiever-action-reports .cell {
   padding: 18px 0;
   border-bottom: 1px dashed rgba(15, 23, 42, 0.03);
   display: flex;
   align-items: center;
   gap: 12px;
 }

 #axiever-action-reports .report-name {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 #axiever-action-reports .icon-wrap {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   background: rgba(13, 27, 42, 0.02);
   display: inline-grid;
   place-items: center;
   flex-shrink: 0;
 }

 #axiever-action-reports .report-title {
   font-weight: 700;
 }

 #axiever-action-reports .why {
   color: #6b7280;
   font-size: 14px;
 }

 #axiever-action-reports .impact {
   font-weight: 700;
   font-size: 15px;
 }

 /* === Impact Meter === */
 #axiever-action-reports .meter {
   height: 8px;
   background: #eef2f7;
   border-radius: 999px;
   overflow: hidden;
   margin-top: 8px;
   width: 160px;
 }

 #axiever-action-reports .meter>i {
   display: block;
   height: 100%;
   background: linear-gradient(90deg, #34d399, #10b981);
   width: 60%;
 }

 /* === Buttons === */
 #axiever-action-reports .btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
   border-radius: 10px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   box-shadow: 0 6px 18px rgba(13, 27, 42, 0.06);
   transition: transform .14s ease, box-shadow .14s ease;
 }

 #axiever-action-reports .btn:active {
   transform: translateY(1px);
 }

 #axiever-action-reports .btn.run {
   background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%);
   color: #fff;
 }

 #axiever-action-reports .btn.rebalance {
   background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
   color: #fff;
 }

 #axiever-action-reports .btn.plan {
   background: linear-gradient(90deg, #06b6d4 0%, #0ea5e9 100%);
   color: #fff;
 }

 #axiever-action-reports .muted-small {
   color: #6b7280;
   font-size: 13px;
 }

 #axiever-action-reports .btn:focus {
   outline: 3px solid rgba(13, 110, 253, 0.12);
   outline-offset: 2px;
 }

 /* === Responsive === */
 @media (max-width:880px) {
   #axiever-action-reports .table {
     grid-template-columns: 1fr;
     gap: 12px;
   }

   #axiever-action-reports .th {
     display: none;
   }

   #axiever-action-reports .cell {
     flex-direction: column;
     align-items: flex-start;
     padding: 14px;
     background: #fbfdff;
     border-radius: 10px;
   }

   #axiever-action-reports .meter {
     width: 100%;
   }

   #axiever-action-reports .btn {
     width: 100%;
     justify-content: center;
   }
 }

 @media (max-width:600px) {
   #axiever-action-reports h2 {
     font-size: 20px;
   }

   #axiever-action-reports p.lead {
     font-size: 14px;
   }

   #axiever-action-reports .report-title {
     font-size: 15px;
   }

   #axiever-action-reports .btn {
     font-size: 14px;
     padding: 8px 12px;
   }
 }

 .role-dashboards p.label_sd {
   font-size: 13px;
   color: #6b7280;
   font-weight: 600;
   letter-spacing: 0.6px;
   margin-bottom: 8px;
 }

 .role-dashboards h2 {
   font-size: 30px;
   color: #111827;
   margin: 0 0 10px;
 }

 .role-dashboards p.sub_sd {
   color: #6b7280;
   font-size: 15px;
   margin: 0 0 32px;
 }

 /* Grid Layout */
 .dashboard-grid_sd {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 20px;
 }

 /* card_sd Styles */
 .card_sd {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 22px;
   border-radius: 14px;
   border: 1px solid rgba(0, 0, 0, 0.06);
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .card_sd:hover {
   transform: translateY(-6px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
 }

 .card_sd-icon {
   width: 50px;
   height: 50px;
   display: grid;
   place-items: center;
   border-radius: 10px;
 }

 .card_sd h3 {
   margin: 0;
   font-size: 17px;
   color: var(--text-dark);
   font-weight: 700;
 }

 .card_sd p {
   margin: 6px 0 0;
   font-size: 14px;
   color: #6b7280;
 }

 /* Role-specific Colors */
 .cxo {
   background: linear-gradient(180deg, rgba(15, 79, 245, 0.06), rgba(15, 79, 245, 0.01));
   border-left: 4px solid rgba(15, 79, 245, 0.15);
 }

 .cxo .card_sd-icon {
   background: rgba(15, 79, 245, 0.08);
 }

 .finance_sd {
   background: linear-gradient(180deg, rgba(14, 163, 106, 0.06), rgba(14, 163, 106, 0.01));
   border-left: 4px solid rgba(14, 163, 106, 0.15);
 }

 .finance_sd .card_sd-icon {
   background: rgba(14, 163, 106, 0.08);
 }

 .warehouse {
   background: linear-gradient(180deg, rgba(217, 119, 6, 0.06), rgba(217, 119, 6, 0.01));
   border-left: 4px solid rgba(217, 119, 6, 0.15);
 }

 .warehouse .card_sd-icon {
   background: rgba(217, 119, 6, 0.08);
 }

 .sales_sd {
   background: linear-gradient(180deg, rgba(214, 51, 108, 0.06), rgba(214, 51, 108, 0.01));
   border-left: 4px solid rgba(214, 51, 108, 0.15);
 }

 .sales_sd .card_sd-icon {
   background: rgba(214, 51, 108, 0.08);
 }

 /* Responsive */
 @media (max-width: 768px) {
   section.role-dashboards {
     padding: 24px;
   }

   .role-dashboards h2 {
     font-size: 24px;
   }

   .card_sd {
     padding: 18px;
   }
 }

 @media (max-width: 480px) {

   .role-dashboards h2 {
     font-size: 22px;
   }

   .dashboard-grid_sd {
     gap: 16px;
   }
 }

 section.playbooks {
   max-width: 1200px;
   background: #fff;
   border-radius: 16px;
   padding: 32px;
   box-shadow: 0 10px 30px rgba(9, 30, 66, 0.06);
 }

 section.playbooks p.label {
   font-weight: 700;
   font-size: 13px;
   color: #6b7280;
   letter-spacing: 0.6px;
   margin: 0 0 8px;
 }

 section.playbooks h2 {
   margin: 0 0 10px;
   font-size: 28px;
   line-height: 1.05;
 }

 section.playbooks p.sub_sd {
   margin: 0 0 22px;
   color: #6b7280;
   font-size: 15px;
 }

 /* Grid layout */
 .playbook-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 20px;
   align-items: stretch;
 }

 /* Card styles */
 .playbook-card {
   background: #fbfdff;
   border-radius: 12px;
   padding: 20px;
   border: 1px solid rgba(9, 30, 66, 0.04);
   box-shadow: 0 6px 18px rgba(9, 30, 66, 0.04);
   transition: transform 0.18s ease, box-shadow 0.18s ease;
   cursor: pointer;
 }

 .playbook-card:hover,
 .playbook-card:focus-within {
   transform: translateY(-6px);
   box-shadow: 0 12px 30px rgba(9, 30, 66, 0.08);
 }

 .playbook-card .top_sd {
   display: flex;
   align-items: flex-start;
   gap: 14px;
 }

 .icon-box {
   min-width: 44px;
   min-height: 44px;
   border-radius: 10px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(15, 79, 245, 0.06);
 }

 .blue_sd {
   background: linear-gradient(180deg, #eef6ff, #ffffff);
 }

 .green_sd {
   background: linear-gradient(180deg, #f0fff6, #ffffff);
 }

 .pink_sd {
   background: linear-gradient(180deg, #fff6f8, #ffffff);
 }

 .playbook-card h3 {
   margin: 0;
   font-size: 16px;
   font-weight: 700;
   color: #071033;
 }

 .playbook-card p {
   margin: 8px 0 0;
   color: #6b7280;
   font-size: 14px;
   line-height: 1.35;
 }

 /* Button row */
 .actions_sd {
   margin-top: 16px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
 }

 .actions_sd button {
   border: 0;
   padding: 10px 14px;
   border-radius: 10px;
   background: linear-gradient(90deg, #1f7fff, #0fb3d8);
   color: #fff;
   font-weight: 700;
   box-shadow: 0 8px 18px rgba(15, 79, 245, 0.12);
   cursor: pointer;
   transition: opacity 0.2s;
 }

 .actions_sd button:hover {
   opacity: 0.9;
 }

 .actions_sd span {
   color: #94a3b8;
   font-size: 13px;
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
   section.playbooks {
     padding: 24px;
   }

   section.playbooks h2 {
     font-size: 24px;
   }

   .playbook-card {
     padding: 18px;
   }
 }

 @media (max-width: 480px) {

   .playbook-grid {
     gap: 16px;
   }

   section.playbooks h2 {
     font-size: 22px;
   }
 }

 .hero_trad-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  gap: 40px;
  margin: auto;
}

.hero_trad {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.feature-tags div {
  background: #ffffff;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(3,7,18,0.04);
  font-size: 14px;
}

.hero_trad h1 {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  font-weight: 800;
  margin: 0;
}
/* ===== hero_trad Card ===== */
.hero_trad-card {
  background: linear-gradient(180deg, #eff6ff, #f8fafc);
  border: 1px solid rgba(37, 99, 235, 0.05);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 22px rgba(3, 7, 18, 0.04);
}

.hero_trad-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.hero_trad-card-title {
  font-weight: 800;
}
.chart {
  background: rgba(255, 255, 255, 0.4);
  padding: 16px;
  border-radius: 10px;
  margin: 10px 0 16px;
}
/* ===== Responsive ===== */
@media (max-width: 768px) {
  .hero_trad-wrap {
    padding: 40px 16px;
    gap: 28px;
  }

  .hero_trad h1 {
    font-size: 1.8rem;
  }

  .hero_trad-card {
    padding: 16px;
  }
}