:root{
  --bg:#070a15;
  --bg-2:#090d1b;
  --card:#0d1224;
  --card-2:#10162c;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.13);
  --text:#f7f7fb;
  --muted:#9298ad;
  --muted-2:#697086;
  --purple:#745cff;
  --purple-2:#9a7cff;
  --blue:#4d7cff;
  --cyan:#5dd8ff;
  --green:#42e6ad;
  --shadow:0 28px 90px rgba(0,0,0,.45);
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}

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

button,
a{
  transition:.22s ease;
}

.page-shell{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 0%,rgba(93,73,200,.16),transparent 22%),
    linear-gradient(180deg,#070a15 0%,#080b17 45%,#070a15 100%);
}

/* NAV */
.navbar{
  padding:14px 0;
  background:rgba(7,10,21,.78);
  border-bottom:1px solid rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.navbar.scrolled{
  background:rgba(7,10,21,.94);
  box-shadow:0 10px 35px rgba(0,0,0,.22);
}

.brand-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(116,92,255,.18),rgba(77,124,255,.08));
  border:1px solid rgba(150,132,255,.26);
  box-shadow:inset 0 0 20px rgba(116,92,255,.08);
}

.brand-icon svg{
  width:26px;
  height:26px;
}

.hex{
  fill:rgba(116,92,255,.10);
  stroke:#987fff;
  stroke-width:1.8;
}

.line{
  fill:none;
  stroke:#c0b6ff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.brand-text{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.04em;
}

.brand-text span{
  color:#8f7aff;
}

.navbar .nav-link{
  color:#999fb4;
  font-size:.84rem;
  font-weight:500;
  padding:.58rem .78rem !important;
}

.navbar .nav-link:hover{
  color:#fff;
}

.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.68rem 1.05rem;
  border-radius:9px;
  background:linear-gradient(135deg,#7b61ff,#554af5);
  color:#fff;
  font-size:.8rem;
  font-weight:700;
  box-shadow:0 10px 28px rgba(95,73,237,.28);
}

.nav-cta:hover{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(95,73,237,.35);
}

/* HERO */
.hero-section{
  position:relative;
  min-height:100vh;
  padding:168px 0 80px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.hero-content{
  position:relative;
  z-index:4;
}

.hero-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  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 0%,transparent 70%);
}

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

.glow-left{
  width:430px;
  height:430px;
  background:rgba(77,68,215,.20);
  left:-180px;
  top:150px;
}

.glow-right{
  width:420px;
  height:420px;
  background:rgba(109,78,214,.16);
  right:-190px;
  top:200px;
}

.hero-pill,
.section-badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.52rem .78rem;
  border-radius:8px;
  color:#aaa0ff;
  background:rgba(116,92,255,.07);
  border:1px solid rgba(139,119,255,.30);
  font-size:.72rem;
  line-height:1;
  font-weight:600;
  letter-spacing:.02em;
}

.pill-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#8b74ff;
  box-shadow:0 0 13px rgba(139,116,255,.9);
}

.hero-title{
  margin:28px auto 0;
  max-width:1010px;
  font-size:clamp(3.3rem,7.6vw,6.8rem);
  line-height:.99;
  letter-spacing:-.071em;
  font-weight:700;
}

.hero-title span,
.section-title span,
.cta-card h2 span{
  display:block;
  color:transparent;
  background:linear-gradient(90deg,#f8f7ff 0%,#c4b9ff 35%,#8d75ff 73%,#6d68ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.hero-copy{
  max-width:760px;
  margin-top:27px;
  color:#9a9fb1;
  font-size:clamp(.98rem,1.5vw,1.08rem);
  line-height:1.8;
}

.hero-actions{
  margin-top:34px;
}

.primary-btn,
.secondary-btn,
.white-btn,
.outline-light-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  border-radius:9px;
  padding:.87rem 1.15rem;
  font-size:.82rem;
  font-weight:700;
}

.primary-btn{
  color:#fff;
  background:linear-gradient(135deg,#8066ff,#574bf3);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px rgba(100,79,241,.25);
}

.primary-btn:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(100,79,241,.34);
}

.secondary-btn{
  color:#d7d8e1;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.035);
}

.secondary-btn:hover{
  color:#fff;
  border-color:rgba(145,124,255,.35);
  background:rgba(116,92,255,.07);
}

