html{background:#000000;}
/* =========================================================
   AI Business Intelligence — Omega Unified
   Premium dark + glass + neon (matches the Hero).
   No framework. Cloudflare Pages ready.
   ========================================================= */

:root{
  /* core */
  --bg:#000000;
  --bg2:#000000;
  --panel:#000000;
  --panel2:#000000;
  --ink:#e9eef7;
  --muted:#aeb6c3;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.14);
  --shadow:0 24px 70px rgba(0,0,0,.55);

  /* brand */
  --a:#AD3ADC;
  --a2:#AD3ADC;
  --aSoft:rgba(173,58,220,.18);
  --aSoft2:rgba(173,58,220,.14);

  --r:18px;
  --r2:26px;
  --max:1240px;
}

/* Brand gradient text (matches "real businesses" style) */
:root{ --aLight:#E7B9FF; }
.brandGrad,
.hl,
.intro-hero .intro-title .accent,
.cta-hero__accent,
.cta__accent{
  background: linear-gradient(90deg, var(--a), var(--aLight));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}



*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: #000000;
  overflow-x:hidden;
}

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

.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* ---------- background effects ---------- */
.bg-grid{
  display:none;
}

.bg-noise{
  display:none;
}

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(18px);
  background: rgba(0,0,0,.56);
  border-bottom:none;
}

.header__row{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:14px 0;
}

.brand{display:flex; align-items:center; gap:12px; min-width: auto;}
.brand img{height:56px; width:auto; display:block; filter: drop-shadow(0 10px 18px rgba(173,58,220,.35));}
.brand__text{line-height:1.05}
.brand__name{font-weight:900; letter-spacing:.2px; font-size:14px}
.brand__tag{font-size:12px; color:rgba(233,233,239,.72)}

.nav{display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;}
.nav a{
  font-size:13px;
  color: rgba(233,233,239,.86);
  padding:10px 10px;
  border-radius:999px;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  border:1px solid transparent;
}
.nav a:hover{background: rgba(255,255,255,.06); color:#fff; transform: translateY(-1px)}
.nav a.active{background: rgba(173,58,220,.16); border-color: rgba(173,58,220,.22); color:#fff;}

.header__cta{display:flex; align-items:center; gap:10px; justify-content:flex-end; min-width: 240px;}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  height:44px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  cursor:pointer;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22)}
.btn:focus-visible{outline:none; box-shadow: 0 0 0 3px #000, 0 0 0 6px rgba(173,58,220,.25)}

.btn--primary{
  border-color: rgba(173,58,220,.40);
  background: linear-gradient(180deg, rgba(173,58,220,.26), rgba(173,58,220,.14));
  box-shadow: 0 14px 34px rgba(173,58,220,.24);
}
.btn--primary:hover{border-color: rgba(173,58,220,.60); box-shadow: 0 18px 48px rgba(173,58,220,.32)}
.btn--primary::after{display:none !important;}
.btn--primary:hover::after{display:none !important;}
.btn--ghost{background:transparent}

.menuBtn{display:none; width:44px; height:44px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color:#fff; cursor:pointer;}

/* ---------- mobile drawer ---------- */
.drawer{display:none; position:fixed; inset:0; z-index:80; background: rgba(0,0,0,.62);}
.drawer.is-open{display:block;}
.drawer__panel{position:absolute; top:0; right:0; width:min(440px, 92vw); height:100%; background: rgba(8,8,12,.90); border-left:1px solid rgba(255,255,255,.10); backdrop-filter: blur(18px); padding:18px;}
.drawer__top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.10)}
.drawer__nav{display:flex; flex-direction:column; gap:8px; padding:14px 0}
.drawer__nav a{padding:12px 12px; border-radius:14px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08)}
.drawer__nav a:hover{background: rgba(255,255,255,.06)}

/* ---------- hero baseline ---------- */
.hero{padding:62px 0 18px}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight:900;
  letter-spacing:.12em;
  font-size:11px;
  color: rgba(233,233,239,.82);
  text-transform:uppercase;
}

.hero__grid{margin-top:18px; display:grid; grid-template-columns: 1.08fr .92fr; gap:28px; align-items:start;}

h1{font-size: clamp(30px, 4vw, 52px); line-height:1.06; margin: 14px 0 12px; letter-spacing:-.02em;}

.lead{font-size: 15px; line-height:1.7; color: rgba(233,233,239,.72); max-width: 56ch;}

.hero__ctas{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap;}

