:root{
  --bg:#06101d;
  --bg-soft:#091624;
  --surface:#0c1a2a;
  --surface-2:#102235;
  --card:rgba(14,31,48,.78);
  --border:rgba(148,180,210,.14);
  --border-strong:rgba(148,180,210,.23);
  --text:#f5f9fc;
  --muted:#9db0c3;
  --muted-2:#70869b;
  --blue:#4c8dff;
  --blue-light:#76aaff;
  --green:#39d98a;
  --green-light:#70efad;
  --shadow:0 24px 70px rgba(0,0,0,.28);
  --radius:22px;
  --container:1180px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body{
  margin:0;
  background:
    radial-gradient(circle at 15% 0%,rgba(39,103,198,.12),transparent 30%),
    var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

body.nav-open{overflow:hidden}

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

button,input,textarea,select{font:inherit}

.container{
  width:min(calc(100% - 40px),var(--container));
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(6,16,29,.76);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav-wrap{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-weight:800;
  font-size:20px;
  letter-spacing:-.4px;
}

.brand-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,var(--blue),#5b6dff 55%,var(--green));
  color:white;
  font-size:20px;
  font-weight:900;
  box-shadow:0 8px 25px rgba(76,141,255,.25);
}

.nav{
  display:flex;
  align-items:center;
  gap:29px;
  font-size:14px;
  font-weight:600;
  color:#b8c7d5;
}

.nav>a{
  transition:.2s ease;
}

.nav>a:hover{color:white}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:8px;
}

.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:12px;
  padding:11px;
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  height:2px;
  margin:5px 0;
  background:white;
  border-radius:4px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:0 20px;
  border-radius:12px;
  font-size:14px;
  font-weight:750;
  border:1px solid transparent;
  transition:transform .2s ease,background .2s ease,border .2s ease,box-shadow .2s ease;
}

.btn:hover{transform:translateY(-2px)}

.btn-primary{
  color:#06111c;
  background:linear-gradient(135deg,#65a0ff 0%,#5e8fff 45%,#47dc94 125%);
  box-shadow:0 10px 30px rgba(76,141,255,.2);
}

.btn-primary:hover{
  box-shadow:0 14px 35px rgba(76,141,255,.32);
}

.btn-secondary{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.12);
  color:white;
}

.btn-secondary:hover{background:rgba(255,255,255,.09)}

.btn-ghost{
  border-color:var(--border);
  color:#d7e2ec;
}

.btn-ghost:hover{
  background:rgba(255,255,255,.05);
  border-color:var(--border-strong);
}

.btn-large{
  min-height:54px;
  padding:0 26px;
  border-radius:14px;
  font-size:15px;
}

.hero{
  min-height:760px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:100px 0 110px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.hero:before{
  content:"";
  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:64px 64px;
  mask-image:linear-gradient(to bottom,black,transparent 85%);
  pointer-events:none;
}

.hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(10px);
  pointer-events:none;
}

.hero-glow-one{
  width:600px;
  height:600px;
  right:-170px;
  top:-200px;
  background:radial-gradient(circle,rgba(52,120,255,.17),transparent 68%);
}

.hero-glow-two{
  width:500px;
  height:500px;
  left:-250px;
  bottom:-250px;
  background:radial-gradient(circle,rgba(45,217,139,.1),transparent 68%);
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:76px;
  align-items:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:22px;
  padding:8px 12px;
  border:1px solid rgba(81,218,150,.2);
  background:rgba(52,199,125,.065);
  border-radius:999px;
  color:#86edb9;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(57,217,138,.1);
}

.hero h1{
  max-width:760px;
  margin:0;
  font-size:clamp(48px,5.2vw,74px);
  line-height:1.02;
  letter-spacing:-3px;
  font-weight:820;
}

.hero h1 span{
  display:block;
  background:linear-gradient(90deg,#72a8ff,#5c91ff 40%,#53e09a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-lead{
  max-width:650px;
  margin:28px 0 0;
  color:#aabccc;
  font-size:19px;
  line-height:1.75;
}

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

.hero-actions.centered{justify-content:center}

.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:19px;
  margin-top:25px;
  color:#7f96aa;
  font-size:12px;
  font-weight:600;
}

.hero-trust span::first-letter{color:var(--green)}

.conversation-demo{
  position:relative;
  border:1px solid rgba(130,166,200,.18);
  border-radius:26px;
  background:
    linear-gradient(145deg,rgba(17,38,58,.93),rgba(8,22,36,.96));
  box-shadow:
    0 40px 100px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.015) inset;
  overflow:hidden;
  transform:perspective(1200px) rotateY(-2deg) rotateX(1deg);
}

.conversation-demo:before{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  right:-90px;
  top:-100px;
  background:radial-gradient(circle,rgba(76,141,255,.17),transparent 70%);
}

.demo-topbar{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 22px;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:13px;
  font-weight:700;
}

.demo-topbar>div{
  display:flex;
  align-items:center;
  gap:8px;
}

.online-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 12px rgba(57,217,138,.7);
}

.demo-status{
  color:#77e5ae;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(57,217,138,.08);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.demo-body{padding:25px}

.message{
  max-width:84%;
  margin-bottom:16px;
  padding:15px 17px;
  border-radius:16px;
  font-size:13px;
  line-height:1.6;
}

.message-label{
  display:block;
  margin-bottom:5px;
  color:#7890a5;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.customer-message{
  margin-left:auto;
  background:#18314a;
  border-bottom-right-radius:5px;
}

.ai-message{
  background:linear-gradient(135deg,rgba(67,118,201,.16),rgba(54,204,132,.08));
  border:1px solid rgba(96,155,234,.17);
  border-bottom-left-radius:5px;
}

.demo-events{
  display:grid;
  gap:9px;
  margin-top:26px;
}

.event{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 13px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.065);
  background:rgba(255,255,255,.025);
}

.event-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(57,217,138,.09);
  color:var(--green);
  font-size:12px;
  font-weight:900;
}

.event div{
  display:flex;
  flex-direction:column;
}