/* HERO ORBITS */
.orbital-art{
  position:absolute;
  left:50%;
  top:128px;
  width:min(1300px,95vw);
  height:600px;
  transform:translateX(-50%);
  z-index:1;
  pointer-events:none;
}

.arc{
  position:absolute;
  left:50%;
  bottom:-300px;
  transform:translateX(-50%);
  border-radius:50%;
  border:1px solid rgba(129,103,255,.22);
}

.arc-1{
  width:650px;
  height:650px;
}

.arc-2{
  width:980px;
  height:980px;
  border-color:rgba(129,103,255,.16);
}

.arc-3{
  width:1320px;
  height:1320px;
  border-color:rgba(129,103,255,.11);
}

.orbit-dot{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#6f56ff;
  box-shadow:0 0 0 6px rgba(111,86,255,.08),0 0 18px rgba(111,86,255,.52);
}

.dot-1{left:12%;bottom:42px}
.dot-2{left:35%;bottom:122px}
.dot-3{right:35%;bottom:122px}
.dot-4{right:12%;bottom:42px}

/* DASHBOARD */
.dashboard-preview-wrap{
  position:relative;
  margin:92px auto 0;
  max-width:1180px;
}

.dashboard-top-glow{
  position:absolute;
  width:72%;
  height:160px;
  left:50%;
  top:-60px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(102,77,255,.36);
  filter:blur(65px);
  opacity:.55;
}

.dashboard-preview{
  position:relative;
  overflow:hidden;
  border-radius:16px 16px 0 0;
  border:1px solid rgba(153,132,255,.24);
  border-bottom:0;
  background:#090d1a;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.05) inset,
    0 30px 100px rgba(0,0,0,.45),
    0 -10px 60px rgba(108,80,255,.10);
}

.dash-toolbar{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  background:#0b1020;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.mini-brand{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(116,92,255,.12);
  border:1px solid rgba(142,122,255,.20);
}

.mini-brand svg{
  width:22px;
  height:22px;
}

.dash-brand-name{
  display:block;
  font-size:.76rem;
  font-weight:700;
}

.dash-toolbar small{
  display:block;
  margin-top:1px;
  font-size:.56rem;
  color:#646c80;
}

.dash-toolbar-actions{
  display:flex;
  align-items:center;
  gap:.55rem;
}

.dash-toolbar-actions>span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  color:#788095;
  border-radius:8px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.045);
  font-size:.7rem;
}

.dash-toolbar-actions .avatar{
  background:linear-gradient(135deg,#7c63ff,#4f4be6);
  color:#fff;
  font-size:.58rem;
  font-weight:700;
}

.dashboard-body{
  display:grid;
  grid-template-columns:165px 1fr;
  min-height:490px;
}

.dash-sidebar{
  padding:15px 11px;
  background:#090d19;
  border-right:1px solid rgba(255,255,255,.05);
}

.dash-sidebar a{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.68rem .72rem;
  margin-bottom:.35rem;
  border-radius:8px;
  color:#697187;
  font-size:.67rem;
}

.dash-sidebar a.active{
  color:#d7d2ff;
  background:rgba(116,92,255,.10);
  border:1px solid rgba(116,92,255,.10);
}

.dash-main{
  padding:18px;
  background:
    radial-gradient(circle at 65% 0%,rgba(100,76,255,.05),transparent 32%),
    #0a0e1c;
}

.dash-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:15px;
}

.dash-heading span{
  display:block;
  color:#626a7f;
  font-size:.57rem;
}

.dash-heading h3{
  margin:.2rem 0 0;
  font-size:.9rem;
  font-weight:700;
}

.dash-heading button{
  border:1px solid rgba(137,116,255,.20);
  background:rgba(116,92,255,.11);
  color:#c4bbff;
  border-radius:7px;
  padding:.52rem .7rem;
  font-size:.58rem;
}

.metric-card,
.chart-card,
.activity-card{
  border-radius:10px;
  background:#0e1325;
  border:1px solid rgba(255,255,255,.055);
}

.metric-card{
  position:relative;
  min-height:132px;
  padding:14px;
}

.metric-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  margin-bottom:15px;
  border-radius:8px;
  color:#9b88ff;
  background:rgba(116,92,255,.09);
  font-size:.72rem;
}

