:root {
   --navy-950: #0a0505;
   --navy-900: #120808;
   --navy-850: #180b0b;
   --navy-800: #210e0e;
   --navy-700: #2c1212;
   --line: #3c1717;
   --cyan-300: #ff8a83;
   --cyan-400: #eb333b;
   --cyan-500: #c21e26;
   --gold-400: #d61f29;
   --gold-300: #ff6f66;
   --ink-050: #f8f2f1;
   --ink-200: #dcc9c8;
   --ink-400: #ab8886;
   --ink-600: #7a5654;
 }
body{
    padding-top:80px;
}
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
.icon {
    background: none !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
}
 html {
   scroll-behavior: smooth;
 }

 body {
   background: var(--navy-950);
   color: var(--ink-050);
   font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
 }

 ::selection {
   background: var(--cyan-400);
   color: var(--navy-950);
 }

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

 .wrap {
   max-width: 1180px;
   margin: 0 auto;
   padding: 0 32px;
 }

 .eyebrow {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--gold-300);
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }

 .eyebrow::before { 
   width: 55px;
    height: 2px;
    background: #ff6f66;
   width: 6px;
   height: 6px;
   border-radius: 50%; 
   box-shadow: 0 0 0 4px rgba(214, 31, 41, .15);
 }
.bizLine-AI{
  width: 55px;
    height: 2px;
    background: #ff6f66;
   width: 6px;
   height: 6px;
   border-radius: 50%; 
   box-shadow: 0 0 0 4px rgba(214, 31, 41, .15);
}
 h1,
 h2,
 h3 { 
   font-weight: 600;
   letter-spacing: -.01em;
 }

 .grad-text {
   background: #ff3434;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 /* ===== NAV ===== */
 /* ===== HERO ===== */
 .hero {
  width: 100%;
    min-height: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    padding: 9rem 6%;
    background: url(/assets/hero/product-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
 }

 .hero::before {
   content: '';
   position: absolute;
   inset: -20% -10% auto -10%;
   height: 640px;
   background:
     radial-gradient(480px 320px at 30% 20%, rgba(235, 51, 59, .16), transparent 70%),
     radial-gradient(420px 300px at 75% 10%, rgba(214, 31, 41, .10), transparent 70%);
   pointer-events: none;
 }

 .hero-grid {
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
   background-size: 56px 56px;
   mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 40%, transparent 100%);
   pointer-events: none;
 }

 .hero h1 {
   position: relative;
   font-size: clamp(38px, 6vw, 68px);
   line-height: 1.06;
   margin: 26px 0 22px;
 }

 .hero p.lead {
   position: relative;
   max-width: 640px;
   margin: 0 auto 44px;
   color: var(--ink-200);
   font-size: 17.5px;
   line-height: 1.65;
 }

 .hero-actions {
   position: relative;
   display: flex;
   justify-content: center;
   gap: 16px;
   margin-bottom: 64px;
 }

 .btn-lg {
   display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    background: #d60000;
    color: #fff;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 700;
    transition: .25s;
 }
.hero .wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero .eyebrow{
    justify-content: center;
}

.hero h1{
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
}

.hero .lead{
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.hero-actions{
    justify-content: center;
    margin-bottom: 50px;
}

.console{
    margin: 0 auto;
}
 /* ambient orbit illustration */
 .orbit-wrap {
   position: absolute;
   top: 120px;
   left: 50%;
   transform: translateX(-50%);
   width: 760px;
   height: 760px;
   pointer-events: none;
   z-index: 0;
   mask-image: radial-gradient(circle at 50% 30%, black 45%, transparent 72%);
 }

 .orbit {
   width: 100%;
   height: 100%;
   overflow: visible;
 }

 .orbit-ring circle:not(.orbit-node) {
   fill: none;
   stroke: var(--line);
   stroke-width: 1;
 }

 .orbit-node {
   fill: var(--cyan-400);
   filter: drop-shadow(0 0 6px rgba(235, 51, 59, .7));
 }

 .orbit-node--gold {
   fill: var(--gold-400);
   filter: drop-shadow(0 0 6px rgba(214, 31, 41, .7));
 }

 .orbit-ring {
   transform-origin: 380px 380px;
   animation: spin linear infinite;
 }

 .orbit-ring--1 {
   animation-duration: 38s;
 }

 .orbit-ring--2 {
   animation-duration: 26s;
   animation-direction: reverse;
 }

 .orbit-ring--3 {
   animation-duration: 18s;
 }

 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .orbit-ring {
     animation: none;
   }
 }

 @media (max-width:860px) {
   .orbit-wrap {
     display: none;
   }
 }

 /* signature: live agent trace console */
 .console {
   position: relative;
   max-width: 720px;
   margin: 0 auto;
   background: linear-gradient(180deg, var(--navy-850), var(--navy-900));
   border: 1px solid var(--line);
   border-radius: 16px;
   box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02) inset;
   text-align: left;
   overflow: hidden;
 }

 .console-bar {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 18px;
   border-bottom: 1px solid var(--line);
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   color: var(--ink-400);
 }

 .console-bar .dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--ink-600);
 }

 .console-bar .status {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 6px;
   color: var(--cyan-300);
 }

 .console-bar .status .pulse {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--cyan-400);
   animation: pulse 1.6s infinite;
 }

 @keyframes pulse {

   0%,
   100% {
     opacity: 1;
   }

   50% {
     opacity: .25;
   }
 }

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

 .console-prompt {
   font-size: 15.5px;
   color: var(--ink-050);
   line-height: 1.55;
   padding-bottom: 16px;
   border-bottom: 1px dashed var(--line);
   margin-bottom: 16px;
 }

 .console-prompt::before {
   content: '"';
   color: var(--gold-300);
 }

 .console-prompt::after {
   content: '"';
   color: var(--gold-300);
 }

 .trace {
   display: flex;
   flex-direction: column;
   gap: 10px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12.5px;
 }

 .trace-row {
   display: flex;
   align-items: center;
   gap: 10px;
   color: #fafafa;
   opacity: .35;
   transition: opacity .4s ease, color .4s ease;
 }

 .trace-row.active {
   opacity: 1;
   color: var(--ink-200);
 }

 .trace-row .tag {
   flex-shrink: 0;
   width: 86px;
   font-size: 11px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--ink-600);
 }

 .trace-row.active .tag {
   color: var(--gold-300);
 }

 .trace-row .glyph {
   width: 16px;
   height: 16px;
   border-radius: 4px;
   flex-shrink: 0;
   border: 1px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   color: var(--ink-600);
 }

 .trace-row.active .glyph {
   border-color: var(--cyan-400);
   color: var(--cyan-300);
   background: rgba(235, 51, 59, .08);
 }

 .trace-row.done .glyph {
   border-color: var(--gold-400);
   color: var(--gold-300);
   background: rgba(214, 31, 41, .08);
 }

 .suggested {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   padding: 16px 22px 20px;
   border-top: 1px solid var(--line);
 }

 .suggested span.label {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: var(--ink-600);
   align-self: center;
   margin-right: 2px;
 }

 .chip {
   font-size: 12.5px;
   font-family: 'Inter', sans-serif;
   font-weight: 500;
   padding: 7px 14px;
   border-radius: 20px;
   border: 1px solid var(--line);
   color: var(--ink-200);
 }

 /* ===== SECTION SHARED ===== */
 section {
   padding: 110px 0;
   position: relative;
 }

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

 .section-head h2 {
   font-size: clamp(28px, 4vw, 40px);
   margin-top: 16px;
 }

 .section-head p {
   color: #fff;
   font-size: 16px;
   margin-top: 14px;
   line-height: 1.6;
 }

 .divider {
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--line), transparent);
 }

 /* ===== WHY (two column) ===== */
 .why {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center;
 }

 .why h2 {
   font-size: clamp(26px, 3.4vw, 36px);
   margin-bottom: 22px;
   font-weight: 800;
 }

 .why p {
   color: #dbdbdb;
   font-size: 15.5px;
   line-height: 1.75;
   margin-bottom: 16px;
 }

 .capability-card {
   background: var(--navy-850);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 6px;
 }

 .cap-item {
   display: flex;
   gap: 16px;
   padding: 20px 18px;
 }

 .cap-item+.cap-item {
   border-top: 1px solid var(--line);
 }

 .icon {
   width: 24px;
   height: 24px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.6;
   stroke-linecap: round;
   stroke-linejoin: round;
   display: block;
 }

 .cap-icon {
   flex-shrink: 0;
   width: 40px;
   height: 40px;
   border-radius: 11px;
   background: var(--navy-800);
   border: 1px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--cyan-300);
 }

 .cap-item h3 {
   font-family: 'Inter', sans-serif;
   font-size: 15px;
   font-weight: 600;
   margin-bottom: 5px;
   color: var(--ink-050);
 }

 .cap-item p {
   font-size: 13.5px;
   color: #dbdbdb;
   line-height: 1.55;
 }

 /* ===== DELIVERS (3 card) ===== */
 .delivers-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
 }

 .out-card {
   background: linear-gradient(180deg, var(--navy-850), var(--navy-900));
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 30px 26px;
   transition: border-color .2s ease, transform .2s ease;
 }

 .out-card:hover {
   border-color: var(--cyan-500);
   transform: translateY(-3px);
 }

 .out-num {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   color:#dbdbdb;
   margin-bottom: 18px;
   display: block;
 }

 .out-card h3 {
   font-family: 'Inter', sans-serif;
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 10px;
 }

 .out-card p {
   font-size: 14.5px;
   color:#dbdbdb;
   line-height: 1.6;
 }

 /* ===== WHY ACCELTREE (6 grid) ===== */
 .feat-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line);
   border-radius: 18px;
   overflow: hidden;
 }

 .feat-card {
   background: var(--navy-900);
   padding: 34px 30px;
 }

 .feat-icon {
   width: 42px;
   height: 42px;
   margin-bottom: 20px;
   border-radius: 11px;
   color: var(--gold-300);
   background: rgba(214, 31, 41, .08);
   border: 1px solid rgba(214, 31, 41, .25);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .feat-icon .icon {
   width: 21px;
   height: 21px;
 }

.out-icon{
    width:52px;
    height:52px;
    border-radius:12px;
    border:1px solid rgba(255,138,131,.25);
    background:rgba(235,51,59,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff8a83;
    flex-shrink:0;
    margin-bottom: 5%;
}

.out-icon .icon{
    width:26px;
    height:26px;
    display:block;
    stroke:currentColor;
    stroke-width:1.8;
    fill:none;
    vector-effect:non-scaling-stroke;
    shape-rendering:geometricPrecision;
}

 .eco-icon {
   width: 36px;
   height: 36px;
   border-radius: 9px;
   color: var(--gold-300);
   background: var(--navy-800);
   border: 1px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .eco-icon .icon {
   width: 18px;
   height: 18px;
 }

 .flow-node .icon {
   width: 22px;
   height: 22px;
 }

 .feat-card h3 {
   font-family: 'Inter', sans-serif;
   font-size: 16.5px;
   font-weight: 600;
   margin-bottom: 9px;
 }

 .feat-card p {
   font-size: 13.8px;
   color: #dbdbdb;
   line-height: 1.6;
 }

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

 .eco-card {
   background: var(--navy-850);
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 26px 24px;
   position: relative;
 }

 .eco-card.offline {
   border-color: rgba(214, 31, 41, .4);
   background: linear-gradient(160deg, rgba(214, 31, 41, .06), var(--navy-850));
 }

 .eco-top {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 16px;
 }

 .eco-top .badge {
   margin-left: auto;
 }

 .eco-card h3 {
   font-family: 'Inter', sans-serif;
   font-size: 16px;
   font-weight: 600;
 }

 .badge {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--gold-300);
   border: 1px solid rgba(214, 31, 41, .4);
   padding: 3px 8px;
   border-radius: 20px;
 }

 .eco-card p {
   font-size: 13.5px;
   color:  #dbdbdb;
   line-height: 1.6;
 }

 /* ===== HOW IT WORKS ===== */
 .flow {
   position: relative;
   display: flex;
   justify-content: space-between;
   gap: 8px;
   padding-top: 8px;
 }

 .flow::before {
   content: '';
   position: absolute;
   top: 29px;
   left: 6%;
   right: 6%;
   height: 1px;
   background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
 }

 .flow-step {
   position: relative;
   flex: 1;
   text-align: center;
 }

 .flow-node {
   width: 58px;
   height: 58px;
   margin: 0 auto 18px;
   border-radius: 50%;
   background: var(--navy-850);
   border: 1px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Fraunces', serif;
   font-weight: 600;
   color: var(--cyan-300);
   font-size: 18px;
   position: relative;
   z-index: 2;
 }

 .flow-step:nth-child(2n) .flow-node {
   border-color: rgba(214, 31, 41, .5);
   color: var(--gold-300);
 }


/* Hover Effect */

.flow-step:hover .flow-node {
  transform: translateY(-6px) scale(1.12);
  background: var(--red-600); /* or any accent color */
  border-color: var(--red-500);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(214, 31, 41, 0.12),
              0 12px 28px rgba(214, 31, 41, 0.35);
}
 

.flow-step:hover .flow-node .icon {
  transform: rotate(10deg) scale(1.10);
}




 .flow-step h3 {
   font-family: 'Inter', sans-serif;
   font-size: 15px;
   font-weight: 600;
   margin-bottom: 6px;
 }

 .flow-step p {
   font-size: 13px;
   color: #dbdbdb;
   line-height: 1.5;
   padding: 0 6px;
 }
.redcolor-agentic{
  color: #f3303c;
  font-weight: 800;
}
 /* ===== VERTICALS ===== */
 .verticals {
   text-align: center;
 }

 .pill-row {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: center;
   margin-top: 36px;
   
   border-radius: 24px;
 }

 .pill {
   font-size: 14px;
   font-weight: 500;
   color: var(--ink-200);
   padding: 10px 20px;
   border-radius: 24px;
   border: 1px solid var(--line);
   background: var(--navy-850);
 }


.pill:hover {
    background: linear-gradient(135deg, #eb333b, #ff6f66);
    color: #fff;
    border-color: #ff6f66;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(235, 51, 59, .35);
   border-radius: 24px;
}
.pill::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #eb333b, #ff6f66);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    z-index: -1;
    
   border-radius: 24px;
}

.pill:hover::before {
    transform: scaleX(1);
}

.pill:hover {
    color: #fff;
    border-color: #ff6f66;
   border-radius: 24px;
}



 /* ===== CTA ===== */
 .cta-wrap {
   background:
     radial-gradient(600px 260px at 50% 0%, rgba(235, 51, 59, .14), transparent 70%),
     radial-gradient(500px 220px at 80% 100%, rgba(214, 31, 41, .10), transparent 70%),
     var(--navy-850);
   border: 1px solid var(--line);
   border-radius: 24px;
   padding: 70px 40px;
   text-align: center;
 }

 .cta-wrap h2 {
   font-size: clamp(28px, 4vw, 40px);
   margin-bottom: 18px;
 }

 .cta-wrap p {
   max-width: 520px;
   margin: 0 auto 34px;
   color: var(--ink-200);
   font-size: 16px;
   line-height: 1.6;
 }

 /* ===== FOOTER ===== */
 footer {
   border-top: 1px solid var(--line);
   padding: 36px 0;
 }

 .foot-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .foot-links {
   display: flex;
   gap: 18px;
 }

 .foot-links a {
   color: var(--ink-400);
 }

 .foot-copy {
   color: var(--ink-600);
   font-size: 13px;
 }

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

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

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

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

   .flow {
     flex-direction: column;
     gap: 28px;
   }

   .flow::before {
     display: none;
   }

   .navlinks {
     display: none;
   }

   .foot-row {
     flex-direction: column;
     gap: 16px;
     text-align: center;
   }
 }



 /* ===== Enhanced Responsive Improvements ===== */
.wrap{
    max-width:1320px;
    width:100%;
    margin:0 auto;
    padding:0 24px;
}
 .hero {
   padding: clamp(70px, 10vw, 70px) 0 clamp(70px, 8vw, 70px)
 }

 .hero h1 {
   font-size: clamp(42px, 5vw, 72px);
   line-height: 1.05
 }

 .hero .lead {
   width: min(100%, 700px);
   margin-inline: auto
 }

 .console {
   width: min(100%, 850px)
 }

 section {
   padding: clamp(70px, 8vw, 70px) 0
 }

 .out-card,
 .feat-card,
 .eco-card {
   display: flex;
   flex-direction: column;
   height: 100%
 }

 .delivers-grid,
 .feat-grid,
 .eco-grid {
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
 }

 @media (max-width:1200px) {
   .wrap {
     width: min(100% - 40px, 1100px)
   }

   .hero h1 {
     font-size: 58px
   }

   .console {
     width: 100%
   }
 }

 @media (max-width:1024px) {
   .orbit-wrap {
     display: none
   }
 }

 @media (max-width:992px) {
   .flow {
     flex-wrap: wrap
   }

   .flow-step {
     width: 50%;
     flex: unset
   }
 }

 @media (max-width:768px) {
   .wrap {
     width: min(100% - 32px, 100%)
   }

   .hero {
     padding-top: 90px
   }

   .hero h1 {
     font-size: 42px
   }

   .hero .lead {
     font-size: 16px
   }

   .trace-row {
     flex-wrap: wrap
   }

   .trace-row .tag {
     width: auto
   }

   .flow-step {
     width: 100%
   }

   .section-head {
     margin-bottom: 40px
   }
 }

 @media (max-width:576px) {
   .hero h1 {
     font-size: 34px
   }

   .hero-actions {
     flex-direction: column
   }

   .btn-lg {
     width: 100%
   }

   .console-body {
     padding: 18px
   }

   .console-prompt {
     font-size: 14px
   }

   .chip {
     width: 100%;
     text-align: center
   }
 }