.event strong{font-size:12px}
.event small{color:#72899e;font-size:10px}

.event-highlight{
  border-color:rgba(57,217,138,.18);
  background:rgba(57,217,138,.055);
}

.section{
  position:relative;
  padding:112px 0;
  border-bottom:1px solid rgba(255,255,255,.045);
}

.section-heading{
  max-width:650px;
  margin-bottom:48px;
}

.section-heading.center{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.section-label{
  display:inline-block;
  margin-bottom:13px;
  color:#6ba5ff;
  font-size:11px;
  font-weight:850;
  letter-spacing:.14em;
}

.section-heading h2,
.setup-box h2,
.cta-box h2{
  margin:0;
  font-size:clamp(34px,4vw,52px);
  line-height:1.1;
  letter-spacing:-2px;
}

.section-heading p{
  margin:19px 0 0;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}

.problem-section{background:#071321}

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

.problem-card,
.feature-card,
.benefit-grid article,
.industry-grid article{
  position:relative;
  padding:28px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(15,32,49,.8),rgba(10,24,38,.8));
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}

.problem-card:hover,
.feature-card:hover,
.benefit-grid article:hover,
.industry-grid article:hover{
  transform:translateY(-5px);
  border-color:rgba(89,147,230,.28);
  background:linear-gradient(145deg,rgba(18,39,59,.95),rgba(10,25,40,.95));
}

.problem-card>span{
  display:block;
  margin-bottom:38px;
  color:#46627d;
  font-size:11px;
  font-weight:800;
}

.problem-card h3,
.feature-card h3,
.benefit-grid h3,
.industry-grid h3{
  margin:0 0 9px;
  font-size:18px;
}

.problem-card p,
.feature-card p,
.benefit-grid p,
.industry-grid p{
  margin:0;
  color:#8398aa;
  font-size:14px;
}

.statement{
  max-width:850px;
  margin:55px auto 0;
  text-align:center;
  color:#dbe7f1;
  font-size:20px;
  font-weight:650;
}

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

.feature-icon{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  margin-bottom:27px;
  border-radius:13px;
  background:linear-gradient(145deg,rgba(75,141,255,.16),rgba(57,217,138,.08));
  border:1px solid rgba(100,155,235,.15);
  color:#82afff;
  font-weight:900;
}

.how-section{
  background:linear-gradient(180deg,#07121f,#091725);
}

.steps{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  max-width:1000px;
  margin:65px auto 0;
}

.step{
  width:260px;
  text-align:center;
}

.step-number{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  margin:0 auto 22px;
  border-radius:18px;
  color:#07121e;
  background:linear-gradient(135deg,#75a9ff,#5ee0a0);
  font-size:18px;
  font-weight:900;
  box-shadow:0 12px 32px rgba(74,143,240,.18);
}

.step h3{
  margin:0 0 10px;
  font-size:18px;
}

.step p{
  margin:0;
  color:#8196a9;
  font-size:14px;
}

.step-line{
  width:110px;
  height:1px;
  margin-top:28px;
  background:linear-gradient(90deg,rgba(99,157,238,.1),rgba(99,157,238,.5),rgba(99,157,238,.1));
}

.center-action{
  margin-top:48px;
  text-align:center;
}

.integration-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px;
  align-items:center;
}

.integration-layout .section-heading{margin:0}

.channel-list{
  display:grid;
  gap:12px;
}

.channel-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:17px;
  align-items:center;
  padding:19px;
  border:1px solid var(--border);
  border-radius:17px;
  background:rgba(13,30,47,.72);
}

.channel-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#142d47;
  color:#81afff;
  font-size:21px;
  font-weight:900;
}

.channel-card h3{
  margin:0 0 3px;
  font-size:15px;
}

.channel-card p{
  margin:0;
  color:#7d93a6;
  font-size:12px;
}

.channel-status{
  padding:6px 10px;
  border-radius:999px;
  color:#65e3a3;
  background:rgba(57,217,138,.07);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.journey-section{background:#071321}

.journey{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:55px;
}

.journey-item{
  width:135px;
  min-height:100px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:9px;
  text-align:center;
  border:1px solid var(--border);
  border-radius:17px;
  background:rgba(15,32,49,.75);
}

.journey-item span{
  color:#5982a9;
  font-size:9px;
  font-weight:900;
}

.journey-item strong{font-size:12px}

.journey-arrow{
  color:#405b74;
  font-size:17px;
}

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

.benefit-grid article>strong{
  display:block;
  margin-bottom:23px;
  color:#70a8ff;
  font-size:24px;
}

.comparison-section{
  background:linear-gradient(180deg,#081523,#06111e);
}

.comparison{
  max-width:950px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.comparison-column{
  padding:34px;
  border:1px solid var(--border);
  border-radius:24px;
  background:rgba(13,29,45,.75);
}

.comparison-column h3{
  margin:0 0 25px;
  font-size:21px;
}

.comparison-column ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:15px;
}

.comparison-column li{
  position:relative;
  padding-left:29px;
  color:#a0b1c0;
  font-size:14px;
}

.comparison-column li:before{
  position:absolute;
  left:0;
  top:1px;
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:6px;
  font-size:10px;
  font-weight:900;
}

.with{
  border-color:rgba(57,217,138,.2);
  background:linear-gradient(145deg,rgba(17,48,48,.5),rgba(10,28,40,.8));
}

.with li:before{
  content:"✓";
  color:#62e8a6;
  background:rgba(57,217,138,.08);
}

.without li:before{
  content:"×";
  color:#8195a8;
  background:rgba(255,255,255,.04);
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.split .section-heading{margin:0}

.accent-text{
  display:block;
  margin-top:25px;
  color:#73e6ad;
  font-size:15px;
}

.handover-card,
.pipeline-card,
.security-visual{
  padding:30px;
  border:1px solid var(--border);
  border-radius:25px;
  background:linear-gradient(145deg,rgba(15,34,52,.9),rgba(9,24,38,.9));
  box-shadow:var(--shadow);
}

.handover-row{
  display:flex;
  align-items:center;
  gap:15px;
  padding:15px;
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.avatar{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:11px;
  font-weight:900;
}

.ai-avatar{
  color:#8bb5ff;
  background:rgba(76,141,255,.12);
}

.human-avatar{
  color:#72e6ac;
  background:rgba(57,217,138,.1);
}

.handover-row div{
  display:flex;
  flex-direction:column;
}

.handover-row strong{font-size:14px}
.handover-row small{color:#7890a4;font-size:11px}

.handover-line{
  width:1px;
  height:35px;
  margin:0 auto;
  background:linear-gradient(#34526c,#3d7b69);
}

.handover-label{
  width:max-content;
  max-width:100%;
  margin:0 auto;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(57,217,138,.07);
  color:#67dda2;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.knowledge-section{background:#071321}

.knowledge-board{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:30px;
  border:1px solid var(--border);
  border-radius:25px;
  background:rgba(13,30,47,.75);
}

.knowledge-board span{
  min-height:90px;
  display:flex;
  align-items:flex-end;
  padding:18px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(72,132,218,.08),rgba(57,217,138,.025));
  color:#b8c8d6;
  font-size:13px;
  font-weight:700;
}

.pipeline-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.pipeline-head span{
  padding:5px 9px;
  border-radius:999px;
  color:#65dfa3;
  background:rgba(57,217,138,.07);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
}

.pipeline-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.06);
}

.lead-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#5f9aff;
}

.pipeline-row div{
  display:flex;
  flex-direction:column;
}

.pipeline-row strong{font-size:12px}
.pipeline-row small{color:#72899d;font-size:10px}

.pipeline-row b{
  color:#7aa8d3;
  font-size:9px;
  font-weight:800;
}

.setup-section{padding:80px 0}

.setup-box{
  display:grid;
  grid-template-columns:1.1fr 1.4fr auto;
  gap:40px;
  align-items:center;
  padding:48px;
  border:1px solid rgba(83,145,230,.2);
  border-radius:28px;
  background:
    radial-gradient(circle at 0 0,rgba(69,135,235,.13),transparent 40%),
    linear-gradient(145deg,#0c1d2e,#091827);
}

.setup-box h2{font-size:36px}

.setup-box p{
  margin:12px 0 0;
  color:#8399ac;
}

.setup-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#a9bac9;
  font-size:11px;
  font-weight:700;
}

.setup-flow span{
  padding:9px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.055);
}

.setup-flow b{
  color:#4d6c87;
  font-weight:500;
}

.security-section{background:#071321}

.security-visual{
  min-height:310px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.shield{
  width:92px;
  height:105px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  clip-path:polygon(50% 0,92% 15%,86% 72%,50% 100%,14% 72%,8% 15%);
  background:linear-gradient(145deg,#4c8dff,#39d98a);
  color:#07121d;
  font-size:35px;
  font-weight:900;
}

.security-visual>span{
  font-size:17px;
  font-weight:800;
}

.security-visual small{
  margin-top:5px;
  color:#7890a4;
}

.legal-links{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:27px;
}

.legal-links a{
  color:#7aaaff;
  font-size:13px;
  font-weight:700;
}

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

.industry-grid article>span{
  display:block;
  margin-bottom:24px;
  font-size:25px;
}

.faq-section{
  background:linear-gradient(180deg,#071321,#06101d);
}

.faq-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:90px;
  align-items:start;
}

.faq-layout .section-heading{
  
  top:120px;
}

.faq-list{
  border-top:1px solid var(--border);
}

.faq-list details{
  border-bottom:1px solid var(--border);
}

.faq-list summary{
  position:relative;
  padding:24px 42px 24px 0;
  cursor:pointer;
  list-style:none;
  font-size:16px;
  font-weight:700;
}

.faq-list summary::-webkit-details-marker{display:none}

.faq-list summary:after{
  content:"+";
  position:absolute;
  right:5px;
  top:21px;
  color:#7194b5;
  font-size:23px;
  font-weight:400;
}

.faq-list details[open] summary:after{content:"−"}

.faq-list details p{
  margin:-4px 50px 24px 0;
  color:#899daf;
  font-size:14px;
}

.faq-list details a{color:#75a8ff}

.final-cta{
  position:relative;
  overflow:hidden;
  padding:120px 0;
}

.hero-glow-three{
  width:700px;
  height:500px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(67,130,225,.15),transparent 65%);
}

.cta-box{
  position:relative;
  z-index:2;
  max-width:880px;
  margin:0 auto;
  text-align:center;
}

.cta-box h2{
  font-size:clamp(42px,5vw,62px);
}

.cta-box>p{
  max-width:700px;
  margin:23px auto 0;
  color:#9cafbf;
  font-size:17px;
}

.cta-box>small{
  display:block;
  margin-top:24px;
  color:#667d92;
}

.footer{
  padding:70px 0 25px;
  border-top:1px solid rgba(255,255,255,.06);
  background:#050d17;
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:70px;
}

.footer-brand p{
  max-width:280px;
  margin:18px 0 0;
  color:#71869a;
  font-size:13px;
}

.footer-grid>div:not(.footer-brand){
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-grid strong{
  margin-bottom:6px;
  color:#d8e3ed;
  font-size:12px;
}

.footer-grid>div:not(.footer-brand) a{
  color:#748a9e;
  font-size:12px;
}

.footer-grid a:hover{color:white}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:55px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.055);
  color:#53697d;
  font-size:10px;
}

@media(max-width:1050px){
  .nav{gap:18px}

  .hero-grid{
    grid-template-columns:1fr 1fr;
    gap:40px;
  }

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

  .setup-box{
    grid-template-columns:1fr;
    text-align:center;
  }

  .setup-flow{flex-wrap:wrap}
}

@media(max-width:850px){
  .site-header{background:rgba(6,16,29,.94)}

  .nav-toggle{display:block}

  .nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:76px;
    min-height:calc(100vh - 76px);
    padding:35px 20px;
    background:#07111e;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border-top:1px solid var(--border);
  }

  .nav.open{display:flex}

  .nav>a{
    padding:15px 5px;
    border-bottom:1px solid rgba(255,255,255,.05);
    font-size:16px;
  }

  .nav-actions{
    margin:25px 0 0;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .hero{
    padding:75px 0 80px;
    min-height:auto;
  }

  .hero-grid,
  .integration-layout,
  .split,
  .faq-layout{
    grid-template-columns:1fr;
    gap:55px;
  }

  .hero-copy{text-align:center}
  .hero h1{letter-spacing:-2.5px}
  .hero-lead{margin-left:auto;margin-right:auto}
  .hero-actions,.hero-trust{justify-content:center}

  .conversation-demo{
    max-width:600px;
    width:100%;
    margin:0 auto;
    transform:none;
  }

  .feature-grid,
  .benefit-grid,
  .industry-grid{
    grid-template-columns:1fr 1fr;
  }

  .journey{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
  }

  .journey-arrow{display:none}

  .faq-layout .section-heading{position:static}

  .footer-grid{
    grid-template-columns:1.5fr 1fr 1fr;
  }

  .footer-brand{
    grid-column:1/-1;
  }
}

@media(max-width:600px){
  .container{width:min(calc(100% - 28px),var(--container))}

  .nav-wrap{min-height:68px}
  .nav{top:68px;min-height:calc(100vh - 68px)}

  .brand{font-size:18px}
  .brand-mark{width:35px;height:35px}

  .hero{padding:58px 0 68px}

  .hero h1{
    font-size:43px;
    letter-spacing:-2.2px;
  }

  .hero-lead{
    margin-top:22px;
    font-size:16px;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .hero-actions .btn{width:100%}

  .hero-trust{
    gap:9px 15px;
    font-size:10px;
  }

  .conversation-demo{border-radius:20px}
  .demo-body{padding:19px}
  .message{max-width:92%}

  .section{padding:78px 0}

  .section-heading{margin-bottom:35px}

  .section-heading h2,
  .setup-box h2{
    font-size:34px;
    letter-spacing:-1.4px;
  }

  .section-heading p{font-size:15px}

  .problem-grid,
  .feature-grid,
  .benefit-grid,
  .industry-grid,
  .comparison,
  .knowledge-board{
    grid-template-columns:1fr;
  }

  .problem-card,
  .feature-card,
  .benefit-grid article,
  .industry-grid article{
    padding:23px;
  }

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

  .step{width:100%;max-width:330px}
  .step-line{width:1px;height:35px;margin:0}

  .channel-card{
    grid-template-columns:auto 1fr;
  }

  .channel-status{
    grid-column:2;
    width:max-content;
  }

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

  .split{gap:40px}

  .setup-box{
    padding:30px 20px;
    border-radius:22px;
  }

  .setup-flow{
    flex-direction:column;
  }

  .setup-flow b{transform:rotate(90deg)}

  .faq-list summary{font-size:15px}

  .cta-box h2{
    font-size:40px;
    letter-spacing:-2px;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:40px 25px;
  }

  .footer-brand{grid-column:1/-1}

  .footer-bottom{
    flex-direction:column;
  }
}

/* === Animated CatchGrow hero === */

.hero{
  position:relative;
  min-width:0;
  padding:42px 10px 38px;
  isolation:isolate;
}

.hero-visual:before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:8% 2% 2%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(69,128,255,.15),rgba(48,217,139,.045) 48%,transparent 72%);
  filter:blur(14px);
}

.hero-visual:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:78%;
  height:1px;
  left:11%;
  top:52%;
  background:linear-gradient(90deg,transparent,rgba(86,151,255,.25),rgba(58,218,143,.24),transparent);
  transform:rotate(-12deg);
}

.hero-visual .conversation-demo{
  z-index:2;
  transform:perspective(1200px) rotateY(-2deg) rotateX(1deg);
  animation:heroCardFloat 6s ease-in-out infinite;
}

.demo-topbar-meta{
  display:flex;
  align-items:center;
  gap:8px;
}

.live-indicator{
  display:flex;
  align-items:center;
  gap:5px;
  color:#91a8ba;
  font-size:10px;
  font-weight:700;
}

.live-indicator i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#39d98a;
  box-shadow:0 0 0 0 rgba(57,217,138,.45);
  animation:livePulse 1.8s infinite;
}

.demo-channel-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 22px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(6,18,31,.38);
}

.demo-channel-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(145deg,rgba(127,87,255,.25),rgba(255,73,122,.18));
  color:#e7ddff;
  font-size:17px;
  font-weight:800;
}

.demo-channel-row div{
  display:flex;
  flex:1;
  flex-direction:column;
}

.demo-channel-row strong{
  font-size:11px;
}

.demo-channel-row small{
  margin-top:2px;
  color:#6f879c;
  font-size:9px;
}

.incoming-pill{
  padding:5px 8px;
  border:1px solid rgba(100,154,255,.16);
  border-radius:999px;
  background:rgba(76,141,255,.08);
  color:#83afff;
  font-size:8px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.typing-row{
  width:max-content;
  display:flex;
  align-items:center;
  gap:4px;
  margin:3px 0 15px;
  padding:10px 13px;
  border:1px solid rgba(90,143,219,.12);
  border-radius:14px 14px 14px 5px;
  background:rgba(68,112,178,.07);
}

.typing-row span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7fa6d3;
  animation:typingDot 1.1s infinite;
}

.typing-row span:nth-child(2){animation-delay:.16s}
.typing-row span:nth-child(3){animation-delay:.32s}

.typing-row small{
  margin-left:6px;
  color:#6f879b;
  font-size:8px;
}

.event{
  position:relative;
}

.event-score,
.opportunity-value{
  margin-left:auto;
  font-size:10px;
  font-weight:850;
}

.event-score{
  color:#76a9ff;
}

.opportunity-value{
  color:#6fe5a8;
}

.channel-orbit{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:9px;
  min-width:128px;
  padding:10px 12px;
  border:1px solid rgba(129,163,198,.16);
  border-radius:13px;
  background:rgba(10,27,43,.9);
  box-shadow:0 16px 45px rgba(0,0,0,.25);
  backdrop-filter:blur(14px);
}

.channel-orbit div{
  display:flex;
  flex-direction:column;
}

.channel-orbit strong{
  color:#dce9f5;
  font-size:9px;
}

.channel-orbit small{
  margin-top:2px;
  color:#6e879d;
  font-size:7px;
}

.channel-symbol{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.channel-instagram{
  top:5px;
  right:-18px;
  animation:orbitOne 5.4s ease-in-out infinite;
}

.channel-instagram .channel-symbol{
  background:linear-gradient(145deg,#7547d8,#df4e82);
}

.channel-facebook{
  left:-26px;
  top:27%;
  animation:orbitTwo 6.1s ease-in-out infinite;
}

.channel-facebook .channel-symbol{
  background:#2768d7;
}

.channel-web{
  right:-25px;
  bottom:15%;
  animation:orbitThree 5.8s ease-in-out infinite;
}

.channel-web .channel-symbol{
  background:linear-gradient(145deg,#238f74,#39d98a);
}

.handoff-toast{
  position:absolute;
  z-i
  right:18px;
  bottom:-2p
  display:flex;
  align-items:center;
  gap:10px;
  width:270px;
  padding:13px 15px;
  border:1px solid rgba(57,217,138,.2);
  border-radius:14px;
  background:rgba(9,31,38,.94);
  box-shadow:0 20px 50px rgba(0,0,0,.32);
  backdrop-filter:blur(16px);
}

.handoff-icon{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  flex:0 0 31px;
  border-radius:9px;
  background:rgba(57,217,138,.11);
  color:#54e59a;
  font-weight:900;
}

.handoff-toast div{
  display:flex;
  flex-direction:column;
}

.handoff-toast strong{
  font-size:10px;
}

.handoff-toast small{
  margin-top:3px;
  color:#718b9e;
  font-size:8px;
}

.hero-step{
  transition:opacity .45s ease,transform .45s ease,filter .45s ease;
}

.js .hero-step{
  opacity:.16;
  transform:translateY(8px);
  filter:saturate(.5);
}

.js .hero-step.is-active{
  opacity:1;
  transform:translateY(0);
  filter:saturate(1);
}

@keyframes heroCardFloat{
  0%,100%{transform:perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(0)}
  50%{transform:perspective(1200px) rotateY(-1deg) rotateX(.5deg) translateY(-8px)}
}

@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(57,217,138,.42)}
  70%{box-shadow:0 0 0 6px rgba(57,217,138,0)}
  100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}
}

@keyframes typingDot{
  0%,60%,100%{transform:translateY(0);opacity:.42}
  30%{transform:translateY(-3px);opacity:1}
}

@keyframes orbitOne{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-5px,8px,0)}
}