.metric-card>span{
  display:block;
  color:#6f778d;
  font-size:.56rem;
}

.metric-card strong{
  display:block;
  margin-top:.2rem;
  font-size:1.3rem;
  letter-spacing:-.04em;
}

.metric-card small{
  display:block;
  margin-top:.35rem;
  color:#667084;
  font-size:.51rem;
}

.metric-card small i{
  color:#4ddcb0;
}

.chart-card,
.activity-card{
  padding:15px;
  min-height:260px;
}

.chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.chart-head span{
  display:block;
  color:#666f84;
  font-size:.54rem;
}

.chart-head strong{
  display:block;
  margin-top:.18rem;
  font-size:.72rem;
}

.chart-head small,
.chart-head>i{
  color:#60687c;
  font-size:.53rem;
}

.fake-chart{
  position:relative;
  height:195px;
  margin-top:8px;
  overflow:hidden;
}

.chart-lines{
  position:absolute;
  inset:5px 0 5px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.chart-lines span{
  width:100%;
  border-top:1px dashed rgba(255,255,255,.055);
}

.fake-chart svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.activity-list{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.activity-row{
  display:grid;
  grid-template-columns:9px 1fr auto;
  align-items:center;
  gap:9px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.045);
}

.activity-row:last-child{
  border-bottom:0;
}

.activity-dot{
  width:7px;
  height:7px;
  border-radius:50%;
}

.activity-dot.purple{background:#8a6fff}
.activity-dot.blue{background:#5c9cff}
.activity-dot.green{background:#4fd7a8}
.activity-dot.orange{background:#f4a15b}

.activity-row strong{
  display:block;
  font-size:.58rem;
}

.activity-row small{
  display:block;
  margin-top:2px;
  color:#626b80;
  font-size:.49rem;
}

.activity-row>span:last-child{
  color:#545d70;
  font-size:.48rem;
}

/* TRUSTED STRIP */
.trusted-strip{
  padding:48px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.trusted-label{
  margin-bottom:27px;
  color:#5f6679;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-weight:600;
}

.capability-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px 30px;
}

.capability-row div{
  display:flex;
  align-items:center;
  gap:.55rem;
  color:#686f81;
  font-size:.78rem;
  font-weight:600;
}

.capability-row i{
  font-size:1rem;
  color:#848ba0;
}

/* COMMON SECTIONS */
.section-block{
  position:relative;
  padding:112px 0;
}

.section-head{
  max-width:800px;
}

.section-title{
  margin:18px 0 0;
  font-size:clamp(2.35rem,5.1vw,4.5rem);
  line-height:1.06;
  letter-spacing:-.062em;
  font-weight:700;
}

.section-copy{
  margin-top:22px;
  color:#8b91a5;
  font-size:.94rem;
  line-height:1.82;
}

.intro-section{
  border-bottom:1px solid rgba(255,255,255,.04);
}

.intro-highlights{
  display:grid;
  gap:.8rem;
  margin-top:26px;
}

.intro-highlights div{
  display:flex;
  align-items:center;
  gap:.65rem;
  color:#b5b9c8;
  font-size:.84rem;
}

.intro-highlights i{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#a89bff;
  background:rgba(116,92,255,.08);
  border:1px solid rgba(116,92,255,.15);
}

/* SERVICE CARDS */
.services-section{
  background:#080c18;
  border-bottom:1px solid rgba(255,255,255,.045);
}

.service-card{
  position:relative;
  overflow:hidden;
  padding:26px;
  min-height:320px;
  border-radius:13px;
  background:
    radial-gradient(circle at 100% 0%,rgba(113,86,255,.07),transparent 27%),
    #0d1223;
  border:1px solid rgba(255,255,255,.065);
  box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.service-card::before{
  content:"";
  position:absolute;
  width:140px;
  height:1px;
  left:26px;
  top:0;
  background:linear-gradient(90deg,#7f68ff,transparent);
  opacity:.0;
  transition:.25s ease;
}

.service-card:hover{
  transform:translateY(-6px);
  border-color:rgba(133,110,255,.25);
  background:
    radial-gradient(circle at 100% 0%,rgba(113,86,255,.10),transparent 31%),
    #0e1426;
}

.service-card:hover::before{
  opacity:1;
}

.service-icon{
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#a795ff;
  background:linear-gradient(145deg,rgba(116,92,255,.13),rgba(71,74,214,.08));
  border:1px solid rgba(137,118,255,.16);
  font-size:1rem;
}

.service-num{
  position:absolute;
  top:27px;
  right:27px;
  color:#40475b;
  font-size:.68rem;
  font-weight:600;
}

.service-card h3{
  margin:28px 0 13px;
  font-size:1.1rem;
  font-weight:650;
  letter-spacing:-.025em;
}

.service-card p{
  color:#777f94;
  font-size:.82rem;
  line-height:1.72;
}

.service-card a{
  position:absolute;
  left:26px;
  bottom:25px;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:#9c8bff;
  font-size:.72rem;
  font-weight:600;
}

.service-card a:hover{
  color:#c5bcff;
}

/* PROCESS */
.process-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.065);
  background:rgba(255,255,255,.06);
}

.process-card{
  min-height:330px;
  padding:31px;
  background:
    radial-gradient(circle at 100% 0%,rgba(112,84,255,.055),transparent 32%),
    #0c1121;
}

.process-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.process-label{
  color:#756d9a;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
}

.process-icon{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#9887ff;
  border:1px solid rgba(137,116,255,.20);
  background:rgba(116,92,255,.06);
}

.process-card h3{
  margin:86px 0 14px;
  font-size:1.45rem;
  font-weight:650;
  letter-spacing:-.035em;
}

.process-card p{
  margin:0;
  color:#777f92;
  font-size:.84rem;
  line-height:1.76;
}

/* AUTOMATION */
.automation-panel{
  overflow:hidden;
  border-radius:16px;
  background:#0d1223;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 28px 75px rgba(0,0,0,.15);
}

.automation-content{
  padding:clamp(35px,5.8vw,70px);
  border-right:1px solid rgba(255,255,255,.055);
}

.automation-content .section-title{
  font-size:clamp(2.25rem,4.2vw,3.65rem);
}

.automation-benefits{
  display:grid;
  gap:12px;
  margin-top:27px;
}

.automation-benefits div{
  display:flex;
  align-items:center;
  gap:.65rem;
  color:#a9afc0;
  font-size:.81rem;
}

.automation-benefits i{
  color:#8e7bff;
}

.workflow-canvas{
  position:relative;
  min-height:620px;
  overflow:hidden;
  background:#0a0f1d;
}

.canvas-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:36px 36px;
  mask-image:radial-gradient(circle at 50% 50%,black 0%,transparent 78%);
}

.canvas-glow{
  position:absolute;
  width:380px;
  height:380px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(94,73,233,.14);
  filter:blur(70px);
}

.workflow-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.workflow-lines path{
  fill:none;
  stroke:rgba(128,103,255,.27);
  stroke-width:1.3;
  stroke-dasharray:6 7;
}

.workflow-core{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:146px;
  height:146px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#12182c,#0d1221);
  border:1px solid rgba(145,122,255,.28);
  box-shadow:
    0 0 0 14px rgba(116,92,255,.025),
    0 0 55px rgba(101,79,235,.18);
}

.core-logo{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:rgba(116,92,255,.11);
  border:1px solid rgba(140,118,255,.16);
}

.core-logo svg{
  width:28px;
  height:28px;
}

.workflow-core strong{
  margin-top:10px;
  font-size:.72rem;
}

.workflow-core small{
  margin-top:2px;
  color:#646d80;
  font-size:.56rem;
}

.app-node{
  position:absolute;
  z-index:5;
  display:flex;
  align-items:center;
  gap:.72rem;
  min-width:165px;
  padding:12px;
  border-radius:11px;
  background:#11172a;
  border:1px solid rgba(255,255,255,.075);
  box-shadow:0 14px 36px rgba(0,0,0,.26);
}

.app-node>span{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#9a87ff;
  background:rgba(116,92,255,.09);
  border:1px solid rgba(129,109,255,.13);
}

.app-node strong{
  display:block;
  font-size:.69rem;
}

.app-node small{
  display:block;
  margin-top:2px;
  color:#606a7e;
  font-size:.56rem;
}

.app-website{left:6%;top:14%}
.app-ai{right:6%;top:14%}
.app-crm{left:6%;bottom:14%}
.app-mail{right:6%;bottom:14%}

/* WHY */
.why-section{
  background:#080c18;
  border-top:1px solid rgba(255,255,255,.04);
}

.why-card{
  padding:28px;
  min-height:245px;
  border-radius:13px;
  background:#0d1223;
  border:1px solid rgba(255,255,255,.06);
}

.why-card:hover{
  transform:translateY(-5px);
  border-color:rgba(135,112,255,.20);
}

.why-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#9f8eff;
  background:rgba(116,92,255,.08);
  border:1px solid rgba(137,116,255,.15);
}

.why-card h3{
  margin:27px 0 12px;
  font-size:1.08rem;
  font-weight:650;
}

.why-card p{
  margin:0;
  color:#747c90;
  font-size:.8rem;
  line-height:1.72;
}

/* CTA */
.cta-section{
  padding-top:85px;
}

.cta-card{
  position:relative;
  overflow:hidden;
  padding:clamp(50px,8vw,95px) 25px;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 100%,rgba(144,118,255,.20),transparent 43%),
    linear-gradient(145deg,#11162c,#0d1225);
  border:1px solid rgba(150,130,255,.18);
}

.cta-grid{
  position:absolute;
  inset:0;
  opacity:.25;
  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:44px 44px;
  mask-image:radial-gradient(circle at center,black,transparent 75%);
}

.cta-orb{
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  filter:blur(90px);
}

.orb-a{
  left:-150px;
  bottom:-170px;
  background:rgba(82,88,255,.23);
}

.orb-b{
  right:-150px;
  top:-170px;
  background:rgba(145,87,255,.18);
}

.section-badge.light{
  color:#c2baff;
  border-color:rgba(185,170,255,.27);
  background:rgba(255,255,255,.04);
}

.cta-card h2{
  margin:22px auto 0;
  max-width:850px;
  font-size:clamp(2.65rem,5.9vw,5rem);
  line-height:1.02;
  letter-spacing:-.067em;
  font-weight:700;
}

.cta-card p{
  max-width:700px;
  margin:25px auto 0;
  color:#8c93a8;
  font-size:.91rem;
  line-height:1.75;
}

.white-btn{
  color:#111528;
  background:#fff;
  border:1px solid #fff;
}

.white-btn:hover{
  color:#111528;
  transform:translateY(-2px);
  background:#f2f0ff;
}

.outline-light-btn{
  color:#d1d3dc;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.025);
}

.outline-light-btn:hover{
  color:#fff;
  border-color:rgba(255,255,255,.20);
}

/* FOOTER */
.footer{
  padding:35px 0 0;
}

.footer-top{
  padding:55px 0 65px;
}

.footer-copy{
  max-width:440px;
  margin:22px 0 0;
  color:#737b8f;
  font-size:.83rem;
  line-height:1.75;
}

.footer h4{
  margin-bottom:17px;
  color:#d9dbe3;
  font-size:.78rem;
  font-weight:600;
}

.footer-top a:not(.brand){
  display:block;
  width:max-content;
  max-width:100%;
  margin-bottom:10px;
  color:#6e7689;
  font-size:.74rem;
}

.footer-top a:not(.brand):hover{
  color:#aaa0ff;
}

.footer-bottom{
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,.055);
  color:#5c6476;
  font-size:.69rem;
}

.footer-bottom a{
  color:#656d80;
}

.footer-bottom a:hover{
  color:#aaa0ff;
}

/* RESPONSIVE */
@media (max-width:1199.98px){
  .dashboard-body{
    grid-template-columns:135px 1fr;
  }

  .dash-sidebar a{
    padding:.65rem .55rem;
  }

  .process-card{
    min-height:310px;
  }
}

@media (max-width:991.98px){
  .navbar-collapse{
    margin-top:12px;
    padding:16px;
    border-radius:12px;
    background:#0d1222;
    border:1px solid rgba(255,255,255,.07);
  }

  .navbar .nav-link{
    padding:.72rem .4rem !important;
  }

  .nav-cta{
    margin-top:8px;
    width:100%;
  }

  .hero-section{
    padding-top:145px;
  }

  .hero-title{
    font-size:clamp(3.4rem,10vw,5.8rem);
  }

  .dashboard-preview-wrap{
    margin-top:70px;
  }

  .dashboard-body{
    grid-template-columns:90px 1fr;
  }

  .dash-sidebar a{
    justify-content:center;
    padding:.7rem .4rem;
  }

  .dash-sidebar span{
    display:none;
  }

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

  .process-card{
    min-height:auto;
  }

  .process-card h3{
    margin-top:54px;
  }

  .automation-content{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.055);
  }
}

@media (max-width:767.98px){
  .section-block{
    padding:84px 0;
  }

  .hero-section{
    padding-top:130px;
    padding-bottom:55px;
  }

  .hero-title{
    font-size:clamp(3rem,13vw,4.7rem);
  }

  .hero-copy{
    font-size:.92rem;
  }

  .orbital-art{
    top:100px;
    height:520px;
  }

  .dashboard-preview-wrap{
    margin-top:58px;
  }

  .dashboard-body{
    display:block;
  }

  .dash-sidebar{
    display:none;
  }

  .dash-main{
    padding:13px;
  }

  .chart-card,
  .activity-card{
    min-height:235px;
  }

  .capability-row{
    justify-content:center;
  }

  .capability-row div{
    min-width:120px;
    justify-content:center;
  }

  .workflow-canvas{
    min-height:560px;
  }
}

@media (max-width:575.98px){
  .container{
    padding-left:18px;
    padding-right:18px;
  }

  .brand-text{
    font-size:1rem;
  }

  .hero-title{
    font-size:clamp(2.85rem,15vw,4rem);
  }

  .hero-title span{
    display:inline;
  }

  .hero-actions{
    display:grid !important;
  }

  .primary-btn,
  .secondary-btn{
    width:100%;
  }

  .dashboard-preview{
    border-radius:12px 12px 0 0;
  }

  .dash-toolbar{
    padding:0 12px;
  }

  .dash-toolbar-actions>span:not(.avatar){
    display:none;
  }

  .dash-heading{
    align-items:flex-end;
  }

  .dash-heading button{
    padding:.45rem .55rem;
  }

  .metric-card{
    min-height:118px;
  }

  .chart-card,
  .activity-card{
    min-height:220px;
  }

  .fake-chart{
    height:155px;
  }

  .section-title{
    font-size:clamp(2.25rem,11vw,3.5rem);
  }

  .section-title span{
    display:inline;
  }

  .service-card{
    min-height:295px;
  }

  .workflow-canvas{
    min-height:590px;
  }

  .workflow-lines{
    display:none;
  }

  .workflow-core{
    width:125px;
    height:125px;
  }

  .app-node{
    min-width:145px;
    padding:10px;
  }

  .app-website{left:5%;top:7%}
  .app-ai{right:5%;top:26%}
  .app-crm{left:5%;bottom:26%}
  .app-mail{right:5%;bottom:7%}

  .cta-card{
    padding-left:20px;
    padding-right:20px;
  }

  .cta-card h2{
    font-size:clamp(2.45rem,12vw,3.75rem);
  }

  .cta-card h2 span{
    display:inline;
  }

  .white-btn,
  .outline-light-btn{
    width:100%;
  }
}


/* =========================================================
   RITEFLOW-INSPIRED NAVIGATION + MOTION ENHANCEMENTS
   ========================================================= */

.navbar{
  padding:12px 0;
  background:transparent;
  border-bottom:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.nav-shell{
  min-height:58px;
  padding:8px 10px 8px 14px;
  border-radius:15px;
  background:rgba(10,14,28,.73);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:
    0 10px 38px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.navbar.scrolled{
  background:transparent;
  box-shadow:none;
}

.navbar.scrolled .nav-shell{
  background:rgba(8,11,23,.94);
  border-color:rgba(139,119,255,.16);
  box-shadow:
    0 16px 45px rgba(0,0,0,.32),
    0 0 0 1px rgba(114,92,255,.02) inset;
}

.nav-email{
  align-items:center;
  padding:.5rem .65rem;
  color:#727a90;
  font-size:.66rem;
  font-weight:500;
}

.nav-email:hover{
  color:#aca1ff;
}

.nav-contact-wrap{
  margin-left:auto;
}

.nav-cta i{
  font-size:.66rem;
}

@media (min-width:992px){
  .navbar .navbar-collapse{
    flex-grow:1;
  }
}

@media (max-width:991.98px){
  .nav-shell{
    padding:8px 10px;
  }

  .navbar-collapse{
    flex-basis:100%;
    margin-top:10px;
    margin-bottom:2px;
    padding:12px;
  }

  .nav-contact-wrap{
    width:100%;
    margin-left:0;
  }

  .nav-contact-wrap .nav-cta{
    width:100%;
  }
}

/* Initial hero entrance */
.hero-enter{
  opacity:0;
  transform:translateY(24px);
  animation:heroReveal .85s cubic-bezier(.22,.8,.22,1) forwards;
}

.hero-enter-1{animation-delay:.06s}
.hero-enter-2{animation-delay:.14s}
.hero-enter-3{animation-delay:.23s}
.hero-enter-4{animation-delay:.32s}
.hero-enter-5{animation-delay:.42s}

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

/* Hero background animation */
.arc-1{
  animation:arcPulse 7s ease-in-out infinite;
}

.arc-2{
  animation:arcPulse 9s ease-in-out infinite reverse;
}

.arc-3{
  animation:arcPulse 11s ease-in-out infinite;
}

@keyframes arcPulse{
  0%,100%{
    opacity:.58;
    filter:drop-shadow(0 0 0 rgba(116,92,255,0));
  }
  50%{
    opacity:1;
    filter:drop-shadow(0 0 15px rgba(116,92,255,.12));
  }
}

.dot-1{animation:orbitDot 4.8s ease-in-out infinite}
.dot-2{animation:orbitDot 5.5s ease-in-out .7s infinite}
.dot-3{animation:orbitDot 5.2s ease-in-out 1.1s infinite}
.dot-4{animation:orbitDot 4.6s ease-in-out .35s infinite}

@keyframes orbitDot{
  0%,100%{transform:translateY(0) scale(1);opacity:.62}
  50%{transform:translateY(-10px) scale(1.15);opacity:1}
}

.glow-left{
  animation:glowDriftLeft 10s ease-in-out infinite alternate;
}

.glow-right{
  animation:glowDriftRight 12s ease-in-out infinite alternate;
}

@keyframes glowDriftLeft{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(70px,30px,0) scale(1.1)}
}

@keyframes glowDriftRight{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-65px,45px,0) scale(1.12)}
}