.kpis{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.kpi{padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); color: rgba(233,233,239,.86); font-size:12px}
.kpi b{color:#fff}

/* ---------- hero omega (matches your target look) ---------- */
.hero--omega h1{font-size: clamp(34px, 5.2vw, 74px); line-height:1.02}

.heroTitle{margin: 14px 0 12px}
.heroTitle .typedLine{
  display:block;
  margin-top:10px;
  font-size: clamp(32px, 4vw, 56px);
  line-height:1.08;
  letter-spacing:-.01em;
  color: rgba(233,233,239,.82);
}
.heroTitle .paren{color: rgba(233,233,239,.52); font-weight:800}

.bar{
  width:120px; height:4px; border-radius:4px;
  background: linear-gradient(90deg, var(--a), var(--a2));
  margin: 14px 0 12px;
}

.lede-strong{font-weight:900; font-size:clamp(16px,2.2vw,22px); color: rgba(214, 191, 255, .92); margin:6px 0}
.lede{font-size:clamp(15px,2vw,20px); color: rgba(233,233,239,.72); margin:0; max-width: 62ch}

.typed-gradient{
  background: linear-gradient(90deg, var(--a), var(--a2), var(--a));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:900;
}
.typed-cursor{color: var(--a2); font-weight:900; margin-left:2px; animation: blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

.proof{display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap}
.proof b{font-size:13px; color: rgba(233,233,239,.86)}
.stars{display:inline-flex; align-items:center; gap:6px}
.stars svg{display:block; height:18px; width:18px; fill:#f7d559}
.stars .txt{margin-left:8px; font-weight:900; color:#f7d559}

/* ----- Omega Canvas ----- */
.omegaCanvas{
  position:relative;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 380px;
  perspective: 1200px;
}

/* calm hero mode: reduce motion */
.omegaCanvas--calm .omegaInner{transition: none; transform: none}
.omegaCanvas--calm .omegaHalo{opacity:.25}
.omegaCanvas--calm .spark{animation-play-state: paused}
.omegaCanvas--calm:hover .spark{animation-play-state: running}

/* ---------- hero right showcase (static preview) ---------- */
.heroShowcase{
  align-self: stretch;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.heroShowcase__frame{
  position: relative;
  border-radius: 26px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.heroShowcase__frame::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg, rgba(173,58,220,.45), rgba(37,236,236,.30), rgba(173,58,220,.45));
  opacity: .18;
  filter: blur(18px);
  pointer-events:none;
}
.heroShowcase__frame img{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  border-radius: 18px;
}
.heroShowcase__chips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.heroShowcase .chip{
  display:inline-flex;
  align-items:center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(233,233,239,.86);
  font-weight: 800;
  font-size: 13px;
}

/* =====================
   Hero Showcase (InOneCRM preview)
   ===================== */
.heroMock2{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.heroMock2__top{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(90deg, rgba(37,236,236,.10), rgba(173,58,220,.12));
}
.heroMock2__dots{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.heroMock2__dots i{
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,.20);
}
.heroMock2__dots i:nth-child(1){ background: rgba(239,68,68,.9); }
.heroMock2__dots i:nth-child(2){ background: rgba(234,179,8,.95); }
.heroMock2__dots i:nth-child(3){ background: rgba(34,197,94,.95); }
.heroMock2__title{
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.92);
  font-size: 13px;
}
.heroMock2__badge{
  margin-left:auto;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}

.heroMock2__grid{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 12px;
  padding: 12px;
}
.heroMock2__panel{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.24);
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.heroMock2__panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(600px 340px at 25% 10%, rgba(173,58,220,.18), transparent 55%),
    radial-gradient(520px 320px at 85% 0%, rgba(37,236,236,.12), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.heroMock2__panelTitle{
  position: relative;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 10px;
}

.activityRow{
  position: relative;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 10px;
}
.activityDot{
  width: 10px; height: 10px; border-radius: 999px; margin-top: 5px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.03);
}
.activityDot--wa{ background: #22c55e; }
.activityDot--ai{ background: #AD3ADC; }
.activityDot--quote{ background: #45D1D5; }
.activityDot--book{ background: #f59e0b; }

.activityText{ color: rgba(255,255,255,.86); font-size: 12.5px; line-height: 1.25; }
.activityText b{ font-weight: 900; }
.activityText small{ display:block; color: rgba(255,255,255,.62); margin-top: 3px; font-size: 12px; }
.activityTag{
  margin-left:auto;
  font-weight: 900;
  font-size: 11px;
  color: rgba(255,255,255,.70);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}

.heroMock2__kpis{
  position: relative;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.miniKpi{
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}
.miniKpi__label{
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.miniKpi__value{
  color: rgba(255,255,255,.92);
  font-weight: 950;
  margin-top: 4px;
  font-size: 14px;
}

.pipe{
  position: relative;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.pipeCol__head{
  position: relative;
  font-weight: 900;
  font-size: 11px;
  color: rgba(255,255,255,.72);
  margin-bottom: 8px;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.pipeCard{
  position: relative;
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 10px;
}
.pipeCard__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pillx{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 11px;
  letter-spacing: .03em;
  color: rgba(255,255,255,.92);
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.35);
}
.pillx--ads{ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.35); }
.pillx--ai{ background: rgba(173,58,220,.12); border-color: rgba(173,58,220,.45); }
.pillx--book{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.45); }
.muted{ color: rgba(255,255,255,.55); font-size: 11px; font-weight: 800; }

.pipeCard__name{ color: rgba(255,255,255,.92); font-weight: 950; font-size: 12.5px; }
.pipeCard__meta{ color: rgba(255,255,255,.62); font-weight: 700; font-size: 11.5px; margin-top: 3px; }

.pipeCard--accent{
  background:
    radial-gradient(420px 240px at 15% 20%, rgba(173,58,220,.25), transparent 55%),
    rgba(255,255,255,.05);
  border-color: rgba(173,58,220,.35);
}
.pipeCard--booked{
  background:
    radial-gradient(420px 240px at 20% 20%, rgba(37,236,236,.20), transparent 60%),
    rgba(255,255,255,.05);
  border-color: rgba(37,236,236,.28);
}

.heroMock2__sparkline{
  position: relative;
  display:flex;
  gap: 10px;
  align-items:flex-end;
  padding: 10px 6px 6px;
  margin-top: 6px;
}
.heroMock2__sparkline span{
  flex: 1;
  height: 18px;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
}
.heroMock2__sparkline span:nth-child(2){ height: 26px; }
.heroMock2__sparkline span:nth-child(3){ height: 20px; }
.heroMock2__sparkline span:nth-child(4){ height: 32px; background: rgba(173,58,220,.22); }
.heroMock2__sparkline span:nth-child(5){ height: 22px; }
.heroMock2__sparkline span:nth-child(6){ height: 28px; }

.heroMock2__chips{
  position: relative;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.chip2{
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

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



.omegaNeural{position:relative; height:100%}

.omegaInner{
  position:absolute; inset:0;
  border-radius: inherit;
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .15s ease;
  transform-style: preserve-3d;
}

.omegaGridlines::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 40px);
}

.omegaGlassbg{
  position:absolute; inset:0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 18% 12%, rgba(173,58,220,.12), rgba(173,58,220,0) 60%),
    radial-gradient(120% 80% at 82% 88%, rgba(173,58,220,.10), rgba(173,58,220,0) 60%),
    linear-gradient(180deg, rgba(11,15,20,.85), rgba(5,7,11,.92));
}

.omegaHalo{
  position:absolute; inset:-40%;
  pointer-events:none;
  mix-blend-mode:screen;
  filter: blur(18px);
  opacity:.40;
  background: radial-gradient(240px 180px at var(--mx,50%) var(--my,50%), rgba(173,58,220,.22), rgba(173,58,220,0) 60%);
}

.omegaShine{
  position:absolute; inset:0;
  pointer-events:none;
  mix-blend-mode:overlay;
  opacity:0;
  transition: opacity .2s ease;
  background:
    radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 50%),
    radial-gradient(220px 180px at var(--mx,50%) var(--my,50%), rgba(173,58,220,.12), transparent 60%);
}
.omegaCanvas:hover .omegaShine{opacity:.65}

.omegaFlow{position:relative; z-index:1; width:100%; height:auto; display:block}
.pipe{stroke: rgba(255,255,255,.10); stroke-width:2; fill:none}
.pulse{stroke: url(#omegaGrad); stroke-width:2; fill:none; stroke-dasharray:6 14; opacity:.6; animation: dash 16s linear infinite; animation-play-state: paused}
@keyframes dash{to{stroke-dashoffset:-200}}
.omegaCanvas:hover .pulse{animation-play-state: running}

.omegaNode{
  position:absolute; z-index:2;
  display:flex; flex-direction:column; gap:6px;
  min-width:170px; max-width:240px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  color: rgba(233,233,239,.94);
  box-shadow: 0 16px 40px rgba(0,0,0,.50);
  transition: transform .2s ease, border-color .2s ease;
}
.omegaNode:hover{transform: translateY(-3px); border-color: rgba(255,255,255,.18)}
.omegaNode .tag{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:10px;
  background: linear-gradient(180deg, var(--a2), var(--a));
  box-shadow: 0 10px 22px rgba(173,58,220,.30);
  font-size:16px;
}
.omegaNode b{font-size:15px; letter-spacing:-.01em}
.omegaNode small{font-size:12px; color: rgba(233,233,239,.72)}

.omegaNode.n1{left:6%; top:12%}
.omegaNode.n2{left:54%; top:8%}
.omegaNode.n3{left:18%; top:56%}
.omegaNode.n4{left:60%; top:54%}

.spark{
  position:absolute; z-index:1;
  width:2px; height:2px; border-radius:50%;
  background:#fff;
  opacity:.8;
  filter: drop-shadow(0 0 6px var(--a2));
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{50%{opacity:.45; transform: translateY(-1px) scale(.92)}}

/* ---------- sections ---------- */
.section{
  position:relative;
  padding: clamp(72px, 7vw, 112px) 0;
background:#000000;}
.section--tight{padding-top: clamp(42px, 5vw, 72px)}
.section::before{
  content:none;
}

/* Force pure-black for all dark wrappers/sections (prevents faint seams) */
html, body{ background:#000000; }
main, header, footer,
.section, .hero, .cta-hero, .aifooter,
.abi-outcomes-pro, .abi-pro-panel{
  background-color:#000000 !important;
  background-image:none !important;
}

.section__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  margin-bottom:26px;
}

.section__title{
  font-size: clamp(28px, 4.2vw, 52px);
  margin:0;
  letter-spacing:-.02em;
}

.section__desc{
  margin:0;
  max-width:74ch;
  color: rgba(233,233,239,.72);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height:1.7;
}

 /* ---------- Pillars + Neon Screen (Replica) ---------- */
.pillarsNeon{position:relative}
.pillarsNeon::after{
  content:"";
  position:absolute; inset:-120px -40px auto -40px;
  height:360px;
  pointer-events:none;
  background:
    radial-gradient(420px 260px at 22% 40%, rgba(173,58,220,.22), transparent 60%),
    radial-gradient(520px 320px at 78% 20%, rgba(173,58,220,.16), transparent 62%);
  opacity:.85;
  filter: blur(2px);
}
.pillarsNeon__head{position:relative; z-index:1; text-align:center; max-width: 880px; margin: 0 auto 22px}
.pillarsNeon__kicker{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight:900;
  letter-spacing:.14em;
  font-size:11px;
  color: rgba(233,233,239,.80);
  text-transform:uppercase;
}
.pillarsNeon__title{margin:14px 0 10px; font-size: clamp(28px, 4.6vw, 54px); letter-spacing:-.02em}
.pillarsNeon__desc{margin:0; color: rgba(233,233,239,.72); line-height:1.7}

.pillarsNeon__top{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:18px;
}

.pillarCard{
  border-radius: var(--r2);
  padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 12% 10%, rgba(173,58,220,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 18px 60px rgba(0,0,0,.32);
  overflow:hidden;
  position:relative;
}
.pillarCard::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.28;
  background: radial-gradient(380px 220px at 22% 20%, rgba(173,58,220,.18), transparent 60%);
  mix-blend-mode: normal;
}
.pillarCard h3{margin:0 0 8px; font-size:18px; letter-spacing:-.01em}
.pillarCard p{margin:0; color: rgba(233,233,239,.72); line-height:1.7; font-size:14px}
.pillarCard--glow{border-color: rgba(173,58,220,.22)}
.pillarCard--glow::before{opacity:.8}

.pillarsNeon__screen{position:relative; z-index:1; margin-top:16px}
.neonScreen{
  position:relative;
  border-radius: calc(var(--r2) + 6px);
  padding: 14px;
}
.neonScreen__glow{
  position:absolute; inset:-18px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(520px 320px at 50% 0%, rgba(173,58,220,.22), transparent 62%),
    radial-gradient(520px 340px at 50% 100%, rgba(173,58,220,.18), transparent 64%);
  filter: blur(18px);
  opacity:.85;
}
.neonFrame{
  position:relative;
  border-radius: calc(var(--r2) + 6px);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(173,58,220,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.neonFrame::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  padding:1px;
  background: conic-gradient(from 180deg at 50% 50%, rgba(173,58,220,.0), rgba(173,58,220,.55), rgba(255,255,255,.0), rgba(173,58,220,.55), rgba(173,58,220,.0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.28;
}
.neonTop{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.neonDots{display:flex; gap:6px}
.neonDots span{width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.16)}
.neonTop__title{font-weight:900; letter-spacing:-.01em; color: rgba(233,233,239,.90); flex:1; text-align:center}
.neonBadges{display:flex; gap:8px; align-items:center}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight:900;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: rgba(233,233,239,.86);
}
.badge--soft{border-color: rgba(173,58,220,.20); background: rgba(173,58,220,.08)}

.neonBody{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:14px;
  padding:14px;
}
.neonSide{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  padding:14px;
}
.miniMetric{padding:12px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); margin-bottom:10px}
.miniMetric__label{font-size:12px; color: rgba(233,233,239,.62); font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.miniMetric__value{margin-top:6px; font-size:20px; font-weight:900; color:#fff}
.miniMetric__value small{font-size:12px; color: rgba(233,233,239,.60); font-weight:800; margin-left:6px}

.miniList{margin-top:12px; padding-top:10px; border-top:none}
.miniList__row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 8px; border-radius:14px}
.miniList__row:hover{background: rgba(255,255,255,.03)}
.miniList__row span{color: rgba(233,233,239,.78); font-weight:800}
.miniList__row b{color:#fff; font-weight:900}
.miniList__row .dot{width:8px; height:8px; border-radius:999px; background: rgba(173,58,220,.55); box-shadow:0 0 12px rgba(173,58,220,.35)}

.neonMain{display:flex; flex-direction:column; gap:12px}
.chartCard{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  padding:14px;
  overflow:hidden;
}
.chartCard__head{display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:10px}
.chartCard__head b{font-size:13px; color: rgba(233,233,239,.90)}
.sparkChart{width:100%; height:auto; display:block}
.sparkChart path{fill:none; stroke: rgba(255,255,255,.18); stroke-width:2}
.sparkChart .glow{stroke: rgba(173,58,220,.75); filter: drop-shadow(0 0 14px rgba(173,58,220,.35));}

.chartBars{
  display:flex; gap:10px; align-items:flex-end;
  margin-top:12px;
  height:74px;
}
.chartBars i{
  flex:1;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(173,58,220,.55), rgba(173,58,220,.14));
  border:1px solid rgba(173,58,220,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.miniCards{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px}
.miniCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:12px;
}
.miniCard__k{font-size:12px; color: rgba(233,233,239,.62); font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.miniCard__v{margin-top:8px; font-weight:900; color:#fff}


/* subtle keyword highlight */
.hl{
  background: linear-gradient(90deg, var(--a), rgba(233,233,239,.92), var(--a2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

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

/* Bento layout for Services (adds visual variety without changing copy) */
#services .grid3{
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
#services .grid3 > article:nth-child(1){ grid-column: span 5; }
#services .grid3 > article:nth-child(2){ grid-column: span 3; }
#services .grid3 > article:nth-child(3){ grid-column: span 4; }
#services .grid3 > article{ min-height: 170px; }

@media (max-width: 980px){
  #services .grid3{ grid-template-columns: 1fr; }
  #services .grid3 > article{ grid-column: auto; }
}

/* ---------- premium panel (glass) ---------- */
.panel{
  position:relative;
  border-radius: var(--r2);
  padding:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 12% 10%, rgba(173,58,220,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease;
  transform: translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style: preserve-3d;
}
.panel::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(173,58,220,.40), rgba(255,255,255,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.28;
}
.panel:hover{--lift:-2px; border-color: rgba(255,255,255,.16)}

.panel h3{margin:0 0 10px; font-size:18px; letter-spacing:-.01em}
.panel p{margin:0; color: rgba(233,233,239,.72); line-height:1.7; font-size:14px}

.panel--glow{
  border-color: rgba(173,58,220,.22);
  background:
    radial-gradient(120% 120% at 14% 12%, rgba(173,58,220,.18), transparent 58%),
    radial-gradient(120% 120% at 80% 80%, rgba(173,58,220,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}
.panel--glow::before{opacity:.80}

.iconPill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(233,233,239,.86);
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.iconPill i{
  display:inline-grid; place-items:center;
  width:28px; height:28px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(173,58,220,.20), rgba(173,58,220,.14));
  border:1px solid rgba(173,58,220,.26);
  box-shadow: 0 10px 22px rgba(173,58,220,.18);
  font-style:normal;
}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
.step{display:flex; gap:14px; align-items:flex-start}
.step__num{flex:0 0 auto; width:36px; height:36px; border-radius:14px; background: rgba(173,58,220,.14); border:1px solid rgba(173,58,220,.26); display:grid; place-items:center; font-weight:900}

/* ---------- marquee / trusted ---------- */
.marquee{
  position:relative;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.32);
}
.marquee::before,
.marquee::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width:96px;
  pointer-events:none;
  z-index:2;
}
.marquee::before{left:0; background: linear-gradient(90deg, rgba(0,0,0,.95), rgba(0,0,0,0))}
.marquee::after{right:0; background: linear-gradient(270deg, rgba(0,0,0,.95), rgba(0,0,0,0))}

.marquee__track{display:flex; width:max-content; animation: scroll 22s linear infinite}
.marquee:hover .marquee__track{animation-play-state: paused}

@keyframes scroll{to{transform: translateX(-50%)}}

.marquee__group{display:flex; gap:12px; padding:14px}
.logoPill{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(233,233,239,.86);
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ---------- pricing ---------- */
.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.price{
  position:relative;
  padding:24px;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 14% 10%, rgba(173,58,220,.16), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
.price::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(173,58,220,.55), rgba(255,255,255,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.35;
}

.price--best{border-color: rgba(173,58,220,.28); box-shadow: 0 22px 70px rgba(173,58,220,.22)}

.price__tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(233,233,239,.80);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.price__name{margin:14px 0 8px; font-size:18px}
.price__amt{font-size:32px; font-weight:900; letter-spacing:-.02em}
.price__amt span{font-size:12px; color: rgba(233,233,239,.70); font-weight:800}

.list{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.list li{display:flex; gap:10px; color: rgba(233,233,239,.86); font-size:14px; line-height:1.6}
.check{width:18px; height:18px; border-radius:7px; background: rgba(173,58,220,.16); border:1px solid rgba(173,58,220,.28); display:grid; place-items:center; flex:0 0 auto; margin-top:2px}

/* ---------- FAQ ---------- */
.faq{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
.details{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: var(--r2);
  padding:16px 18px;
}
.details summary{cursor:pointer; font-weight:900; list-style:none}
.details summary::-webkit-details-marker{display:none}
.details p{margin:12px 0 0; color: rgba(233,233,239,.72); line-height:1.7; font-size:14px}

/* ---------- CTA band ---------- */
.ctaBand{
  border-radius: var(--r2);
  border:1px solid rgba(173,58,220,.24);
  background:
    radial-gradient(820px 340px at 22% 40%, rgba(173,58,220,.22), transparent 62%),
    radial-gradient(760px 360px at 80% 60%, rgba(173,58,220,.14), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding:24px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.ctaBand h3{margin:0 0 8px; font-size:20px; letter-spacing:-.01em}
.ctaBand p{margin:0; color: rgba(233,233,239,.72); line-height:1.7; font-size:14px}

/* ---------- contact ---------- */
.form{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.field{display:flex; flex-direction:column; gap:8px}
.label{font-size:12px; color: rgba(233,233,239,.78); font-weight:900; letter-spacing:.02em}
.input, .textarea{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#fff;
  padding:12px 12px;
  outline:none;
}
.input:focus, .textarea:focus{border-color: rgba(173,58,220,.38); box-shadow: 0 0 0 4px rgba(173,58,220,.10)}
.textarea{min-height:140px; resize:vertical; grid-column: 1 / -1}
.form__row{grid-column: 1 / -1; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.note{font-size:12px; color: rgba(233,233,239,.70)}

/* ---------- footer ---------- */
.footer{padding:44px 0 66px; border-top:none; background: rgba(0,0,0,.18)}
.footer__row{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap}
.footer small{color: rgba(233,233,239,.72)}
.footer a{color: rgba(233,233,239,.85)}
.footer a:hover{color:#fff}

/* ---------- reveal animations ---------- */
.reveal{opacity:0; translate: 0 10px; transition: opacity .55s ease, translate .55s ease}
.reveal.is-in{opacity:1; translate: 0 0}


/* ---------- 21st-inspired micro-interactions (static HTML/CSS) ---------- */

/* scroll progress */
.scrollProg{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:95;
  background: rgba(255,255,255,.05);
}
.scrollProg__bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--a), var(--a2));
  box-shadow: 0 0 18px rgba(173,58,220,.35);
}

/* cursor glow (desktop only; JS hides on touch) */
.cursorGlow{
  position:fixed;
  width:380px; height:380px;
  left:-999px; top:-999px;
  transform: translate(-50%, -50%);
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode: normal;
  filter: blur(18px);
  opacity:.28;
  background: radial-gradient(circle at center, rgba(173,58,220,.16), rgba(173,58,220,.06) 30%, transparent 68%);
  transition: opacity .25s ease;
}

/* back to top */
.toTop{
  position:fixed;
  right:18px; bottom:18px;
  width:46px; height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  display:grid; place-items:center;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  cursor:pointer;
  opacity:0;
  transform: translateY(12px);
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease, background .15s ease, border-color .15s ease;
  z-index:94;
}
.toTop:hover{background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.24)}
.toTop.is-show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* spotlight glow (mousemove sets --px/--py) */
.spotlight{position:relative; --px:50%; --py:50%;}
.spotlight::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity .2s ease;
  background: radial-gradient(280px 220px at var(--px) var(--py), rgba(173,58,220,.22), transparent 60%);
  mix-blend-mode: normal;
}
.spotlight:hover::after{opacity:.9}

/* bento grid */
.bento{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}
.bentoCard{
  grid-column: span 6;
  border-radius: var(--r2);
  padding:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 12% 10%, rgba(173,58,220,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease;
  will-change: transform;
  transform: translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style: preserve-3d;
}
.bentoCard::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  padding:1px;
  background: conic-gradient(from 180deg at 50% 50%, rgba(173,58,220,.0), rgba(173,58,220,.55), rgba(255,255,255,.0), rgba(173,58,220,.55), rgba(173,58,220,.0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.35;
}
.bentoCard:hover{--lift:-2px; border-color: rgba(255,255,255,.18)}
.bentoCard:hover::before{opacity:.65; animation: spin 2.6s linear infinite}
@keyframes spin{to{transform: rotate(360deg)}}

.bentoCard h3{margin:10px 0 10px; font-size:20px; letter-spacing:-.01em}
.bentoCard p{margin:0; color: rgba(233,233,239,.72); line-height:1.7; font-size:14px}

.bentoTop{display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-start}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(233,233,239,.86);
  font-weight:900;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.chip--soft{border-color: rgba(173,58,220,.18); background: rgba(173,58,220,.08)}
.chip__icon{
  width:26px; height:26px;
  border-radius:10px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(173,58,220,.20), rgba(173,58,220,.14));
  border:1px solid rgba(173,58,220,.22);
  box-shadow: 0 10px 22px rgba(173,58,220,.14);
}

.span2{grid-column: span 8}

/* mini UI inside cards */
.mini{margin-top:16px; padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22)}
.miniRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; color: rgba(233,233,239,.78); font-size:12px; font-weight:800}
.miniDot{width:4px; height:4px; border-radius:999px; background: rgba(173,58,220,.55); box-shadow:0 0 10px rgba(173,58,220,.35)}
.miniBar{margin-top:12px; height:10px; border-radius:999px; background: rgba(255,255,255,.06); overflow:hidden}
.miniBar b{display:block; height:100%; width:66%; border-radius:inherit; background: linear-gradient(90deg, var(--a), var(--a2)); box-shadow:0 0 18px rgba(173,58,220,.25)}

.miniList{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.checkSm{
  width:18px; height:18px; border-radius:7px;
  background: rgba(173,58,220,.14);
  border:1px solid rgba(173,58,220,.26);
  display:grid; place-items:center;
  flex:0 0 auto;
  margin-right:10px;
  font-size:12px; font-weight:900;
}
.miniList li{display:flex; align-items:center; color: rgba(233,233,239,.86); font-size:14px}

.miniCal{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
  margin-top:14px;
}
.miniCal span{
  height:14px; border-radius:6px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.miniCal span.on{
  background: linear-gradient(180deg, rgba(173,58,220,.28), rgba(173,58,220,.12));
  border-color: rgba(173,58,220,.26);
  box-shadow: 0 0 18px rgba(173,58,220,.18);
}

.miniStack{margin-top:14px; display:grid; gap:10px}
.miniCard{
  height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
}
.miniCard::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-120%);
  animation: shimmer 2.8s ease-in-out infinite;
  opacity:.28;
}
.miniCard:nth-child(2)::after{animation-delay:.8s}
.miniCard:nth-child(3)::after{animation-delay:1.4s}
@keyframes shimmer{50%{transform: translateX(120%)}}

.miniChart{margin-top:14px; display:flex; gap:10px; align-items:flex-end; height:74px}
.miniChart i{
  flex:1;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(173,58,220,.18), rgba(255,255,255,.02));
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

/* stats */
.stats{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.stat__num{
  font-size:40px; font-weight:900; letter-spacing:-.02em;
  margin:0 0 8px;
  display:flex; align-items:baseline; gap:6px;
}
.stat__num small{font-size:14px; color: rgba(233,233,239,.72); font-weight:800}
.stat__label{font-weight:900; letter-spacing:.04em; text-transform:uppercase; font-size:12px; color: rgba(233,233,239,.84); margin-bottom:10px}

/* testimonial slider */
.tSlider{
  margin-top:18px;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 60px rgba(0,0,0,.32);
  overflow:hidden;
}
.tSlider__head{
  padding:18px 18px 14px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tSlider__ctrl{display:flex; gap:10px; flex-wrap:wrap}
.tSlider__track{
  display:flex;
  gap:14px;
  padding:16px;
  transform: translateX(0);
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.tCard{
  flex:0 0 auto;
  width:min(520px, 82vw);
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 12% 10%, rgba(173,58,220,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  transform: translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style: preserve-3d;
  transition: transform .18s ease, border-color .18s ease;
}
.tCard p{margin:0; font-size:15px; line-height:1.7; color: rgba(233,233,239,.86)}
.tMeta{margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tMeta b{font-weight:900}
.tMeta span{color: rgba(233,233,239,.70); font-size:13px}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .tSlider__track{transition:none}
  .bentoCard:hover::before{animation:none}
  .miniCard::after{animation:none}
}


/* ---------- responsive ---------- */
@media (max-width: 1060px){
  .header__row{grid-template-columns: 1fr auto; grid-template-areas: "brand cta";}
}

@media (max-width: 980px){
  .header__row{grid-template-columns: 1fr auto;}
  .brand{min-width:auto}
  .nav{display:none}
  .menuBtn{display:inline-grid; place-items:center}
  .hero__grid{grid-template-columns: 1fr;}
  .pillarsNeon__top{grid-template-columns: 1fr;}
  .neonBody{grid-template-columns: 1fr;}
  .neonTop__title{text-align:left;}

  .omegaCanvas{min-height: 340px}
  .omegaNode{min-width:132px; max-width:182px; padding:10px 11px}
  .omegaNode b{font-size:14px; line-height:1.22}
  .omegaNode small{font-size:11px; line-height:1.4}
  .omegaNode .tag{width:22px; height:22px; font-size:13px}
  .omegaNode.n1{left:4%; top:12%}
  .omegaNode.n2{left:50%; top:10%}
  .omegaNode.n3{left:12%; top:58%}
  .omegaNode.n4{left:56%; top:56%}
  .grid3{grid-template-columns: 1fr;}
  .steps{grid-template-columns: 1fr;}
  .pricing{grid-template-columns: 1fr;}
  .faq{grid-template-columns: 1fr;}
  .form{grid-template-columns: 1fr;}
  .ctaBand{flex-direction:column; align-items:flex-start}
}

@media (max-width: 520px){
  .hero{padding-top: 46px}
  .heroShowcase__frame{padding: 10px; border-radius: 22px}
  .heroShowcase__frame img{border-radius: 16px}
  .heroShowcase .chip{height:32px; font-size:12px; padding:0 12px}
}

@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
  .btn{transition:none}
  .btn--primary::after{transition:none}
  .marquee__track{animation:none}
  .cursorGlow{display:none}
}


/* ---------- showcase (light section) ---------- */
.showcase{padding-top: 46px}
.showcaseCard{
  position:relative;
  border-radius: 34px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,244,255,.94));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 28px 90px rgba(0,0,0,.42);
  overflow:hidden;
  color:#0f1016;
}
.showcaseCard::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 320px at 18% 26%, rgba(173,58,220,.16), transparent 62%),
    radial-gradient(640px 420px at 84% 18%, rgba(173,58,220,.14), transparent 64%);
  pointer-events:none;
}
.showcaseGrid{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 34px;
  align-items:center;
}
.shotFrame{
  border-radius: 22px;
  padding: 14px;
  background: rgba(255,255,255,.86);
  border: 2px solid rgba(173,58,220,.32);
  box-shadow: 0 22px 70px rgba(173,58,220,.18);
}
.shotFrame img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 16px;
}
.shotStats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.shotStat{
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(15,16,22,.10);
}
.shotNum{
  font-weight: 950;
  letter-spacing:-.02em;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
  background: linear-gradient(90deg, var(--a), var(--aLight));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.shotLbl{
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,16,22,.64);
}
.introPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #0f1016;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
}
.showcaseTitle{
  margin: 14px 0 10px;
  font-size: clamp(34px, 4.8vw, 74px);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: #0f1016;
}
.showcaseTitle .p{background:linear-gradient(90deg,var(--a),var(--aLight));-webkit-background-clip:text;background-clip:text;color:transparent}
.showcaseSub{
  font-weight: 900;
  background: linear-gradient(90deg, var(--a), var(--aLight));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  font-size: 18px;
  margin: 6px 0 10px;
}

.showcaseP{
  margin: 0 0 10px;
  color: rgba(15,16,22,.72);
  line-height: 1.75;
  font-size: 15px;
}
.showcaseBullets{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-top: 14px;
}
.bRow{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(15,16,22,.78);
  font-weight: 800;
  font-size: 14px;
}
.bChk{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  margin-top: 2px;
  color:#fff;
  background: linear-gradient(180deg, #AD3ADC, #AD3ADC);
  box-shadow: 0 10px 26px rgba(173,58,220,.26);
  font-weight: 900;
  font-size: 13px;
}
.showcaseCtas{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.showcaseCard .btn{
  background: rgba(15,16,22,.06);
  border-color: rgba(15,16,22,.12);
  color: #0f1016;
}
.showcaseCard .btn:hover{background: rgba(15,16,22,.08)}
.showcaseCard .btn--ghost{background: rgba(15,16,22,.08)}
.showcaseCard .btn--primary{
  color:#fff;
  border-color: transparent;
  background: linear-gradient(90deg, #AD3ADC, #AD3ADC);
  box-shadow: 0 18px 55px rgba(173,58,220,.30);
}
.showcaseCard .btn--primary:hover{filter:brightness(1.05)}

@media (max-width: 980px){
  .showcaseGrid{grid-template-columns: 1fr; gap: 18px}
  .shotStats{grid-template-columns: 1fr; }
  .showcaseBullets{grid-template-columns:1fr}
}

/* ---------- compare (before/after) ---------- */
.compare{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.compareCard{
  border-radius: var(--r2);
  padding: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
}
.compareCard--good{
  border-color: rgba(173,58,220,.22);
  background:
    radial-gradient(120% 120% at 14% 12%, rgba(173,58,220,.16), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.compareTag{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(233,233,239,.86);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.compareTag--good{
  border-color: rgba(173,58,220,.24);
  background: rgba(173,58,220,.12);
}
.compareList{
  margin: 0;
  padding-left: 18px;
  color: rgba(233,233,239,.78);
  line-height: 1.9;
  font-size: 14px;
}
@media (max-width: 980px){
  .compare{grid-template-columns: 1fr}
}

/* =========================================================
   SECTION: Intro Hero (Screenshot Replica)
   Scoped styles so it doesn't affect the rest of the site.
   ========================================================= */

.intro-hero{
  --intro-accent: #AD3ADC;
  --intro-accent-2: #C900FF;
  --intro-ink: #0b0f1a;
  --intro-muted: #5b6476;
  --intro-border: rgba(173,58,220,0.24);
  --intro-card: #ffffff;

  /* FULL-WIDTH white band (matches your screenshot) */
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 0;
  padding: clamp(44px, 6vw, 96px) 0;

  background: #fff;

  color: var(--intro-ink);
  border-radius: 0;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.intro-hero::before,
.intro-hero::after{ content:none; }

.intro-hero__container{
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.intro-hero__left{ min-width: 0; }
.intro-hero__right{ min-width: 0; }

.intro-hero .device-card{
  position: relative;
  border-radius: 18px;
  background:
    radial-gradient(1200px 600px at 0% 0%, rgba(173,58,220,0.12), transparent 45%),
    radial-gradient(900px 520px at 100% 0%, rgba(173,58,220,0.10), transparent 50%),
    #fff;
  border: 2px solid var(--intro-border);
  box-shadow: 0 26px 90px rgba(17, 24, 39, 0.18);
  padding: 18px;
  overflow: hidden;
}

.intro-hero .device-card::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(closest-side, rgba(173,58,220,0.18), transparent 60%);
  filter: blur(20px);
  opacity: .55;
  pointer-events:none;
}

.intro-hero .device-card__img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.intro-hero .stat-row{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.intro-hero .stat-card{
  background: var(--intro-card);
  border: 1px solid rgba(10, 20, 40, 0.10);
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.08);
}

.intro-hero .stat-card__value{
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--intro-accent);
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.05;
}

.intro-hero .stat-card__label{
  margin-top: 6px;
  color: var(--intro-muted);
  font-size: 13px;
  line-height: 1.25;
}

.intro-hero .intro-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #0b1220;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.intro-hero .intro-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--intro-ink);
  font-size: clamp(34px, 4.5vw, 72px);
  line-height: 1.02;
}

.intro-hero .intro-title .accent{
  color: var(--intro-accent);
  text-shadow: 0 10px 30px rgba(173,58,220, 0.20);
}

.intro-hero .intro-kicker{
  margin: 14px 0 10px;
  color: var(--intro-accent);
  font-weight: 900;
  font-size: clamp(16px, 1.25vw, 20px);
}

.intro-hero .intro-body{
  color: var(--intro-muted);
  font-size: 16px;
  line-height: 1.6;
}

.intro-hero .intro-body p{ margin: 0 0 10px; }
.intro-hero .intro-body strong{ color: #111827; }

.intro-hero .feature-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
}

.intro-hero .feature-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #1f2937;
  font-size: 14.5px;
  line-height: 1.3;
}

.intro-hero .check{
  color: var(--intro-accent);
  display: inline-flex;
  margin-top: 1px;
}

.intro-hero .intro-cta{
  margin-top: 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.intro-hero .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
  font-size: 14px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  will-change: transform;
  border: 0;
}

.intro-hero .btn-primary{
  color: #fff;
  background: linear-gradient(90deg, var(--intro-accent), var(--intro-accent-2));
  box-shadow: 0 18px 50px rgba(173,58,220,0.24);
}

.intro-hero .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 70px rgba(173,58,220,0.30);
}

.intro-hero .btn-secondary{
  color: #fff;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 44px rgba(11, 18, 32, 0.20);
}

.intro-hero .btn-secondary:hover{ transform: translateY(-1px); }

@media (max-width: 980px){
  .intro-hero__container{ grid-template-columns: 1fr; }
  .intro-hero .feature-grid{ grid-template-columns: 1fr; }
  .intro-hero .stat-row{ grid-template-columns: 1fr; }
  .intro-hero{ border-radius: 0; }
}


/* =========================================================
   SECTION: System Map (Interactive)
   Cleaner + more "business system" (less generic AI vibe)
   ========================================================= */

.section--system .sysMap{
  display:grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 18px;
  align-items: stretch;
}

.sysSteps{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-left: 18px;
}

.sysSteps::before{
  content:"";
  position:absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(173,58,220,.55), rgba(173,58,220,.25));
  opacity: .22;
}

.sysStep{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  position:relative;
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}

.sysStep::after{
  content:"";
  position:absolute;
  left: -2px;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(173,58,220,.22);
  box-shadow: 0 0 0 6px rgba(173,58,220,.10);
}

.sysStep:hover{
  transform: translateY(-1px) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}

.sysStep.is-active{
  border-color: rgba(173,58,220,.34);
  background: linear-gradient(180deg, rgba(173,58,220,.12), rgba(255,255,255,.03));
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

.sysStep.is-active::after{
  background: linear-gradient(180deg, rgba(173,58,220,.9), rgba(173,58,220,.9));
  box-shadow: 0 0 0 8px rgba(173,58,220,.14), 0 0 32px rgba(173,58,220,.22);
}

.sysIcon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(173,58,220,.12);
  border: 1px solid rgba(173,58,220,.18);
  color: rgba(233,233,239,.92);
  flex: 0 0 auto;
}

.sysIcon svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .98;
}

.sysText{min-width:0}
.sysText b{display:block; font-size: 15px; letter-spacing: -.01em}
.sysText small{display:block; margin-top:4px; font-size: 12px; color: rgba(233,233,239,.68); line-height:1.2}

.sysPill{
  margin-left:auto;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(233,233,239,.78);
}

.sysPanels{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  padding: 18px;
  overflow:hidden;
}

.sysPanel{display:none}
.sysPanel.is-active{display:block}

.sysKicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(233,233,239,.70);
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.sysPanels h3{
  margin: 12px 0 8px;
  font-size: 22px;
  letter-spacing: -.02em;
}

.sysPanels p{
  margin: 0 0 14px;
  color: rgba(233,233,239,.72);
  line-height: 1.7;
}

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

.sysCol{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.26);
  padding: 14px 14px 12px;
}

.sysLbl{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(233,233,239,.86);
  margin-bottom: 8px;
}

.sysCol ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(233,233,239,.72);
  font-size: 13px;
  line-height: 1.7;
}

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

.sysStrip__item{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px 16px;
}

.sysStrip__item b{display:block; font-size:14px}
.sysStrip__item span{display:block; margin-top:6px; color: rgba(233,233,239,.70); font-size:13px}

@media (max-width: 980px){
  .section--system .sysMap{grid-template-columns: 1fr}
  .sysTrip{grid-template-columns: 1fr}
  .sysStrip{grid-template-columns: 1fr}
  .sysPill{display:none}
  .sysSteps{padding-left: 0}
  .sysSteps::before{display:none}
  .sysStep::after{display:none}
}


/* Anchor offsets for fixed header */
.anchor{ scroll-margin-top: 92px; }



/* =========================================================
SECTION: Dark CTA Hero (Replica)
========================================================= */
:root{
  --cta-bg: #000000;
  --cta-ink: #eaf0ff;
  --cta-muted: rgba(234,240,255,.68);
  --cta-border: rgba(255,255,255,.12);
  --cta-purple: #AD3ADC;
  --cta-purple-2: #AD3ADC;
  --cta-green: #22c55e;
}

.cta-hero{
  position: relative;
  isolation: isolate;
  background: var(--cta-bg);
  padding: clamp(64px, 8vw, 110px) 0;
  overflow: hidden;
}

.cta-hero__bg{
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(173,58,220,.20), transparent 60%),
    radial-gradient(800px 520px at 85% 18%, rgba(173,58,220,.12), transparent 60%),
    radial-gradient(1200px 700px at 50% 120%, rgba(0,0,0,.75), transparent 60%),
    radial-gradient(closest-side, rgba(0,0,0,.85), transparent 55%),
    var(--cta-bg);
  filter: saturate(1.05);
}

.cta-hero__bg::before{
  content:"";
  position:absolute;
  inset:-20px;
  background:
    radial-gradient(2px 2px at 15% 18%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 42% 12%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(2px 2px at 88% 10%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 55%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px at 64% 58%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 93% 64%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 78%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px at 78% 80%, rgba(255,255,255,.6), transparent 60%);
  opacity: .7;
}

.cta-hero__wrap{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.cta-hero__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.88);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}

.cta-hero__stars{
  letter-spacing: 2px;
  font-size: 12px;
  opacity: .95;
}

.cta-hero__title{
  margin: 18px auto 0;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--cta-ink);
  font-size: clamp(40px, 5.2vw, 78px);
  line-height: 1.03;
}

.cta-hero__accent{
  color: var(--cta-purple-2);
  text-shadow: 0 18px 60px rgba(173,58,220,.35);
}

.cta-hero__underline{
  width: 140px;
  height: 6px;
  margin: 18px auto 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--cta-purple), transparent);
  filter: drop-shadow(0 10px 22px rgba(173,58,220,.35));
}

.cta-hero__sub{
  margin: 0 auto;
  max-width: 860px;
  color: var(--cta-muted);
  font-size: 16px;
  line-height: 1.55;
}

.cta-hero__actions{
  margin-top: 26px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btnx{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  will-change: transform;
  user-select: none;
}

.btnx__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btnx--primary{
  color: #fff;
  background: linear-gradient(90deg, var(--cta-purple), var(--cta-purple-2));
  box-shadow:
    0 22px 70px rgba(173,58,220,.35),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

.btnx--primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 28px 90px rgba(173,58,220,.42),
    0 0 0 1px rgba(255,255,255,.12) inset;
}

.btnx--wa{
  color: #dfffea;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.35);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

.btnx--wa:hover{
  transform: translateY(-1px);
  border-color: rgba(34,197,94,.55);
}

.btnx--ghost{
  color: rgba(234,240,255,.92);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

.btnx--ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}

.cta-hero__chips{
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chipx{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.85);
  font-weight: 700;
  font-size: 13px;
}

@media (max-width: 640px){
  .brand img{height:46px;}

  .btnx{ width: 100%; max-width: 340px; }
  .cta-hero__underline{ width: 120px; }
}

/* =========================================================
SECTION: Footer + CTA Panel (Replica)
========================================================= */
:root{
  --f-bg: #000000;
  --f-ink: #eaf0ff;
  --f-muted: rgba(234,240,255,.62);
  --f-muted2: rgba(234,240,255,.45);
  --f-border: rgba(255,255,255,.10);

  --f-purple: #AD3ADC;
  --f-purple2: #D26AF0;
  --f-green: #22c55e;
}

.aifooter{
  position: relative;
  isolation: isolate;
  background: var(--f-bg);
  padding: 56px 0 36px;
  overflow: hidden;
}

.aifooter__bg{
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(173,58,220,.20), transparent 60%),
    radial-gradient(900px 520px at 88% 0%, rgba(173,58,220,.10), transparent 55%),
    radial-gradient(1200px 700px at 50% 120%, rgba(0,0,0,.9), transparent 60%),
    var(--f-bg);
}

.aifooter__wrap{
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.aifooter__top{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 26px;
  align-items: center;
  margin-bottom: 18px;
}

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

.brandmark{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  background: rgba(173,58,220,.10);
  border: 2px solid rgba(173,58,220,.65);
  box-shadow: 0 18px 55px rgba(173,58,220,.18);
}

.brandname{
  color: var(--f-ink);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: 22px;
  position: relative;
}

.aifooter__tagline{
  margin: 0;
  color: var(--f-muted);
  font-size: 16px;
  line-height: 1.55;
}

.aifooter__cta{
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid rgba(69,209,213,.30);
  background: rgba(0,0,0,.55);
  box-shadow: 0 28px 90px rgba(0,0,0,.55), 0 0 70px rgba(69,209,213,.18);
  padding: 26px 26px;
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 18px;
  align-items: center;
}


.cta__title{
  margin: 0;
  color: var(--f-ink);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.15;
}

.cta__accent{
  color: var(--f-purple2);
  text-shadow: 0 18px 60px rgba(173,58,220,.35);
}

.cta__underline{
  width: 120px;
  height: 4px;
  border-radius: 999px;
  margin: 12px 0 10px;
  background: linear-gradient(90deg, transparent, var(--f-purple), transparent);
  filter: drop-shadow(0 12px 24px rgba(173,58,220,.35));
}

.cta__sub{
  margin: 0;
  color: var(--f-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.cta__right{
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.aibtn{
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 900;
  color: #fff;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  will-change: transform;
}

.aibtn--primary{
  background: #45D1D5;
  color: #001012;
  box-shadow: 0 22px 70px rgba(69,209,213,.28);
}
.aibtn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 28px 90px rgba(69,209,213,.34);
}

.aibtn--wa{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.35);
  color: #dfffea;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

.aibtn--wa:hover{
  transform: translateY(-1px);
  border-color: rgba(34,197,94,.55);
}

.aibtn__dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aifooter__grid{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  padding-bottom: 28px;
  border: none;
}

.fcol__title{
  color: rgba(234,240,255,.75);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .12em;
  margin-bottom: 12px;
}

.flist{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.flist a{
  color: var(--f-muted);
  text-decoration: none;
  font-weight: 650;
  position: relative;
  padding-left: 16px;
}

.flist a::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--f-purple);
  opacity: .95;
}

.flist a:hover{
  color: rgba(234,240,255,.92);
}

.socials{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sbtn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.80);
  text-decoration: none;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.sbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
}

.sbtn--wa{
  color: #dfffea;
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.08);
}

.aifooter__bottom{
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.aifooter__copy{
  color: rgba(234,240,255,.80);
  font-weight: 650;
}

.aifooter__mini{
  margin-left: 10px;
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
}

.aifooter__mini a{
  color: var(--f-muted2);
  text-decoration: none;
  font-weight: 650;
}

.aifooter__mini a:hover{
  color: rgba(234,240,255,.85);
}

.aifooter__toplink{
  color: rgba(234,240,255,.85);
  text-decoration: none;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.aifooter__toplink:hover{
  color: #fff;
}

@media (max-width: 980px){
  .aifooter__top{ grid-template-columns: 1fr; }
  .aifooter__cta{ grid-template-columns: 1fr; }
  .cta__right{ justify-content: flex-start; }
  .aifooter__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px){
  .aifooter__grid{ grid-template-columns: 1fr; }
  .aibtn{ width: 100%; }
}



/* =========================================================
SECTION: 3 Pillars + Neon Dashboard
========================================================= */
.pillars-neon{
  position: relative;
  isolation: isolate;
  padding: clamp(52px, 7vw, 92px) 0;
  overflow: hidden;
}

.pillars-neon__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(37,236,236,.10), transparent 60%),
    radial-gradient(900px 520px at 85% 0%, rgba(173,58,220,.10), transparent 60%),
    radial-gradient(1200px 700px at 50% 120%, rgba(0,0,0,.9), transparent 60%),
    transparent;
}

.pillars-neon__wrap{
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.pillars-neon__top{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.pillar{
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  position: relative;
  overflow:hidden;
}

.pillar::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(420px 220px at 20% 10%, rgba(37,236,236,.16), transparent 60%);
  opacity:.9;
  pointer-events:none;
}

.pillar__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: rgba(255,255,255,.92);
  transform: translateY(8px);
  opacity: 0;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .55s ease;
}

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

.pillar__desc{
  margin: 10px 0 0;
  color: rgba(255,255,255,.68);
  line-height: 1.55;
  font-size: 14.5px;
}

.pillars-neon__screenWrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}

.neonScreen{
  border-radius: 22px;
  position: relative;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(37,236,236,.16), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(173,58,220,.10), transparent 60%),
    rgba(255,255,255,.03);
  box-shadow: 0 34px 110px rgba(0,0,0,.6);
}

.neonScreen__glow{
  position:absolute;
  inset:-2px;
  background: conic-gradient(from 180deg, rgba(37,236,236,.0), rgba(37,236,236,.45), rgba(173,58,220,.35), rgba(37,236,236,.0));
  filter: blur(18px);
  opacity:.55;
  pointer-events:none;
}

.neonScreen__frame{
  position:relative;
  padding: 14px;
}

.neonScreen__topbar{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}

.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; opacity:.95;}
.dot--r{ background: rgba(255,80,80,.9); }
.dot--y{ background: rgba(255,200,80,.9); }
.dot--g{ background: rgba(80,255,170,.9); }

.neonScreen__title{
  margin-left: 10px;
  color: rgba(255,255,255,.85);
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 13px;
}

.neonScreen__body{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
}

.uiCol{ display:grid; gap: 12px; }
.uiCard{
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  padding: 14px 14px;
}

.uiKicker{
  color: rgba(255,255,255,.62);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.uiBig{
  margin-top: 6px;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,.92);
}
.uiMini{
  margin-top: 6px;
  color: rgba(255,255,255,.62);
  font-weight: 650;
  font-size: 13px;
}

.uiCard--list{ padding: 12px; }
.uiRow{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.uiRow + .uiRow{ margin-top: 10px; }

.tag{
  display:inline-flex;
  align-items:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  background: rgba(37,236,236,.12);
  border: 1px solid rgba(37,236,236,.35);
}
.tag--c{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.tag--p{ background: rgba(173,58,220,.10); border-color: rgba(173,58,220,.32); }

.muted{ color: rgba(255,255,255,.62); font-weight: 650; font-size: 13px; }

.uiMain{
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  padding: 14px 14px;
  display:flex;
  flex-direction: column;
  gap: 14px;
}

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

.node{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: 13px;
}

.node--a{ border-color: rgba(37,236,236,.35); background: rgba(37,236,236,.08); }
.node--b{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.node--g{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); }

.arrow{ color: rgba(255,255,255,.55); font-weight: 900; }

.graph{
  height: 120px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:flex-end;
  gap: 8px;
  padding: 12px;
  overflow:hidden;
}

.graph .bar{
  flex: 1;
  border-radius: 10px 10px 2px 2px;
  background: linear-gradient(180deg, rgba(37,236,236,.95), rgba(37,236,236,.10));
  opacity: .9;
}
.graph .b1{ height: 42%; }
.graph .b2{ height: 68%; }
.graph .b3{ height: 52%; }
.graph .b4{ height: 84%; background: linear-gradient(180deg, rgba(173,58,220,.75), rgba(173,58,220,.10));}
.graph .b5{ height: 60%; }
.graph .b6{ height: 74%; }

.chips{ display:flex; flex-wrap:wrap; gap: 10px; }
.chip{
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  font-weight: 800;
  font-size: 13px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
.chip--a{ border-color: rgba(37,236,236,.35); background: rgba(37,236,236,.08); }
.chip--g{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); }

.neonCTA{
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
  padding: 18px 18px;
  display:flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.neonCTA__kicker{
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

.neonCTA__title{
  margin: 6px 0 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.92);
  font-size: 20px;
}

.neonCTA__desc{
  margin: 8px 0 0;
  color: rgba(255,255,255,.68);
  max-width: 720px;
  line-height: 1.55;
  font-size: 14.5px;
}

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

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


/* --- Patch v11: brand purple + dashboard image + footer logo --- */
.neonScreen__imgwrap{
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.neonScreen__img{
  display:block;
  width: 100%;
  height: auto;
  transform: translateZ(0);
}
.brandmark--img{
  height: 56px;
  width: auto;
  object-fit: contain;
  border-radius: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}




/* =========================================================
SECTION: AI Logos Marquee (White)
========================================================= */
.ai-marquee{
  /* Match the intro-hero white band background (no visible seam) */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 18px 0 0;
  border: 0;
  background:#fff;
}
.ai-marquee__wrap{
  width: 100%;
  margin: 0;
  padding: 0 24px;
  display:flex;
  align-items:center;
  gap: 0;
}
.ai-marquee__rail{
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ai-marquee__track{
  display:flex;
  align-items:center;
  gap: 34px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
  animation: aiMarquee var(--ai-marquee-duration, 6s) linear infinite;
  animation-play-state: running;
}

.ai-marquee__track img{ height: 28px; width: 160px; object-fit: contain; flex: 0 0 auto; opacity: .95; filter: none; }



@keyframes aiMarquee{ from{ transform: translate3d(0,0,0);} to{ transform: translate3d(calc(-1 * var(--ai-marquee-distance, 50%)),0,0);} }to{transform:translate3d(calc(-1 * var(--ai-marquee-distance, 50%)),0,0);}}
@media (prefers-reduced-motion: reduce){
  .ai-marquee__track{ animation: none !important; transform:none !important; }
}

@media (max-width: 640px){
  .ai-marquee__wrap{ gap: 12px; }
  .ai-marquee__track{ gap: 22px; animation-duration: 5s; }
  .ai-marquee__track img{ height: 28px; width: 160px; object-fit: contain; flex: 0 0 auto; opacity: .95; filter: none; }


}




.social-marquee{
  background:#ffffff;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 10px 0 22px;
  border: none;
}
.social-marquee__wrap{
  width: 100%;
  margin: 0;
  padding: 0 24px 0;
  display:flex;
  align-items:center;
}
.social-marquee__rail{
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.social-marquee__track{
  display:flex;
  align-items:center;
  gap: 34px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
  animation: socialMarquee var(--social-marquee-duration, 10s) linear infinite;
  animation-play-state: running;
}
.social-marquee__track img{ height: 30px; width: 170px; object-fit: contain; flex: 0 0 auto; opacity: .95; filter: none; }
@keyframes socialMarquee{ from{ transform: translate3d(calc(-1 * var(--social-marquee-distance, 50%)),0,0);} to{ transform: translate3d(0,0,0);} }
  to{transform:translate3d(0,0,0);}
}
.social-marquee.is-ready .social-marquee__track{ animation-play-state: running; }

@media (max-width: 640px){
  .social-marquee__track{ gap: 22px; }
  .social-marquee__track img{ height: 30px; width: 170px; object-fit: contain; flex: 0 0 auto; opacity: .95; filter: none; }
}

/* =========================================================
FINAL OVERRIDES (Brand lock + clean sections)
========================================================= */
html, body{
  background:#000000 !important;
}

/* Hard-force all dark sections to pure black (no seams) */
body,
main, header, footer,
.section, .hero, .cta-hero, .aifooter,
.abi-outcomes-pro, .abi-pro-panel,
.section--system, .section--services, .section--results, .section--about, .section--blog,
.pillarsNeon{
  background:#000000 !important;
  background-image:none !important;
}

/* Remove section dividers that can look like slits */
.section::before, .section::after,
.hero::before, .hero::after{
  border:0 !important;
  box-shadow:none !important;
}

/* Brand purple */
:root{ --a:#AD3ADC; --a2:#D58BFF; }

/* Purple headline effect (apply to all purple words) */
.hl,
.abi-pro-accent,
.cta__accent,
.cta-hero__accent{
  background: linear-gradient(90deg, #AD3ADC 0%, #E7B6FF 55%, #AD3ADC 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent !important;
  text-shadow: 0 18px 70px rgba(173,58,220,.32);
}

/* Header logo: bigger + crisp */
.brand__logo{
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display:block;
}
@media (max-width: 640px){
  .brand__logo{ height: 40px; max-width: 200px; }
}

/* System: make the changing detail panel white */
.section--system .sysPanels{
  background:#ffffff !important;
  border-color: rgba(0,0,0,.10) !important;
}
.section--system .sysPanels h3,
.section--system .sysPanels p,
.section--system .sysPanels li,
.section--system .sysLbl{
  color: rgba(10,10,14,.92) !important;
}
.section--system .sysKicker{
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.10) !important;
  color: rgba(10,10,14,.70) !important;
}

/* Outcomes cards: white cards, keep white on hover */
.abi-pro-card{
  background:#ffffff !important;
  border-color: rgba(0,0,0,.10) !important;
  color: rgba(10,10,14,.92) !important;
}
.abi-pro-card *{ color: inherit; }
.abi-pro-card:hover{
  background:#ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 22px 70px rgba(0,0,0,.18) !important;
}

/* CTA hero glow: extend full width (no cut-off) */
.cta-hero{ overflow: visible !important; }
.cta-hero__bg{ inset: -140px -60px !important; }

/* Footer logo: no box */
.aifooter__logo{
  width: 160px;
  height: auto;
  display:block;
  filter: none;
}
@media (max-width: 640px){
  .aifooter__logo{ width: 150px; }
}

/* AI logo marquee: faster + equal sizing already */
.ai-marquee__track{ animation-duration: 4s !important; }
@media (max-width: 640px){
  .ai-marquee__track{ animation-duration: 3.5s !important; }
}


/* =========================================================
   Outcomes v2 + System v2 (cleaner, higher contrast)
   Brand purple: #AD3ADC
========================================================= */

.abi-gradient{
  background: linear-gradient(90deg, #AD3ADC, #E9B7FF 55%, #AD3ADC);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 14px 50px rgba(173,58,220,.25);
}

/* Outcomes v2 */
.abi-outcomes-v2{
  position: relative;
  padding: clamp(56px, 7vw, 88px) 0;
  background: #000;
  overflow: hidden;
}

.abi-wrap{
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}
.abi-out-head{
  text-align: center;
  max-width: 920px;
  margin: 0 auto 28px;
}
.abi-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.14em;
  text-transform: uppercase;
}
.abi-pill__dot{
  width:8px;height:8px;border-radius:999px;
  background:#AD3ADC;
  box-shadow: 0 0 0 4px rgba(173,58,220,.16);
}
.abi-out-title{
  margin: 16px 0 10px;
  color: #fff;
  font-weight: 950;
  letter-spacing: -0.04em;
  font-size: clamp(34px, 4.3vw, 56px);
  line-height: 1.06;
}
.abi-out-sub{
  margin: 0;
  color: rgba(255,255,255,.70);
  font-size: 16px;
  line-height: 1.55;
}
.abi-out-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}
.abi-out-card{
  position: relative;
  border-radius: 20px;
  /* black glass */
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(69,209,213,.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 22px 70px rgba(0,0,0,.60),
    0 0 0 1px rgba(69,209,213,.12) inset,
    0 0 40px rgba(69,209,213,.10);
  padding: 22px 20px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* top ribbon */
.abi-out-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 6px;
  background: linear-gradient(90deg, rgba(69,209,213,0), rgba(69,209,213,.95), rgba(69,209,213,0));
  opacity: .9;
}
/* corner glow */
.abi-out-card::after{
  content:"";
  position:absolute;
  width: 220px; height: 220px;
  right: -110px; top: -110px;
  background: radial-gradient(circle at 30% 30%, rgba(69,209,213,.22), transparent 62%);
  pointer-events:none;
}
.abi-out-card:hover{ transform: translateY(-2px); border-color: rgba(69,209,213,.75); box-shadow: 0 30px 95px rgba(0,0,0,.66), 0 0 0 1px rgba(69,209,213,.16) inset, 0 0 70px rgba(69,209,213,.22); }

.abi-out-card__top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
.abi-out-ico{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  background: linear-gradient(180deg, rgba(173,58,220,.18), rgba(173,58,220,.06));
  border: 1px solid rgba(173,58,220,.28);
  font-size: 18px;
  box-shadow: 0 14px 40px rgba(173,58,220,.12);
}
.abi-out-kpi{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.abi-out-kpi__num{ font-size: 46px; font-weight: 1000; letter-spacing: -0.04em; color: #fff; }

.abi-out-kpi__unit{ font-size: 12px; color: rgba(255,255,255,.60); font-weight: 800; text-transform: uppercase; letter-spacing: .10em; }

.abi-out-kpi__slash{ opacity:.35; padding:0 2px; }
.abi-out-kpi__x{ font-size: .85em; opacity:.5; margin-left: 3px; }
.abi-out-label{
  margin-top: 10px;
  font-weight: 950;
  color: #111;
  letter-spacing: -0.02em;
}
.abi-out-desc{
  margin: 6px 0 0;
  color: rgba(0,0,0,.68);
  line-height: 1.55;
  font-size: 14.5px;
}
.abi-out-card--featured{
  background:#ffffff;
}
.abi-out-cta{
  margin-top: 18px;
  position: relative;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #AD3ADC 0%, #7B1FB5 100%);
  box-shadow:
    0 26px 90px rgba(173,58,220,.38),
    0 14px 44px rgba(0,0,0,.55);
}
.abi-out-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(700px 360px at 80% 0%, rgba(255,255,255,.14), transparent 60%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity: .85;
}
.abi-out-cta::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
  pointer-events:none;
  opacity:.55;
}
.abi-out-cta > *{ position: relative; z-index:1; }

.abi-out-cta__title{
  font-weight: 950;
  color:#fff;
  letter-spacing:-0.02em;
}
.abi-out-cta__sub{
  color: rgba(255,255,255,.86);
  font-size: 14px;
  margin-top: 3px;
}
.abi-out-cta__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 980px){
  .abi-out-grid{ grid-template-columns: 1fr; }
  .abi-out-cta{ flex-direction: column; align-items:flex-start; }
}

/* System v2 */
.section--systemv2{
  background: #000 !important;
  padding: clamp(70px, 7vw, 96px) 0;
}
.systemv2__head{
  text-align:center;
  max-width: 980px;
  margin: 0 auto 24px;
}
.systemv2__title{
  margin: 0;
  color:#fff;
  font-weight: 950;
  letter-spacing:-0.04em;
  font-size: clamp(34px, 4.3vw, 56px);
  line-height: 1.06;
}
.systemv2__sub{
  margin: 10px auto 0;
  color: rgba(255,255,255,.70);
  font-size: 16px;
  line-height: 1.55;
  max-width: 860px;
}
.systemv2__grid{
  display:grid;
  grid-template-columns: 1.05fr 1.25fr;
  gap: 18px;
  align-items: stretch;
}
.systemv2__steps{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.systemv2__step{
  width: 100%;
  text-align:left;
  display:grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items:center;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.systemv2__step:hover{
  transform: translateY(-1px);
  border-color: rgba(173,58,220,.28);
}
.systemv2__step.is-active{
  background: rgba(173,58,220,.14);
  border-color: rgba(173,58,220,.55);
  box-shadow: 0 24px 70px rgba(173,58,220,.18);
}
.systemv2__badge{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 18px;
}
.systemv2__meta{ display:flex; flex-direction:column; gap:2px; }
.systemv2__name{ font-weight: 950; letter-spacing:-0.02em; color:#fff; }
.systemv2__mini{ color: rgba(255,255,255,.62); font-size: 12.8px; }
.systemv2__tag{
  justify-self:end;
  font-weight: 950;
  font-size: 11px;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}

/* PANEL (dark) */
.systemv2__panel{
  background: rgba(255,255,255,.04);
  border-radius: 22px;
  padding: 18px 18px;
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow: hidden;
}
.systemv2__panel::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(900px 360px at 0% 0%, rgba(173,58,220,.28), transparent 55%),
    radial-gradient(900px 360px at 100% 20%, rgba(173,58,220,.18), transparent 60%);
  opacity:.55;
  pointer-events:none;
}
.systemv2__crumb{
  display:inline-flex;
  align-items:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(173,58,220,.10);
  border: 1px solid rgba(173,58,220,.28);
  color: rgba(255,255,255,.85);
  font-weight: 950;
  letter-spacing:.10em;
  font-size: 11px;
  text-transform: uppercase;
}
.systemv2__panelTitle{
  margin: 12px 0 6px;
  font-weight: 950;
  color: #fff;
  letter-spacing: -0.03em;
  font-size: 26px;
  line-height: 1.18;
}
.systemv2__panelDesc{
  margin: 0 0 14px;
  color: rgba(255,255,255,.70);
  line-height: 1.6;
}
.systemv2__bentos{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sbento{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px 12px;
}
.sbento__t{
  font-weight: 950;
  color:#fff;
  margin-bottom: 8px;
}
.sbento__list{
  margin:0;
  padding-left: 18px;
  color: rgba(255,255,255,.72);
  display:grid;
  gap: 6px;
}
.systemv2__strip{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.systemv2__stripItem{
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
}
.systemv2__stripItem b{
  display:block;
  color:#fff;
  letter-spacing:-0.02em;
}
.systemv2__stripItem span{
  display:block;
  margin-top: 4px;
  color: rgba(255,255,255,.65);
  font-size: 13px;
}
.systemv2__cta{
  margin-top: 14px;
  border-radius: 22px;
  padding: 18px 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(900px 420px at 20% 30%, rgba(173,58,220,.18), transparent 58%), rgba(255,255,255,.04);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
}
.systemv2__ctaTitle{
  color:#fff;
  font-weight: 950;
  letter-spacing:-0.02em;
}
.systemv2__ctaSub{
  color: rgba(255,255,255,.68);
  margin-top: 4px;
  font-size: 14px;
  line-height:1.55;
  max-width: 760px;
}
@media (max-width: 980px){
  .systemv2__grid{ grid-template-columns: 1fr; }
  .systemv2__bentos{ grid-template-columns: 1fr; }
  .systemv2__strip{ grid-template-columns: 1fr; }
  .systemv2__cta{ flex-direction: column; align-items:flex-start; }
}


/* Blog safety spacing */
#blog{ position:relative; z-index:0; padding-top: 72px; padding-bottom: 72px; }


/* Ensure CTA hero glow spans full width */
.cta-hero{ background:#000 !important; }
.cta-hero__bg{ inset:0 !important; }


/* Outcomes section polish */
.abi-outcomes-pro{ padding-top: 86px; padding-bottom: 86px; }
.abi-out-head{ text-align:center; margin-bottom: 28px; position:relative; }
.abi-out-head::before{ content:""; position:absolute; left:50%; top:-70px; width: 900px; height: 260px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(173,58,220,.22), transparent 70%); pointer-events:none; }
.abi-out-grid{ gap: 22px; }
.abi-out-card{ border-radius: 24px; }
.abi-out-card:hover{ transform: translateY(-2px); border-color: rgba(69,209,213,.75); box-shadow: 0 30px 95px rgba(0,0,0,.66), 0 0 0 1px rgba(69,209,213,.16) inset, 0 0 70px rgba(69,209,213,.22); }


/* OUTCOMES CTA glossy purple */
.abi-out-cta .btn--primary{
  background: rgba(255,255,255,.92);
  color: #2b0b3b;
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 16px 46px rgba(0,0,0,.35);
}
.abi-out-cta .btn--primary:hover{
  background: #fff;
  transform: translateY(-1px);
}
.abi-out-cta .btn--ghost{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.28);
}
.abi-out-cta .btn--ghost:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* Intro stats teal */
.intro-hero__left .stat-card__value{ color:#45D1D5; }


.ai-marquee.is-ready .ai-marquee__track{ animation-play-state: running; }



/* =========================================================
V24 Tweaks: Teal footer CTA, seamless white marquee, teal glow on intro image,
and outcomes CTA black with purple glow line.
========================================================= */

/* Footer CTA teal (#45D1D5) only inside the CTA panel */
.aifooter__cta{
  --f-purple: #AD3ADC;
  --f-purple2: #D26AF0;
}
.aifooter__cta .cta__accent{
  color: #45D1D5 !important;
  text-shadow: 0 18px 60px rgba(69, 209, 213, .35) !important;
}
.aifooter__cta .cta__underline{
  background: linear-gradient(90deg, transparent, #45D1D5, transparent) !important;
  filter: drop-shadow(0 12px 24px rgba(69, 209, 213, .35)) !important;
}
.aifooter__cta .aibtn--primary{
  background: linear-gradient(90deg, #45D1D5, #45D1D5) !important;
  box-shadow: 0 22px 70px rgba(69, 209, 213, .35) !important;
}
.aifooter__cta .aibtn--primary:hover{
  box-shadow: 0 28px 90px rgba(69, 209, 213, .42) !important;
}

/* Make the AI logos marquee background match the white section below (seamless block) */
.ai-marquee{
  background: #ffffff !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}
.intro-hero{
  margin-top: 0 !important;
  border-top: 0 !important;
}
.intro-hero__container{
  padding-top: clamp(28px, 4vw, 56px) !important; /* keep breathing room but no seam */
}

/* Teal glow (#45D1D5) on the left image area; keep purple glow on right copy */
.intro-hero .device-card{
  position: relative;
  isolation: isolate;
}
.intro-hero .device-card::before{
  content:"";
  position:absolute;
  inset:-24px;
  z-index:-1;
  background:
    radial-gradient(520px 320px at 45% 45%, rgba(69, 209, 213, .38), transparent 62%),
    radial-gradient(820px 520px at 10% 80%, rgba(69, 209, 213, .18), transparent 70%);
  filter: blur(2px);
  pointer-events:none;
}

/* Outcomes mini-CTA: switch to black with a purple glow line */
.abi-out-cta{
  position: relative;
  background: #000000 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.55) !important;
  overflow: hidden;
}
.abi-out-cta::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #AD3ADC, transparent);
  box-shadow: 0 0 28px rgba(173,58,220,.55);
}
.abi-out-cta__title{ color: rgba(255,255,255,.92) !important; }
.abi-out-cta__sub{ color: rgba(255,255,255,.70) !important; }



/* =========================================================
PATCH v27 — Demo CTA panel white + Outcomes cards dark teal
========================================================= */

/* Footer CTA (Get Free 7 Day Demo...) — make panel pure white (no purple glow) */
.aifooter__cta{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.18) !important;
}
.aifooter__cta .cta__title{ color:#0b0b12 !important; }
.aifooter__cta .cta__sub{ color: rgba(11,11,18,.72) !important; }
.aifooter__cta .cta__underline{
  background: linear-gradient(90deg, transparent, #45D1D5, transparent) !important;
  filter: drop-shadow(0 10px 22px rgba(69,209,213,.25)) !important;
}
.aifooter__cta .cta__accent{
  /* glossy teal text */
  color: transparent !important;
  background: linear-gradient(180deg, #7ff3f3 0%, #45D1D5 55%, #1aa7aa 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  text-shadow: 0 16px 60px rgba(69,209,213,.25) !important;
}
.aifooter__cta .aibtn--primary{
  background: #45D1D5 !important;
  color:#071215 !important;
  box-shadow: 0 18px 60px rgba(69,209,213,.30) !important;
}
.aifooter__cta .aibtn--primary:hover{
  box-shadow: 0 26px 90px rgba(69,209,213,.38) !important;
}

/* Outcomes cards — black cards with teal glow line */
.abi-outcomes-v2 .abi-out-card{
  background:#07070b !important;
  border: 1px solid rgba(69,209,213,.55) !important;
  box-shadow:
    0 0 0 1px rgba(69,209,213,.18),
    0 24px 90px rgba(0,0,0,.70),
    0 0 26px rgba(69,209,213,.18) !important;
}
.abi-outcomes-v2 .abi-out-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 6px;
  background: linear-gradient(90deg, rgba(69,209,213,0), rgba(69,209,213,.95), rgba(69,209,213,0));
  opacity: .9;
}
.abi-outcomes-v2 .abi-out-card::after{
  content:"";
  position:absolute;
  width: 220px; height: 220px;
  right: -110px; top: -110px;
  background: radial-gradient(circle at 30% 30%, rgba(69,209,213,.22), transparent 62%);
  pointer-events:none;
}
.abi-outcomes-v2 .abi-out-card:hover{ transform: translateY(-2px); border-color: rgba(69,209,213,.75); box-shadow: 0 30px 95px rgba(0,0,0,.66), 0 0 0 1px rgba(69,209,213,.16) inset, 0 0 70px rgba(69,209,213,.22); }

/* Outcomes typography for dark cards */
.abi-outcomes-v2 .abi-out-ico{
  background: linear-gradient(180deg, rgba(69,209,213,.16), rgba(69,209,213,.06)) !important;
  border: 1px solid rgba(69,209,213,.30) !important;
  box-shadow: 0 14px 40px rgba(69,209,213,.14) !important;
}
.abi-outcomes-v2 .abi-out-kpi__num{
  color: transparent !important;
  background: linear-gradient(90deg, #ffffff, #45D1D5) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
/* Make the slash in 24/7 match the same gradient color (no dimming) */
.abi-outcomes-v2 .abi-out-kpi__slash{ opacity: 1 !important; }
.abi-outcomes-v2 .abi-out-kpi__x{ opacity: 1 !important; }
.abi-outcomes-v2 .abi-out-kpi__unit,
.abi-outcomes-v2 .abi-out-title small,
.abi-outcomes-v2 .abi-out-meta{
  color: rgba(255,255,255,.72) !important;
}
.abi-outcomes-v2 .abi-out-label{
  color: rgba(255,255,255,.86) !important;
}
.abi-outcomes-v2 .abi-out-desc{
  color: rgba(255,255,255,.70) !important;
}


/* =========================================================
HERO: Right-side Flow Showcase (InOneCRM)
========================================================= */
.heroFlow{
  border-radius: 22px;
  background: radial-gradient(900px 520px at 20% 20%, rgba(69,209,213,.16), transparent 55%),
              radial-gradient(900px 520px at 85% 30%, rgba(173,58,220,.22), transparent 55%),
              rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 34px 110px rgba(0,0,0,.60);
  overflow: hidden;
  min-height: 360px;
}
.heroFlow__top{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.heroFlow__dots{
  display:flex; gap:8px; align-items:center;
}
.heroFlow__dots span{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.22);
}
.heroFlow__dots span:nth-child(1){ background:#ff5f56; }
.heroFlow__dots span:nth-child(2){ background:#ffbd2e; }
.heroFlow__dots span:nth-child(3){ background:#27c93f; }
.heroFlow__title{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  letter-spacing: -0.02em;
}
.heroFlow__body{
  padding: 16px;
  display:grid;
  gap: 14px;
}
.heroFlow__steps{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.heroStep{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 850;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.heroStep__dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(69,209,213,.85);
  box-shadow: 0 0 26px rgba(69,209,213,.40);
}
.heroStep--muted .heroStep__dot{ background: rgba(255,255,255,.22); box-shadow:none; }
.heroFlow__lane{
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.heroFlow__lane::before{
  content:"";
  position:absolute;
  inset:-30px;
  background: radial-gradient(10px 10px at 10% 50%, rgba(69,209,213,.95), transparent 55%),
              radial-gradient(10px 10px at 40% 50%, rgba(69,209,213,.95), transparent 55%),
              radial-gradient(10px 10px at 70% 50%, rgba(69,209,213,.95), transparent 55%),
              radial-gradient(10px 10px at 90% 50%, rgba(69,209,213,.95), transparent 55%);
  opacity:.35;
  filter: blur(0.2px);
}
.heroFlow__runner{
  position:absolute;
  top:0; left:-18%;
  width: 18%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(69,209,213,.90), transparent);
  filter: blur(0.2px);
  animation: heroRunner 2.2s linear infinite;
}
@keyframes heroRunner{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(750%); }
}
.heroFlow__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.heroMini{
  border-radius: 16px;
  padding: 14px 14px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.10);
}
.heroMini__kpi{
  display:flex; justify-content: space-between; align-items: baseline;
  gap:10px;
}
.heroMini__label{
  color: rgba(255,255,255,.75);
  font-weight: 850;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.heroMini__val{
  color:#fff;
  font-weight: 1000;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.heroMini__note{
  margin-top:8px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
  line-height: 1.35;
}
@media (max-width: 920px){
  .heroFlow{ min-height: 320px; }
}



/* =========================================================
OVERRIDES v29 — polish + glass cards + hero cards showcase
========================================================= */

/* Kill the moving glare on primary buttons (looked broken) */
.btn--primary::after{ display:none !important; content:none !important; }

/* Glass panel helper */
.panel--glass{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Outcomes (glass black + teal outline) — fix broken selectors */
.abi-out-card{
  border-radius: 18px;
  background: rgba(10,10,14,.78);
  border: 1px solid rgba(69,209,213,.30);
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(69,209,213,.10) inset,
    0 0 40px rgba(69,209,213,.10);
  padding: 20px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.abi-out-card--featured{ background: rgba(10,10,14,.78) !important; }

/* remove any seam between system map + outcomes */
.section--systemv2{ margin-bottom:0 !important; padding-bottom: clamp(70px, 7vw, 96px) !important; }
.abi-outcomes-v2{ margin-top: -1px; }

/* AI marquee + white band seamless join */
.ai-marquee{
  padding: 18px 0 18px !important;
  margin-bottom: -1px;
  box-shadow:none !important;
}
.ai-marquee__wrap{ padding: 0 24px 0; }
.intro-hero{ margin-top: 0 !important; }

/* Hero right showcase: automation cards */
.heroCards{
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 30px 100px rgba(0,0,0,.65),
    0 0 0 1px rgba(173,58,220,.10) inset;
  overflow:hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.heroCards__top{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.heroCards__dots{ display:inline-flex; gap:6px; }
.heroCards__dots i{
  width:8px; height:8px; border-radius:50%;
  background: rgba(255,255,255,.26);
}
.heroCards__title{ flex:1; font-weight:900; font-size: 12.5px; color: rgba(255,255,255,.86); }
.heroCards__badge{
  font-weight:900; font-size: 11px;
  color:#001216;
  background: rgba(69,209,213,.95);
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(69,209,213,.25);
}
.heroCards__stack{ padding: 14px; display:grid; gap: 10px; }
.heroCard{
  display:flex; align-items:center; gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}
.heroCard__icon{
  width: 36px; height: 36px; border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(69,209,213,.10);
  border: 1px solid rgba(69,209,213,.25);
}
.heroCard__name{ font-weight: 900; color: rgba(255,255,255,.92); font-size: 13px; }
.heroCard__sub{ color: rgba(255,255,255,.60); font-weight: 650; font-size: 12px; margin-top: 2px; }
.heroCard__status{
  margin-left:auto;
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(69,209,213,.95);
  box-shadow: 0 0 0 4px rgba(69,209,213,.18);
}
@media (max-width: 980px){
  .heroCards{ max-width: 560px; margin: 0 auto; }
}

/* Make the "What changes..." section cards feel like glass too */
.abi-out-card{
  background: rgba(0,0,0,.42) !important;
}

.ai-marquee__track{ backface-visibility:hidden; -webkit-backface-visibility:hidden; contain: content; }
.social-marquee__track{ backface-visibility:hidden; -webkit-backface-visibility:hidden; contain: content; }


/* Remove any seam between System and Outcomes */
.section--systemv2{ border-bottom: 0 !important; box-shadow: none !important; }
.abi-outcomes-v2{ border-top: 0 !important; box-shadow: none !important; margin-top: 0 !important; }

/* Footer CTA panel: black card + teal glow */
.aifooter__cta{
  background: rgba(0,0,0,.72) !important;
  border: 1px solid rgba(69,209,213,.50) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.58), 0 0 0 1px rgba(69,209,213,.12) inset, 0 0 70px rgba(69,209,213,.22) !important;
}
.aifooter__cta .cta__accent{
  color: #45D1D5 !important;
  text-shadow: 0 18px 60px rgba(69,209,213,.28) !important;
}
.aifooter__cta .cta__underline{
  background: linear-gradient(90deg, transparent, #45D1D5, transparent) !important;
  filter: drop-shadow(0 12px 24px rgba(69,209,213,.35)) !important;
}
.aifooter__cta .aibtn--primary{
  background: #45D1D5 !important;
  color: #001012 !important;
  box-shadow: 0 22px 70px rgba(69,209,213,.35) !important;
}
.aifooter__cta .aibtn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 28px 90px rgba(69,209,213,.42) !important;
}

/* AI marquee smoothing */
.ai-marquee__track{ backface-visibility: hidden; }
.ai-marquee__track img{ height: 28px; width: 160px; object-fit: contain; flex: 0 0 auto; opacity: .95; filter: none; }
@media (max-width:640px){
  .ai-marquee__track img{ height: 28px; width: 160px; object-fit: contain; flex: 0 0 auto; opacity: .95; filter: none; }
}

/* Hero right: bento automation tiles */
.heroCards--bento .heroCards__stack{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
}
.heroCards--bento .heroCard{
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.40);
}
.heroCards--bento .heroCard--wide{ grid-column: 1 / -1; }
.heroCards--bento .heroCard__sub{ color: rgba(255,255,255,.65); }
.heroCards--bento .heroCard__status{ background: #45D1D5; box-shadow: 0 0 0 4px rgba(69,209,213,.15), 0 0 20px rgba(69,209,213,.35); }


/* Kill button pseudo-glare everywhere */
.btn::before,.btn::after,.btnx::before,.btnx::after,.aibtn::before,.aibtn::after{display:none !important; content:none !important;}


/* =========================================================
PATCH v33 — Demo CTA text forced white (card stays black + teal glow)
========================================================= */
.aifooter__cta{
  background:#000000 !important;
}
.aifooter__cta .cta__title,
.aifooter__cta .cta__sub{
  color:#ffffff !important;
}
.aifooter__cta .cta__sub{ opacity:.92 !important; }



/* === Marquee logo normalization (uniform sizes) === */
@media (max-width: 640px){
  .ai-marquee__track img{ height: 22px; width: 130px; }
  .social-marquee__track img{ height: 24px; width: 140px; }
}



/* =========================================================
   OVERRIDES: Seamless marquees + consistent logo sizing
   ========================================================= */

.logo-strip{
  background:#fff;
  padding:18px 0 0;
}
.logo-strip__marquee{
  background:#fff;
  border:0 !important;
  box-shadow:none !important;
}
.ai-marquee__track,
.social-marquee__track{
  display:flex;
  align-items:center;
  gap:56px;
  width:max-content;
  will-change:transform;
  animation: marquee-left 18s linear infinite;
  transform:translateZ(0);
}
.social-marquee__track{
  animation-duration:20s;
}
@keyframes marquee-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ai-marquee__track img,
.social-marquee__track img{
  height:36px;
  width:auto;
  max-width:170px;
  object-fit:contain;
  flex:0 0 auto;
  image-rendering:auto;
}
@media (max-width: 768px){
  .ai-marquee__track img,
  .social-marquee__track img{
    height:28px;
    max-width:140px;
  }
  .ai-marquee__track,
  .social-marquee__track{ gap:38px; }
}
@media (prefers-reduced-motion: reduce){
  .ai-marquee__track,
  .social-marquee__track{ animation:none; transform:none; }
}


/* AI logo sizing adjustments */
.ai-marquee__track img{height:60px;width:200px;object-fit:contain;}
.ai-logo-gemini img,
.ai-logo-perplexity img,
.ai-logo-meta img,
.ai-logo-chatgpt img{transform:scale(1.2);}

.ai-logo-openai img,
.ai-logo-grok img{transform:scale(0.9);}

/* === FIXED SPINNERS === */

/* AI spinner slower */
.ai-marquee__track{
  animation: aiMarquee 20s linear infinite !important;
}
.ai-marquee__track img{
  height:60px !important;
  width:200px !important;
}

/* Social spinner left -> right and same speed */
.social-marquee{
  background:#ffffff !important;
}
.social-marquee__track{
  animation: socialMarquee var(--social-marquee-duration, 20s) linear infinite !important;
}

/* Ensure direction left -> right */
@keyframes socialMarquee{
  from{ transform: translate3d(calc(-1 * var(--social-marquee-distance, 50%)),0,0);}
  to{ transform: translate3d(0,0,0);}
}