@keyframes orbitTwo{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(7px,-7px,0)}
}

@keyframes orbitThree{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-7px,-5px,0)}
}

@media (max-width:1100px){
  .channel-facebook{left:-8px}
  .channel-instagram{right:-5px}
  .channel-web{right:-7px}
}

@media (max-width:850px){
  .hero-visual{
    width:min(100%,620px);
    margin:15px auto 0;
    padding:50px 20px 45px;
  }

  .channel-facebook{left:0}
  .channel-instagram{right:0}
  .channel-web{right:0}
}

@media (max-width:560px){
  .hero-visual{
    padding:38px 0 48px;
  }

  .channel-orbit{
    min-width:auto;
    padding:8px;
  }

  .channel-orbit div{
    display:none;
  }

  .channel-instagram{right:4px}
  .channel-facebook{left:4px}
  .channel-web{right:4px}

  .handoff-toast{
    right:5%;
    width:90%;
  }

  .demo-body{
    padding:19px;
  }

  .message{
    max-width:92%;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-visual .conversation-demo,
  .channel-orbit,
  .live-indicator i,
  .typing-row span{
    animation:none !important;
  }

  .js .hero-step{
    opacity:1;
    transform:none;
    filter:none;
  }
}

/* === Scroll reveal motion === */

.reveal-item{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .7s cubic-bezier(.2,.7,.2,1);
}

.reveal-item.reveal-visible{
  opacity:1;
  transform:translateY(0);
}

.reveal-delay-1{transition-delay:.06s}
.reveal-delay-2{transition-delay:.12s}
.reveal-delay-3{transition-delay:.18s}
.reveal-delay-4{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .reveal-item{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* === CatchGrow integration network === */

.integration-network-layout{
  grid-template-columns:.78fr 1.22fr;
  gap:70px;
}

.integration-points{
  display:grid;
  gap:11px;
  margin-top:28px;
}

.integration-points span{
  display:flex;
  align-items:center;
  gap:10px;
  color:#9db0c1;
  font-size:13px;
  font-weight:650;
}

.integration-points b{
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:7px;
  color:#65e2a4;
  background:rgba(57,217,138,.08);
  font-size:10px;
}

.integration-network{
  position:relative;
  min-height:510px;
  border:1px solid rgba(91,146,214,.14);
  border-radius:32px;
  overflow:hidden;
  background:
    linear-gradient(rgba(83,132,180,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(83,132,180,.035) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,rgba(63,130,224,.13),transparent 35%),
    linear-gradient(145deg,rgba(12,31,49,.95),rgba(7,20,34,.96));
  background-size:38px 38px,38px 38px,auto,auto;
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 30px 80px rgba(0,0,0,.18);
}

.network-glow{
  position:absolute;
  left:50%;
  top:50%;
  width:310px;
  height:310px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(90,153,232,.08);
  border-radius:50%;
  box-shadow:
    0 0 0 45px rgba(72,137,222,.018),
    0 0 0 90px rgba(72,137,222,.012);
  animation:networkBreathe 4s ease-in-out infinite;
}

.network-core{
  position:absolute;
  z-index:5;
  left:50%;
  top:48%;
  width:150px;
  min-height:160px;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(101,166,245,.27);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 0,rgba(79,145,245,.16),transparent 50%),
    linear-gradient(145deg,#102c47,#0b2438);
  box-shadow:
    0 24px 55px rgba(0,0,0,.35),
    0 0 45px rgba(73,139,229,.08);
}

.network-core-logo{
  width:53px;
  height:53px;
  display:grid;
  place-items:center;
  margin-bottom:12px;
  border-radius:17px;
  color:#fff;
  background:linear-gradient(145deg,#568fff,#3bd994);
  box-shadow:0 12px 30px rgba(68,154,212,.22);
  font-size:24px;
  font-weight:900;
}

.network-core strong{
  font-size:14px;
}

.network-core>span{
  margin-top:3px;
  color:#7791a8;
  font-size:10px;
}

.network-core small{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding:5px 9px;
  border-radius:999px;
  color:#66dfa3;
  background:rgba(57,217,138,.07);
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.network-core small i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#5fe2a1;
  box-shadow:0 0 0 0 rgba(57,217,138,.4);
  animation:networkStatus 2s infinite;
}

.network-channel{
  position:absolute;
  z-index:4;
  min-width:165px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 15px;
  border:1px solid rgba(103,151,206,.16);
  border-radius:16px;
  background:rgba(14,35,53,.94);
  box-shadow:0 14px 34px rgba(0,0,0,.2);
  animation:networkFloat 5s ease-in-out infinite;
}

.network-channel-icon{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#91b8ff;
  background:rgba(76,141,255,.1);
  font-size:16px;
  font-weight:900;
}

.network-channel>div:last-child{
  display:flex;
  flex-direction:column;
}

.network-channel strong{
  font-size:11px;
}

.network-channel span{
  margin-top:2px;
  color:#71899d;
  font-size:8px;
}

.network-facebook{
  left:6%;
  top:13%;
}

.network-instagram{
  right:5%;
  top:16%;
  animation-delay:.7s;
}

.network-whatsapp{
  left:5%;
  bottom:16%;
  animation-delay:1.2s;
}

.network-website{
  right:5%;
  bottom:17%;
  animation-delay:1.8s;
}

.network-line{
  position:absolute;
  z-index:1;
  left:50%;
  top:48%;
  width:31%;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(
    90deg,
    rgba(91,155,239,.5),
    rgba(91,155,239,.08)
  );
}

.network-line-facebook{
  transform:r
}

.network-line-instagram{
  transform:rotate(-31deg);
}

.network-line-whatsapp{
  transform:rotate(149deg);
}

.network-line-website{
  transform:rotate(31deg);
}

.network-signal{
  position:absolute;
  z-index:3;
  left:50%;
  top:48%;
  width:7px;
  height:7px;
  margin:-3px;
  border-radius:50%;
  background:#70a8ff;
  box-shadow:0 0 12px rgba(112,168,255,.8);
  opacity:0;
}

.signal-facebook{
  animation:signalFacebook 3.8s .2s infinite;
}

.signal-instagram{
  animation:signalInstagram 4.1s 1.1s infinite;
}

.signal-whatsapp{
  background:#58dfa0;
  box-shadow:0 0 12px rgba(88,223,160,.8);
  animation:signalWhatsapp 4.3s 2s infinite;
}

.signal-website{
  animation:signalWebsite 3.9s 2.7s infinite;
}

.network-result{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:20px;
  width:260px;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border:1px solid rgba(57,217,138,.17);
  border-radius:15px;
  background:rgba(9,31,38,.94);
  box-shadow:0 14px 38px rgba(0,0,0,.25);
}

.network-result-icon{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#69e4a6;
  background:rgba(57,217,138,.09);
  font-size:13px;
}

.network-result div{
  display:flex;
  flex-direction:column;
}

.network-result small{
  color:#55d995;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}

.network-result strong{
  margin-top:2px;
  font-size:10px;
}

.network-result>b{
  color:#69e3a6;
  font-size:13px;
}

@keyframes networkFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

@keyframes networkBreathe{
  0%,100%{
    opacity:.55;
    transform:translate(-50%,-50%) scale(.96);
  }
  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.04);
  }
}

@keyframes networkStatus{
  0%{box-shadow:0 0 0 0 rgba(57,217,138,.4)}
  70%{box-shadow:0 0 0 7px rgba(57,217,138,0)}
  100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}
}

@keyframes signalFacebook{
  0%,15%{opacity:0;transform:translate(0,0)}
  20%{opacity:1}
  70%{opacity:1;transform:translate(-185px,-105px)}
  75%,100%{opacity:0;transform:translate(-185px,-105px)}
}

@keyframes signalInstagram{
  0%,15%{opacity:0;transform:translate(0,0)}
  20%{opacity:1}
  70%{opacity:1;transform:translate(185px,-100px)}
  75%,100%{opacity:0;transform:translate(185px,-100px)}
}

@keyframes signalWhatsapp{
  0%,15%{opacity:0;transform:translate(0,0)}
  20%{opacity:1}
  70%{opacity:1;transform:translate(-185px,105px)}
  75%,100%{opacity:0;transform:translate(-185px,105px)}
}

@keyframes signalWebsite{
  0%,15%{opacity:0;transform:translate(0,0)}
  20%{opacity:1}
  70%{opacity:1;transform:translate(185px,105px)}
  75%,100%{opacity:0;transform:translate(185px,105px)}
}

@media (max-width:900px){
  .integration-network-layout{
    grid-template-columns:1fr;
    gap:45px;
  }

  .integration-network{
    min-height:500px;
  }
}

@media (max-width:600px){
  .integration-network{
    min-height:590px;
  }

  .network-core{
    top:48%;
  }

  .network-channel{
    min-width:135px;
    padding:10px;
  }

  .network-facebook{
    left:4%;
    top:8%;
  }

  .network-instagram{
    right:4%;
    top:8%;
  }

  .network-whatsapp{
    left:4%;
    bottom:18%;
  }

  .network-website{
    right:4%;
    bottom:18%;
  }

  .network-line,
  .network-signal{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .network-glow,
  .network-channel,
  .network-core small i,
  .network-signal{
    animation:none !important;
  }
}

/* === CatchGrow animated sales journey === */

.journey-section{
  overflow:hidden;
}

.sales-journey{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  margin-top:58px;
  padding:48px 0 8px;
}

.journey-progress{
  position:absolute;
  z-index:1;
  left:7%;
  right:7%;
  top:20px;
  height:2px;
  background:rgba(93,143,195,.13);
}

.journey-progress-line{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(86,143,255,.16),
    rgba(86,143,255,.38),
    rgba(65,219,153,.18)
  );
}

.journey-progress-active{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(
    90deg,
    #548fff 0%,
    #58a7ff 52%,
    #45db98 100%
  );
  box-shadow:0 0 18px rgba(78,155,255,.35);
  animation:journeyProgress 8s ease-in-out infinite;
}

.journey-progress-signal{
  position:absolute;
  z-index:2;
  left:0;
  top:50%;
  width:10px;
  height:10px;
  margin-top:-5px;
  margin-left:-5px;
  border-radius:50%;
  background:#74adff;
  box-shadow:
    0 0 0 5px rgba(86,143,255,.09),
    0 0 18px rgba(92,164,255,.9);
  animation:journeySignal 8s ease-in-out infinite;
}

.sales-stage{
  position:relative;
  z-index:2;
  min-width:0;
  min-height:245px;
  padding:22px 17px 18px;
  border:1px solid rgba(99,145,196,.12);
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(74,137,221,.055),
      transparent 50%
    ),
    rgba(10,27,43,.74);
  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.sales-stage:before{
  content:"";
  position:absolute;
  left:50%;
  top:-35px;
  width:8px;
  height:8px;
  transform:translateX(-50%);
  border:2px solid #102a43;
  border-radius:50%;
  background:#547ca6;
  box-shadow:0 0 0 5px #071727;
}

.sales-stage:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255,.035) 48%,
    transparent 72%
  );
  transform:translateX(-120%);
  animation:journeyShine 8s infinite;
}