/* Dashboard gently floats, similar to a SaaS product showcase */
.dashboard-preview{
  animation:dashboardFloat 7s ease-in-out infinite;
  transform-origin:center top;
}

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

.dashboard-top-glow{
  animation:dashboardGlow 5s ease-in-out infinite;
}

@keyframes dashboardGlow{
  0%,100%{opacity:.36;transform:translateX(-50%) scale(.94)}
  50%{opacity:.72;transform:translateX(-50%) scale(1.06)}
}

/* Animated activity chart */
.fake-chart svg path:last-child{
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
  animation:drawChart 2.2s .9s cubic-bezier(.3,.7,.2,1) forwards;
}

@keyframes drawChart{
  to{stroke-dashoffset:0}
}

.metric-card{
  transition:transform .28s ease,border-color .28s ease,background .28s ease;
}

.metric-card:hover{
  transform:translateY(-4px);
  border-color:rgba(140,118,255,.19);
  background:#11172b;
}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:
    opacity .8s cubic-bezier(.22,.8,.22,1),
    transform .8s cubic-bezier(.22,.8,.22,1);
  will-change:opacity,transform;
}

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

.reveal-card:nth-child(2){
  transition-delay:.08s;
}

.reveal-card:nth-child(3){
  transition-delay:.16s;
}