.sales-stage:hover{
  transform:translateY(-7px);
  border-color:rgba(91,157,235,.3);
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(74,137,221,.1),
      transparent 55%
    ),
    rgba(11,31,49,.92);
  box-shadow:0 22px 50px rgba(0,0,0,.2);
}

.sales-stage-number{
  position:absolute;
  right:14px;
  top:14px;
  color:rgba(130,163,194,.34);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.sales-stage-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  border:1px solid rgba(91,151,224,.13);
  border-radius:13px;
  color:#8eb7ff;
  background:rgba(71,132,220,.08);
  font-size:15px;
  font-weight:900;
}

.sales-stage-label{
  display:block;
  margin-bottom:8px;
  color:#6384a2;
  font-size:7px;
  font-weight:900;
  letter-spacing:.11em;
}

.sales-stage h3{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.25;
}

.sales-stage p{
  min-height:54px;
  margin:0;
  color:#71879a;
  font-size:9px;
  line-height:1.6;
}

.sales-stage small{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:13px;
  color:#5f7890;
  font-size:8px;
}

.sales-stage small i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#55dda0;
  box-shadow:0 0 8px rgba(85,221,160,.6);
}

.stage-score,
.stage-value,
.stage-won-label{
  display:inline-flex;
  align-items:center;
  margin-top:13px;
  padding:5px 8px;
  border-radius:8px;
  font-size:10px;
}

.stage-score{
  color:#68e3a6;
  background:rgba(57,217,138,.07);
}

.stage-value{
  color:#91baff;
  background:rgba(76,141,255,.08);
}

.stage-won-label{
  color:#65e1a3;
  background:rgba(57,217,138,.08);
  letter-spacing:.08em;
}

.stage-qualified,
.stage-won{
  border-color:rgba(57,217,138,.12);
}

.stage-qualified .sales-stage-icon,
.stage-won .sales-stage-icon{
  color:#65e2a4;
  background:rgba(57,217,138,.08);
  border-color:rgba(57,217,138,.12);
}

.stage-opportunity{
  border-color:rgba(81,148,237,.2);
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(77,143,236,.1),
      transparent 55%
    ),
    rgba(10,29,47,.84);
}

.journey-summary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:28px auto 0;
  color:#6f879b;
  font-size:9px;
}

.journey-summary span,
.journey-summary strong{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 17px;
}

.journey-summary span:not(:last-of-type):after{
  content:"→";
  position:absolute;
  right:-4px;
  color:#35516b;
}

.journey-summary span i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#55dda0;
  box-shadow:0 0 9px rgba(85,221,160,.5);
}

.journey-summary strong{
  color:#9eb2c4;
  font-weight:700;
}

.sales-stage:nth-of-type(2):after{animation-delay:1.1s}
.sales-stage:nth-of-type(3):after{animation-delay:2.2s}
.sales-stage:nth-of-type(4):after{animation-delay:3.3s}
.sales-stage:nth-of-type(5):after{animation-delay:4.4s}
.sales-stage:nth-of-type(6):after{animation-delay:5.5s}