.reveal-card:nth-child(4){
  transition-delay:.06s;
}

.reveal-card:nth-child(5){
  transition-delay:.12s;
}

.reveal-card:nth-child(6){
  transition-delay:.18s;
}

/* Workflow motion */
.workflow-core{
  animation:coreBreathe 4.6s ease-in-out infinite;
}

@keyframes coreBreathe{
  0%,100%{
    box-shadow:
      0 0 0 14px rgba(116,92,255,.025),
      0 0 55px rgba(101,79,235,.18);
  }
  50%{
    box-shadow:
      0 0 0 24px rgba(116,92,255,.035),
      0 0 75px rgba(101,79,235,.28);
  }
}

.app-website{animation:nodeFloatA 5.1s ease-in-out infinite}
.app-ai{animation:nodeFloatB 5.7s ease-in-out .4s infinite}
.app-crm{animation:nodeFloatB 5.4s ease-in-out .8s infinite}
.app-mail{animation:nodeFloatA 5.8s ease-in-out .2s infinite}

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

@keyframes nodeFloatB{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,9px,0)}
}

.workflow-lines path{
  stroke-dasharray:8 8;
  animation:flowDash 12s linear infinite;
}

@keyframes flowDash{
  to{stroke-dashoffset:-160}
}

/* Cards get the same soft interactive motion language */
.service-icon,
.process-icon,
.why-icon{
  transition:transform .28s ease,background .28s ease,border-color .28s ease;
}