@keyframes journeyProgress{
  0%,8%{transform:scaleX(0)}
  82%,100%{transform:scaleX(1)}
}

@keyframes journeySignal{
  0%,8%{
    left:0;
    opacity:0;
  }
  12%{
    opacity:1;
  }
  82%{
    left:100%;
    opacity:1;
  }
  88%,100%{
    left:100%;
    opacity:0;
  }
}

@keyframes journeyShine{
  0%,12%{
    transform:translateX(-120%);
  }
  25%{
    transform:translateX(120%);
  }
  100%{
    transform:translateX(120%);
  }
}

@media (max-width:1050px){
  .sales-journey{
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    padding-top:0;
  }

  .journey-progress{
    display:none;
  }

  .sales-stage:before{
    display:none;
  }
}

@media (max-width:650px){
  .sales-journey{
    grid-template-columns:1fr;
    margin-top:38px;
  }

  .sales-stage{
    min-height:auto;
  }

  .sales-stage p{
    min-height:0;
  }

  .journey-summary{
    display:grid;
    gap:9px;
    justify-content:start;
  }

  .journey-summary span,
  .journey-summary strong{
    padding:0;
  }

  .journey-summary span:after{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .journey-progress-active,
  .journey-progress-signal,
  .sales-stage:after{
    animation:none !important;
  }

  .journey-progress-active{
    transform:scaleX(1);
  }

  .journey-progress-signal{
    display:none;
  }
}

/* === Journey visual polish === */

.sales-journey{
  margin-top:48px;
  padding-top:34px;
}

.journey-progress{
  left:7%;
  right:7%;
  top:13px;
}

.sales-stage{
  min-height:255px;
}

.sales-stage:before{
  top:-25px;
}

.sales-stage p{
  color:#8298ab;
  font-size:10px;
  line-height:1.55;
}

.sales-stage small{
  color:#7890a5;
  font-size:8.5px;
}

.sales-stage-label{
  color:#7395b4;
}

.journey-summary{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:28px auto 0;
}

.journey-summary span,
.journey-summary strong{
  min-height:30px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border:1px solid rgba(99,145,196,.1);
  border-radius:999px;
  background:rgba(10,29,45,.58);
  color:#8399ab;
  font-size:8.5px;
  white-space:nowrap;
}

.journey-summary span:not(:last-of-type):after{
  display:none;
}

.journey-summary strong{
  border-color:rgba(57,217,138,.14);
  color:#77dda7;
  background:rgba(57,217,138,.045);
}

@media (max-width:650px){
  .journey-summary{
    display:flex;
    justify-content:flex-start;
  }

  .journey-summary span,
  .journey-summary strong{
    padding:7px 10px;
  }
}

/* === CatchGrow AI + Human handoff visual === */

.human-handoff-layout{
  grid-template-columns:.82fr 1.18fr;
  gap:72px;
  align-items:center;
}

.human-benefits{
  display:grid;
  gap:10px;
  margin:26px 0 24px;
}

.human-benefits span{
  display:flex;
  align-items:center;
  gap:10px;
  color:#879caf;
  font-size:11px;
}

.human-benefits b{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  flex:0 0 20px;
  border-radius:7px;
  color:#65e1a3;
  background:rgba(57,217,138,.07);
  font-size:9px;
}

.handoff-visual{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(96,149,207,.15);
  border-radius:28px;
  background:
    radial-gradient(circle at 70% 20%,rgba(67,128,221,.08),transparent 35%),
    linear-gradient(145deg,rgba(13,34,52,.97),rgba(7,21,35,.98));
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 30px 75px rgba(0,0,0,.22);
}

.handoff-visual:before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-90px;
  top:110px;
  border-radius:50%;
  background:rgba(58,135,226,.045);
  filter:blur(10px);
  pointer-events:none;
}

.handoff-topbar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 20px;
  border-bottom:1px solid rgba(100,149,197,.1);
  background:rgba(6,19,31,.35);
}

.handoff-topbar>div{
  display:flex;
  align-items:center;
  gap:8px;
}

.handoff-topbar strong{
  font-size:11px;
}

.handoff-topbar small{
  padding:5px 8px;
  border-radius:999px;
  color:#8ca8c0;
  background:rgba(255,255,255,.035);
  font-size:8px;
}

.handoff-live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#57dda0;
  box-shadow:0 0 0 0 rgba(87,221,160,.38);
  animation:handoffLive 2s infinite;
}

.handoff-conversation{
  position:relative;
  z-index:2;
  display:grid;
  gap:13px;
  padding:22px 22px 15px;
}

.handoff-message{
  display:flex;
  align-items:flex-start;
  gap:10px;
  max-width:88%;
}

.handoff-message.ai{
  margin-left:auto;
  flex-direction:row-reverse;
}

.handoff-message-avatar{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#9db3c6;
  background:rgba(255,255,255,.045);
  font-size:8px;
  font-weight:900;
}

.handoff-message.ai .handoff-message-avatar{
  color:#8db6ff;
  background:rgba(76,141,255,.11);
}

.handoff-message>div{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.handoff-message.ai>div{
  align-items:flex-end;
}

.handoff-message small{
  color:#60798f;
  font-size:7px;
}

.handoff-message p{
  margin:0;
  padding:10px 12px;
  border:1px solid rgba(99,145,196,.09);
  border-radius:5px 14px 14px 14px;
  color:#9aafc0;
  background:rgba(255,255,255,.025);
  font-size:9px;
  line-height:1.55;
}

.handoff-message.ai p{
  border-color:rgba(77,142,232,.14);
  border-radius:14px 5px 14px 14px;
  background:rgba(67,125,207,.07);
}

.handoff-detection{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:11px;
  align-items:center;
  margin:2px 22px 16px;
  padding:12px 13px;
  border:1px solid rgba(57,217,138,.16);
  border-radius:14px;
  background:rgba(40,145,103,.055);
  animation:handoffDetection 4s ease-in-out infinite;
}

.handoff-detection-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#68e2a6;
  background:rgba(57,217,138,.08);
  font-size:12px;
}