.service-card:hover .service-icon,
.process-card:hover .process-icon,
.why-card:hover .why-icon{
  transform:translateY(-3px) rotate(-3deg);
  background:rgba(116,92,255,.13);
  border-color:rgba(145,122,255,.28);
}

/* Make anchors feel smooth and intentional */
.primary-btn i,
.nav-cta i,
.white-btn i,
.service-card a i{
  transition:transform .22s ease;
}

.primary-btn:hover i,
.nav-cta:hover i,
.white-btn:hover i,
.service-card a:hover i{
  transform:translate(2px,-2px);
}

/* Respect accessibility preferences */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  .hero-enter,
  .reveal{
    opacity:1 !important;
    transform:none !important;
  }
}


/* ===== GUARANTEED VISIBLE TOP NAV ===== */
.mt-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:999999 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  padding:14px 0;
  pointer-events:auto;
}
.mt-nav-shell{
  min-height:64px;
  width:100%;
  display:flex;
  align-items:center;
  gap:24px;
  padding:9px 10px 9px 15px;
  border-radius:16px;
  background:rgba(8,11,23,.94);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 45px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.mt-brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;color:#fff;text-decoration:none}
.mt-desktop-menu{display:flex;align-items:center;justify-content:center;gap:4px;margin-left:auto;margin-right:auto}
.mt-desktop-menu a{display:inline-flex;padding:9px 10px;color:#9ba1b5;font-size:.80rem;font-weight:500;text-decoration:none;border-radius:8px;white-space:nowrap}
.mt-desktop-menu a:hover{color:#fff;background:rgba(255,255,255,.04)}
.mt-nav-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mt-email{color:#747c91;font-size:.64rem;text-decoration:none;white-space:nowrap}
.mt-email:hover{color:#b0a6ff}
.mt-menu-toggle{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.04);align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.mt-menu-toggle span{display:block;width:18px;height:1.5px;border-radius:3px;background:#e9e8f2;transition:.22s ease}
.mt-mobile-menu{display:none;margin-top:8px;padding:10px;border-radius:13px;background:rgba(8,11,23,.98);border:1px solid rgba(255,255,255,.09);box-shadow:0 20px 45px rgba(0,0,0,.3)}
.mt-mobile-menu.open{display:grid}
.mt-mobile-menu a{padding:11px 10px;color:#a8adbd;text-decoration:none;font-size:.82rem;border-radius:8px}
.mt-mobile-menu a:hover{color:#fff;background:rgba(255,255,255,.04)}
.mt-mobile-menu .mobile-email{margin-top:5px;color:#9b8cff;border-top:1px solid rgba(255,255,255,.06);border-radius:0;padding-top:14px}
#home{scroll-margin-top:100px}
.hero-section{padding-top:180px !important}
@media(max-width:1199.98px){.mt-email{display:none}}
@media(max-width:991.98px){
  .mt-header{padding:10px 0}
  .mt-nav-shell{min-height:58px;padding:7px 8px 7px 12px}
  .mt-desktop-menu{display:none !important}
  .mt-menu-toggle{display:flex}
  .mt-nav-actions{margin-left:auto}
  .mt-nav-actions .nav-cta{display:none}
  .hero-section{padding-top:140px !important}
}
@media(max-width:575.98px){.mt-nav-shell{border-radius:13px}.mt-header .container{padding-left:12px;padding-right:12px}}