.handoff-detection>div:nth-child(2){
  display:flex;
  flex-direction:column;
  gap:3px;
}

.handoff-detection span{
  color:#57d89a;
  font-size:7px;
  font-weight:900;
  letter-spacing:.09em;
}

.handoff-detection strong{
  font-size:9px;
}

.handoff-detection>b{
  color:#68e2a6;
  font-size:13px;
}

.handoff-context{
  position:relative;
  z-index:2;
  margin:0 22px 17px;
  padding:15px;
  border:1px solid rgba(98,146,198,.11);
  border-radius:16px;
  background:rgba(7,23,37,.55);
}

.handoff-context-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.handoff-context-head span{
  color:#718ca4;
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
}

.handoff-context-head small{
  color:#536d83;
  font-size:7px;
}

.handoff-context-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

.handoff-context-grid>div{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  padding:9px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.handoff-context-grid small{
  color:#587187;
  font-size:7px;
}

.handoff-context-grid strong{
  overflow:hidden;
  color:#9bb0c1;
  font-size:8px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.handoff-transfer{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 115px 1fr;
  align-items:center;
  gap:12px;
  margin:0 22px 17px;
  padding:15px;
  border:1px solid rgba(92,143,195,.1);
  border-radius:16px;
  background:rgba(255,255,255,.018);
}

.handoff-agent{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.handoff-agent.human{
  justify-content:flex-end;
  text-align:right;
}

.handoff-agent>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.handoff-agent small{
  color:#5c768d;
  font-size:6px;
  font-weight:900;
  letter-spacing:.08em;
}

.handoff-agent strong{
  color:#a1b4c4;
  font-size:9px;
}

.handoff-transfer .avatar{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:11px;
  font-size:8px;
}

.handoff-transfer-line{
  position:relative;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.handoff-transfer-line:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(81,143,231,.25),
    rgba(76,173,177,.55),
    rgba(57,217,138,.25)
  );
}

.handoff-transfer-line span{
  position:absolute;
  z-index:2;
  left:0;
  top:50%;
  width:7px;
  height:7px;
  margin-top:-3px;
  border-radius:50%;
  background:#68e1a5;
  box-shadow:0 0 12px rgba(104,225,165,.8);
  animation:handoffSignal 3s ease-in-out infinite;
}

.handoff-transfer-line b{
  position:relative;
  z-index:3;
  padding:4px 6px;
  border-radius:6px;
  color:#6f9bb1;
  background:#0a2235;
  font-size:6px;
  letter-spacing:.08em;
}

.handoff-success{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 22px 22px;
  padding:11px 13px;
  border:1px solid rgba(57,217,138,.11);
  border-radius:13px;
  background:rgba(57,217,138,.035);
}

.handoff-success>span{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#68e1a5;
  background:rgba(57,217,138,.08);
  font-size:10px;
}

.handoff-success>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.handoff-success strong{
  font-size:9px;
}

.handoff-success small{
  color:#668197;
  font-size:7px;
}

@keyframes handoffLive{
  0%{
    box-shadow:0 0 0 0 rgba(87,221,160,.38);
  }
  70%{
    box-shadow:0 0 0 7px rgba(87,221,160,0);
  }
  100%{
    box-shadow:0 0 0 0 rgba(87,221,160,0);
  }
}

@keyframes handoffDetection{
  0%,100%{
    border-color:rgba(57,217,138,.12);
  }
  50%{
    border-color:rgba(57,217,138,.28);
    box-shadow:0 0 25px rgba(57,217,138,.035);
  }
}

@keyframes handoffSignal{
  0%{
    left:0;
    opacity:0;
  }
  15%{
    opacity:1;
  }
  80%{
    left:calc(100% - 7px);
    opacity:1;
  }
  100%{
    left:calc(100% - 7px);
    opacity:0;
  }
}

@media (max-width:900px){
  .human-handoff-layout{
    grid-template-columns:1fr;
    gap:45px;
  }
}

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

  .handoff-transfer{
    grid-template-columns:1fr;
  }

  .handoff-agent.human{
    justify-content:flex-start;
    text-align:left;
  }

  .handoff-transfer-line{
    width:1px;
    height:45px;
    margin:auto;
  }

  .handoff-transfer-line:before{
    left:0;
    right:auto;
    top:0;
    bottom:0;
    width:1px;
    height:auto;
  }

  .handoff-transfer-line span{
    left:50%;
    top:0;
    margin-left:-3px;
    animation:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .handoff-live-dot,
  .handoff-detection,
  .handoff-transfer-line span{
    animation:none !important;
  }
}

/* Mobile layout refinements, September 21. */
@media(max-width:650px){
 .hero h1{font-size:clamp(32px,9vw,43px);letter-spacing:-1.5px;overflow-wrap:break-word}
 .sales-journey{grid-template-columns:minmax(0,1fr);padding-top:0;gap:16px}
 .sales-stage{min-height:0;padding:24px}
 .sales-stage p{font-size:14px;min-height:0;line-height:1.6}
 .sales-stage h3{font-size:19px}
 .sales-stage small{font-size:12px}
 .journey-summary{font-size:12px;line-height:1.6}
 .hero-grid>*,.human-handoff-layout>*,.knowledge-layout>*{min-width:0}
 .handoff-panel,.knowledge-panel{max-width:100%}
 .nav.open{max-height:calc(100dvh - 68px);min-height:0;overflow-y:auto;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
 .nav-toggle{min-width:44px;min-height:44px}
}