/* =========================================================
   SKYTHINKS — Intelligence in Motion
   ========================================================= */

@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root{
  --blue:#4285F4; --green:#34A853; --yellow:#FBBC05; --red:#EA4335;
  --navy:#07111F; --dark:#0B1220; --white:#fff; --soft:#F8FAFC;
  --text:#172033; --muted:#667085; --line:#E6ECF4;

  --ink-inv:#E7EEF9; --muted-inv:#93A4BD; --line-inv:rgba(255,255,255,.10);

  --radius:20px; --radius-sm:14px; --radius-lg:28px;
  --wrap:1240px;
  --shadow-sm:0 2px 8px rgba(12,26,48,.05), 0 12px 28px -18px rgba(12,26,48,.18);
  --shadow:0 10px 30px -14px rgba(12,26,48,.22), 0 40px 80px -50px rgba(12,26,48,.4);
  --shadow-lg:0 30px 70px -30px rgba(9,20,40,.35), 0 90px 140px -70px rgba(9,20,40,.5);
  --grad:linear-gradient(100deg,var(--blue),var(--green) 33%,var(--yellow) 62%,var(--red) 86%,var(--blue));
  --ease:cubic-bezier(.22,.75,.28,1);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Sora','Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; font-family:var(--font); color:var(--text); background:var(--white);
  font-size:16px; line-height:1.6; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3{font-family:var(--display); letter-spacing:-.03em; line-height:1.08; margin:0; font-weight:700}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto}
.skip{position:absolute; left:-9999px; top:0; background:var(--blue); color:#fff; padding:10px 16px; z-index:999; border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px}

/* ---------- gradient text ---------- */
.grad-text{
  background:linear-gradient(92deg,var(--blue),var(--green) 28%,var(--yellow) 55%,var(--red) 78%,var(--blue));
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 9s linear infinite;
}
@keyframes gradShift{to{background-position:280% 0}}
.spark{display:inline-block; color:var(--yellow); animation:sparkle 3.4s ease-in-out infinite}
@keyframes sparkle{0%,100%{opacity:.7; transform:scale(1) rotate(0)}50%{opacity:1; transform:scale(1.18) rotate(18deg)}}

/* =========================================================
   ANIMATED GRADIENT BORDER SYSTEM
   ========================================================= */
.gb{position:relative; isolation:isolate; border-radius:var(--radius)}
.gb::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
  background:
    conic-gradient(from var(--ang),
      rgba(66,133,244,.85) 0deg, rgba(52,168,83,.85) 90deg,
      rgba(251,188,5,.85) 180deg, rgba(234,67,53,.85) 270deg, rgba(66,133,244,.85) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:angspin 9s linear infinite;
  opacity:.7; z-index:2; pointer-events:none;
}
.gb-slow::before{animation-duration:16s}
.gb-fast::before{animation-duration:5.5s}
.gb:hover::before{opacity:1; animation-duration:4s}
@keyframes angspin{to{--ang:360deg}}

/* gradient-pair variants for product cards */
.g-bg::before{background:conic-gradient(from var(--ang), var(--blue), var(--green), var(--blue))}
.g-gy::before{background:conic-gradient(from var(--ang), var(--green), var(--yellow), var(--green))}
.g-yr::before{background:conic-gradient(from var(--ang), var(--yellow), var(--red), var(--yellow))}
.g-rb::before{background:conic-gradient(from var(--ang), var(--red), var(--blue), var(--red))}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border-radius:999px; font-weight:600; font-size:15px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn-sm{padding:10px 18px; font-size:14px}
.btn-lg{padding:17px 32px; font-size:16px}
.btn span{transition:transform .25s var(--ease)}
.btn:hover span{transform:translateX(3px)}

.btn-primary{
  color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(100deg,var(--blue),#2f6fe0 40%,var(--green) 120%);
  box-shadow:0 8px 22px -10px rgba(66,133,244,.75), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,var(--blue),var(--green) 35%,var(--yellow) 65%,var(--red));
  background-size:220% 100%; opacity:0; transition:opacity .3s; animation:gradShift 6s linear infinite;
}
.btn-primary:hover::before{opacity:1}
.btn-primary>*{position:relative; z-index:1}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(66,133,244,.7)}

.btn-secondary{background:#fff; color:var(--text); border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.btn-secondary:hover{transform:translateY(-2px); border-color:#c9d7ea; box-shadow:var(--shadow)}
.btn-ghost{padding:10px 14px; color:var(--muted)}
.btn-ghost:hover{color:var(--text)}
.btn-outline{border:1px solid rgba(255,255,255,.24); color:#fff; background:rgba(255,255,255,.05); backdrop-filter:blur(8px)}
.btn-outline:hover{background:rgba(255,255,255,.12); transform:translateY(-2px)}
.btn.full{width:100%}

.link-arrow{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14.5px; color:var(--blue)}
.link-arrow span{transition:transform .25s var(--ease)}
.link-arrow:hover span{transform:translateX(4px)}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s, box-shadow .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(255,255,255,.78); backdrop-filter:blur(18px) saturate(1.6); border-bottom-color:var(--line); box-shadow:0 8px 30px -22px rgba(12,26,48,.4)}
.nav-in{display:flex; align-items:center; gap:28px; height:72px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.03em}
.brand-mark{display:grid; place-items:center; filter:drop-shadow(0 3px 10px rgba(66,133,244,.35)); animation:markFloat 7s ease-in-out infinite}
@keyframes markFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(8deg)}}
.brand-grad{background:var(--grad); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradShift 8s linear infinite}

.nav-links{display:flex; align-items:center; gap:4px; margin-left:10px}
.nav-link{
  display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:10px;
  font-size:15px; font-weight:500; color:#3c4a60; transition:color .2s, background .2s;
}
.nav-link:hover{color:var(--text); background:rgba(66,133,244,.07)}
.nav-link[aria-expanded="true"]{color:var(--blue); background:rgba(66,133,244,.09)}
.chev{transition:transform .25s var(--ease)}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:8px}

/* mega */
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:rgba(255,255,255,.96); backdrop-filter:blur(20px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(12,26,48,.35);
  animation:megaIn .28s var(--ease);
}
@keyframes megaIn{from{opacity:0; transform:translateY(-8px)}}
.mega-in{display:grid; grid-template-columns:1fr 1fr .9fr; gap:34px; padding:28px 0 34px}
.mega-h{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.mega-item{display:flex; gap:12px; padding:10px 12px; border-radius:12px; transition:background .2s, transform .2s}
.mega-item:hover{background:var(--soft); transform:translateX(3px)}
.mega-item b{display:block; font-size:14.5px; font-weight:600}
.mega-item i{display:block; font-style:normal; font-size:13px; color:var(--muted); line-height:1.45}
.mi-ic{
  flex:0 0 34px; height:34px; border-radius:10px; display:grid; place-items:center;
  font-size:11px; font-weight:700; letter-spacing:.02em;
}
.mi-blue{background:rgba(66,133,244,.12); color:var(--blue)}
.mi-green{background:rgba(52,168,83,.12); color:var(--green)}
.mi-yellow{background:rgba(251,188,5,.16); color:#b98a00}
.mi-red{background:rgba(234,67,53,.12); color:var(--red)}
.mega-feature{background:var(--soft); padding:22px; border-radius:var(--radius)}
.mega-copy{font-size:14px; color:var(--muted); margin:8px 0 14px}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); background:rgba(66,133,244,.1); padding:5px 10px; border-radius:999px; margin-bottom:12px}

.burger{display:none; width:40px; height:40px; border-radius:10px; padding:10px; flex-direction:column; justify-content:space-between}
.burger span{display:block; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.mobile-menu{position:fixed; inset:72px 0 0 0; z-index:99; background:rgba(255,255,255,.98); backdrop-filter:blur(20px); overflow:auto; animation:megaIn .25s var(--ease)}
.mm-in{display:flex; flex-direction:column; gap:4px; padding:22px 0 40px}
.mm-in a{padding:15px 6px; font-size:17px; font-weight:600; border-bottom:1px solid var(--line)}
.mm-in .btn{margin-top:18px; border-bottom:0}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:850px; padding:158px 0 104px; overflow:hidden;
  background:
    radial-gradient(1200px 620px at 78% 6%, rgba(66,133,244,.10), transparent 62%),
    radial-gradient(900px 560px at 6% 24%, rgba(52,168,83,.09), transparent 60%),
    linear-gradient(180deg,#fbfcfe 0%, #f6f9fd 46%, #fff 100%);
}
.hero-grid-bg{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(23,32,51,.10) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(1000px 700px at 50% 34%, #000 10%, transparent 78%);
  mask-image:radial-gradient(1000px 700px at 50% 34%, #000 10%, transparent 78%);
  opacity:.55; pointer-events:none;
}
.hero-orbs{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.42; will-change:transform}
.orb-b{width:520px; height:520px; background:rgba(66,133,244,.42); top:-140px; left:52%; animation:drift1 22s ease-in-out infinite}
.orb-g{width:440px; height:440px; background:rgba(52,168,83,.34); top:180px; left:-120px; animation:drift2 26s ease-in-out infinite}
.orb-y{width:380px; height:380px; background:rgba(251,188,5,.30); bottom:-90px; left:34%; animation:drift3 24s ease-in-out infinite}
.orb-r{width:420px; height:420px; background:rgba(234,67,53,.22); bottom:20px; right:-130px; animation:drift1 28s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-50px,44px,0) scale(1.1)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(60px,-40px,0) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-40px,-30px,0) scale(1.12)}}

.neural{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.85}
.flowlines{position:absolute; inset:0; pointer-events:none; opacity:.9}
.flowlines svg{width:100%; height:100%}
.fline{stroke-dasharray:14 22; animation:dash 26s linear infinite}
.fline-2{animation-duration:34s; animation-direction:reverse}
@keyframes dash{to{stroke-dashoffset:-720}}

.hero-in{position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:46px; align-items:center}

.badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#2a3a55;
  background:rgba(255,255,255,.78); border:1px solid var(--line); backdrop-filter:blur(10px);
  box-shadow:0 4px 18px -10px rgba(12,26,48,.4);
}
.badge-dark{background:rgba(255,255,255,.06); border-color:var(--line-inv); color:#cfe0f7}

.hero-title{font-size:clamp(40px,4.55vw,64px); margin:22px 0 22px; font-weight:800}
.hero-title span{display:block}
.hero-lead{font-size:clamp(16.5px,1.32vw,19px); color:#3d4a60; max-width:44ch; line-height:1.62}
.hero-sub{font-size:15.5px; color:var(--muted); margin-top:12px; max-width:44ch}
.hero-btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hero-note{font-size:13.5px; color:var(--muted); margin-top:18px}
.hero-note.dark{color:var(--muted-inv); margin-top:22px}

/* cinematic entrance */
.seq{opacity:0; transform:translateY(26px); filter:blur(6px)}
.js-on .seq{transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease)}
.js-on .seq.in{opacity:1; transform:none; filter:none}

/* ---------- hero visual ---------- */
.hero-visual{position:relative; min-height:560px}
.dash{
  position:relative; padding:18px; border-radius:var(--radius-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(248,251,255,.86));
  backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:var(--shadow-lg);
  transform-style:preserve-3d;
}
.js-on .dash.seq{transform:translateY(26px) scale(.94)}
.js-on .dash.seq.in{transform:none}
.dash-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.dash-brand{display:flex; align-items:center; gap:11px}
.dash-logo{
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:#fff; font-size:15px;
  background:linear-gradient(135deg,var(--blue),var(--green)); box-shadow:0 6px 16px -8px rgba(66,133,244,.9);
}
.dash-brand b{display:block; font-size:12.5px; letter-spacing:.12em; font-family:var(--display)}
.dash-brand i{display:block; font-style:normal; font-size:12.5px; color:var(--muted)}
.dash-dots{display:flex; gap:6px}
.dash-dots span{width:8px; height:8px; border-radius:50%; background:#dde5f0}
.dash-dots span:nth-child(1){background:rgba(234,67,53,.5)}
.dash-dots span:nth-child(2){background:rgba(251,188,5,.55)}
.dash-dots span:nth-child(3){background:rgba(52,168,83,.5)}

.dash-metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.metric{
  padding:13px 13px 12px; border-radius:15px; background:rgba(255,255,255,.72);
  border:1px solid rgba(226,234,245,.9); box-shadow:0 2px 10px -6px rgba(12,26,48,.25);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.metric:hover{transform:translateY(-3px); box-shadow:0 12px 26px -16px rgba(12,26,48,.5)}
.m-label{display:block; font-size:11.5px; color:var(--muted); font-weight:500}
.m-value{display:block; font-family:var(--display); font-weight:700; font-size:clamp(17px,1.5vw,21px); margin:3px 0 2px; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.m-delta{font-size:11.5px; font-weight:600}
.m-delta.up{color:var(--green)} .m-delta.down{color:var(--red)} .m-delta.neutral{color:var(--muted)}
.metric.flip{animation:flipIn .5s var(--ease)}
@keyframes flipIn{from{opacity:0; transform:translateY(10px) scale(.97)}}

.dash-chart{margin-top:10px; padding:12px 13px 9px; border-radius:16px; background:rgba(255,255,255,.66); border:1px solid rgba(226,234,245,.9)}
.dc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.dc-head b{font-size:13px; font-family:var(--display)}
.legend{font-size:11px; color:var(--muted); display:inline-flex; align-items:center; gap:6px}
.lg{width:14px; height:3px; border-radius:2px; display:inline-block}
.lg-b{background:linear-gradient(90deg,var(--blue),var(--green))}
.lg-m{background:#c3cede}
.area{width:100%; height:98px}
.area-line{stroke-dasharray:1200; stroke-dashoffset:1200; animation:draw 1.9s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.area-fill{opacity:0; animation:fadeIn 1.4s .5s var(--ease) forwards}
@keyframes fadeIn{to{opacity:1}}
.bars{display:grid; grid-template-columns:repeat(12,1fr); gap:5px; align-items:end; height:38px; margin-top:8px}
.bars i{
  display:block; border-radius:4px 4px 2px 2px; height:var(--h); background:linear-gradient(180deg,var(--c,#cfe0fb),rgba(207,224,251,.35));
  transform-origin:bottom; animation:growBar .8s var(--ease) backwards;
}
@keyframes growBar{from{transform:scaleY(.05); opacity:0}}

.dash-rows{margin-top:10px; display:grid; gap:6px}
.drow{
  display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px;
  background:rgba(255,255,255,.62); border:1px solid rgba(226,234,245,.9); font-size:12.8px;
  animation:flipIn .45s var(--ease) backwards;
}
.drow .dr-dot{width:7px; height:7px; border-radius:50%; flex:0 0 auto}
.drow .dr-name{font-weight:600}
.drow .dr-val{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums}
.drow .dr-tag{font-size:11px; padding:3px 8px; border-radius:999px; background:rgba(66,133,244,.1); color:var(--blue); font-weight:600}

/* AI panel */
.ai-panel{
  position:absolute; right:-52px; bottom:110px; width:270px; padding:16px; border-radius:20px;
  background:linear-gradient(160deg,rgba(11,18,32,.94),rgba(7,17,31,.9)); color:var(--ink-inv);
  backdrop-filter:blur(18px); box-shadow:0 30px 60px -28px rgba(7,17,31,.85);
  animation:floatY 7s ease-in-out infinite 1.6s;
}
.js-on .ai-panel.seq{transform:translateX(34px) translateY(10px)}
.js-on .ai-panel.seq.in{transform:none}
.ai-head{display:flex; align-items:center; gap:8px; font-size:13px; font-family:var(--display)}
.ai-ic{width:24px; height:24px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--green)); font-size:12px; color:#fff}
.live{width:7px; height:7px; border-radius:50%; background:var(--green); margin-left:auto; box-shadow:0 0 0 0 rgba(52,168,83,.6); animation:ping 2.2s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(52,168,83,0)}100%{box-shadow:0 0 0 0 rgba(52,168,83,0)}}
.ai-msg{font-size:13.2px; color:#cfdcee; margin:11px 0 12px; line-height:1.55}
.ai-msg b{color:#fff}
.ai-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:12px}
.ai-stats span{display:flex; flex-direction:column; gap:2px; padding:9px 8px; border-radius:11px; background:rgba(255,255,255,.06); font-size:10.5px; color:var(--muted-inv); line-height:1.25}
.ai-stats b{font-size:14px; color:#fff; font-family:var(--display)}
.typing{display:flex; gap:4px; margin-bottom:12px}
.typing i{width:6px; height:6px; border-radius:50%; background:#54708f}
.typing i{background:#54708f; animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,100%{opacity:.28; transform:translateY(0)}50%{opacity:1; transform:translateY(-3px)}}
.ai-panel .link-arrow{color:#8ab4f8}

/* mini cards */
.mini{
  position:absolute; width:230px; padding:14px; border-radius:18px; color:var(--ink-inv);
  background:linear-gradient(160deg,rgba(11,18,32,.93),rgba(9,20,36,.88)); backdrop-filter:blur(16px);
  box-shadow:0 26px 54px -26px rgba(7,17,31,.8);
}
.mini-gym{left:-152px; bottom:14px; width:216px; animation:floatY 8s ease-in-out infinite}
.mini-crm{right:-46px; top:-72px; width:206px; animation:floatY 9s ease-in-out infinite .8s}
.js-on .mini-gym.seq{transform:translateX(-40px)}
.js-on .mini-crm.seq{transform:translateX(40px)}
.js-on .mini.seq.in{transform:none}
@keyframes floatY{0%,100%{translate:0 0}50%{translate:0 -12px}}
.mini-head{display:flex; align-items:center; gap:8px; font-size:10.5px; letter-spacing:.1em; font-family:var(--display); color:#b9cbe4}
.mini-ic{width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:11px}
.ic-green{background:rgba(52,168,83,.18); color:#68d391}
.ic-blue{background:rgba(66,133,244,.2); color:#8ab4f8}
.mini-hero{margin:10px 0 8px; border-radius:11px; overflow:hidden}
.ring86{stroke-dasharray:108 126; animation:ringIn 1.6s var(--ease) 1s backwards}
@keyframes ringIn{from{stroke-dasharray:0 126}}
.mini-rows{display:grid; gap:6px}
.mini-rows span{display:flex; align-items:baseline; gap:6px; font-size:11px; color:var(--muted-inv)}
.mini-rows b{font-size:15px; color:#fff; font-family:var(--display)}
.mini-rows em{font-style:normal; margin-left:auto; font-size:10.5px}
.up{color:#5fce85} .down{color:#f38b81}
.mini-crm{padding:12px}
.mini-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:9px 0 8px}
.mini-grid span{display:flex; flex-direction:column; padding:7px 8px; border-radius:10px; background:rgba(255,255,255,.06); font-size:10px; color:var(--muted-inv)}
.mini-grid b{font-size:14px; color:#fff; font-family:var(--display)}
.mini-bar{height:5px; border-radius:4px; background:rgba(255,255,255,.09); overflow:hidden}
.mini-bar i{display:block; height:100%; width:var(--w); border-radius:4px; background:linear-gradient(90deg,var(--blue),var(--green)); animation:barIn 1.5s var(--ease) 1.1s backwards}
@keyframes barIn{from{width:0}}

/* floating notifications */
.floats{position:absolute; inset:-24px -30px 90px 10px; pointer-events:none}
.float{
  position:absolute; width:200px; padding:11px 13px; border-radius:14px; font-size:11.5px; line-height:1.4;
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 40px -22px rgba(12,26,48,.55);
  opacity:0; animation:floatCard 18s var(--ease) infinite;
}
.float b{display:block; font-size:11.8px; margin-bottom:2px}
.float span{color:var(--muted)}
.dot{position:absolute; top:13px; right:13px; width:7px; height:7px; border-radius:50%}
.d-blue{background:var(--blue)} .d-green{background:var(--green)} .d-yellow{background:var(--yellow)} .d-red{background:var(--red)}
.f1{top:30%; left:-4%; animation-delay:1.4s}
.f2{top:6%; left:16%; animation-delay:5s}
.f3{bottom:16%; right:-3%; animation-delay:8.6s}
.f4{top:48%; right:-5%; animation-delay:12.2s}
.f5{bottom:6%; left:14%; animation-delay:15.8s}
@keyframes floatCard{
  0%{opacity:0; transform:translateY(14px) scale(.96)}
  3%{opacity:1; transform:translateY(0) scale(1)}
  16%{opacity:1; transform:translateY(-7px) scale(1)}
  20%{opacity:0; transform:translateY(-15px) scale(.98)}
  100%{opacity:0}
}

/* switcher */
.switcher{position:relative; z-index:5; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:74px}
.sw{
  padding:8px 15px; border-radius:999px; font-size:13px; font-weight:600; color:#4a5a72;
  background:rgba(255,255,255,.74); border:1px solid var(--line); backdrop-filter:blur(8px);
  transition:all .25s var(--ease); display:inline-flex; align-items:center; gap:7px;
}
.sw::before{content:""; width:7px; height:7px; border-radius:50%; border:1.6px solid #b9c6d8; transition:all .25s}
.sw:hover{transform:translateY(-2px); border-color:#c2d3ea}
.sw.is-on{color:#fff; border-color:transparent; background:linear-gradient(100deg,var(--blue),var(--green)); box-shadow:0 8px 20px -10px rgba(66,133,244,.8)}
.sw.is-on::before{background:#fff; border-color:#fff}

.scroll-ind{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12.5px; color:var(--muted);
}
.scroll-ind i{
  font-style:normal; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.8); animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* =========================================================
   SECTION SHELL
   ========================================================= */
section{position:relative}
.sec-head{max-width:760px; margin-bottom:52px}
.problem .sec-head, .bridge .sec-head, .platform .sec-head{max-width:940px}
.sec-head.center{margin-inline:auto; text-align:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--blue); margin-bottom:14px;
}
.eyebrow.center{display:block; text-align:center}
.sec-title{font-size:clamp(30px,3.5vw,49px); font-weight:800; text-wrap:balance}
.sec-lead{margin-top:18px; font-size:clamp(15.5px,1.2vw,18px); color:var(--muted); line-height:1.65}
.dark-sec .sec-lead{color:var(--muted-inv)}
.dark-sec{background:var(--navy); color:var(--ink-inv); overflow:hidden}
.dark-sec .sec-title{color:#fff}
.dark-sec .eyebrow{color:#8ab4f8}
.dark-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 14% 6%, rgba(66,133,244,.20), transparent 62%),
    radial-gradient(680px 400px at 86% 92%, rgba(52,168,83,.16), transparent 60%),
    radial-gradient(520px 320px at 62% 20%, rgba(234,67,53,.10), transparent 62%);
}

.reveal{opacity:0; transform:translateY(28px)}
.js-on .reveal{transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js-on .reveal.in{opacity:1; transform:none}

/* =========================================================
   TRUST
   ========================================================= */
.trust{padding:76px 0 66px; background:linear-gradient(180deg,#fff,var(--soft))}
.trust-h{font-size:clamp(21px,2.1vw,28px); text-align:center; max-width:22ch; margin:0 auto; color:#2a3750; font-weight:700}
.marquee{position:relative; margin:40px 0 34px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex; gap:16px; width:max-content; animation:slide 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.logo-chip{
  display:flex; align-items:center; gap:10px; padding:14px 22px; border-radius:14px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  font-family:var(--display); font-weight:700; font-size:15px; color:#43536e; white-space:nowrap;
}
.logo-chip .lc-mark{width:22px; height:22px; border-radius:7px; opacity:.9}
.trust-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.trust-tags li{padding:8px 16px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:13.5px; color:#4a5a72; font-weight:500}

/* =========================================================
   PROBLEM
   ========================================================= */
.problem{padding:104px 0}
.prob-flow{position:relative; display:grid; grid-template-columns:1fr .5fr 1fr; gap:26px; align-items:center; z-index:2}
.col-label{font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px}
.col-label.bad{color:#f38b81} .col-label.good{color:#6ede97}
.prob-list{display:grid; gap:10px}
.prob-item{
  display:flex; align-items:center; gap:11px; padding:14px 16px; border-radius:14px; font-size:15px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-inv); color:#b9c8dd;
  opacity:0; transform:translateX(-18px); transition:all .6s var(--ease);
}
.prob-item.on{opacity:1; transform:none}
.prob-item .x{width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:11px; background:rgba(234,67,53,.16); color:#f38b81}

.prob-mid{position:relative; display:grid; place-items:center; min-height:220px}
.mid-core{
  position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:20px 18px; border-radius:18px; background:rgba(9,20,36,.92); font-family:var(--display);
  font-size:11.5px; letter-spacing:.12em; color:#fff;
}
.mid-core .spark{font-size:18px}
.mid-rays{position:absolute; inset:-40px; border-radius:50%; background:conic-gradient(from 0deg, rgba(66,133,244,.28), rgba(52,168,83,.28), rgba(251,188,5,.28), rgba(234,67,53,.28), rgba(66,133,244,.28)); filter:blur(30px); animation:angspin 12s linear infinite; opacity:.6}

.join-list{display:flex; flex-wrap:wrap; gap:9px}
.join-list li{
  padding:11px 16px; border-radius:12px; font-size:14px; font-weight:600; color:#dbe7f6;
  background:rgba(255,255,255,.05); border:1px solid var(--line-inv);
  opacity:0; transform:translateY(12px) scale(.96); transition:all .55s var(--ease);
}
.join-list li.on{opacity:1; transform:none}
.join-list li:hover{background:rgba(66,133,244,.14); border-color:rgba(66,133,244,.4)}
.join-list .ai-chip{background:linear-gradient(100deg,rgba(66,133,244,.24),rgba(52,168,83,.24)); border-color:rgba(138,180,248,.4); display:inline-flex; align-items:center; gap:7px}
.join-note{margin-top:16px; font-size:13.5px; color:var(--muted-inv)}

/* =========================================================
   TRANSFORM
   ========================================================= */
.transform{padding:104px 0; background:linear-gradient(180deg,var(--soft),#fff)}
.tf-grid{display:grid; grid-template-columns:1fr .62fr 1fr; gap:28px; align-items:center}
.tf-label{font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.tf-rows{display:grid; gap:8px}
.tf-rows span{display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:13px; background:#fff; border:1px solid var(--line); font-size:14px; color:#41506a; box-shadow:var(--shadow-sm)}
.tf-rows i{width:7px; height:7px; border-radius:50%; background:#c6d3e5; flex:0 0 auto}
.tf-rows span:nth-child(1) i{background:var(--blue)} .tf-rows span:nth-child(2) i{background:var(--green)}
.tf-rows span:nth-child(3) i{background:var(--yellow)} .tf-rows span:nth-child(4) i{background:var(--red)}

.tf-pipe{position:relative; display:grid; place-items:center; padding:10px 0}
.pipe-steps{display:grid; gap:9px; justify-items:center; position:relative; z-index:2}
.pipe-steps li{position:relative}
.pipe-steps li:not(:last-child)::after{content:"↓"; display:block; text-align:center; color:#b6c4d8; font-size:13px; line-height:1.5}
.pipe-steps span{display:inline-block; padding:8px 15px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:12.5px; font-weight:600; color:#41506a; white-space:nowrap}
.pipe-steps .hot{color:#fff; border-color:transparent; background:linear-gradient(100deg,var(--blue),var(--green)); box-shadow:0 8px 20px -12px rgba(66,133,244,.9)}
.pipe-beam{position:absolute; top:0; bottom:0; width:2px; background:linear-gradient(180deg,transparent,var(--blue),var(--green),var(--yellow),var(--red),transparent); opacity:.35; filter:blur(1px)}

.tf-ai{padding:20px; border-radius:var(--radius); background:linear-gradient(160deg,#0B1220,#07111F); color:var(--ink-inv)}
.tf-ai-line{font-size:14.5px; line-height:1.6; color:#cfdcee; margin-bottom:12px; opacity:0; animation:lineIn .7s var(--ease) forwards}
.tf-ai-line .spark{margin-right:7px}
.tf-ai-line b{color:#fff}
.tf-ai-line.delay{animation-delay:.9s}
@keyframes lineIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* =========================================================
   AI CARDS
   ========================================================= */
.platform{padding:104px 0; background:#fff}
.ai-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.ai-card{
  padding:26px 22px 28px; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  position:relative; overflow:hidden;
}
.ai-card:hover{transform:translateY(-6px); box-shadow:0 18px 44px -22px rgba(66,133,244,.5), var(--shadow)}
.ac-ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px; transition:transform .35s var(--ease), box-shadow .35s}
.ai-card:hover .ac-ic{transform:scale(1.08)}
.ic-blue{background:rgba(66,133,244,.11); color:var(--blue); box-shadow:0 0 0 0 rgba(66,133,244,.3)}
.ic-green{background:rgba(52,168,83,.11); color:var(--green)}
.ic-yellow{background:rgba(251,188,5,.15); color:#c08f00}
.ic-red{background:rgba(234,67,53,.11); color:var(--red)}
.ai-card:hover .ic-blue{box-shadow:0 0 24px -4px rgba(66,133,244,.5)}
.ai-card:hover .ic-green{box-shadow:0 0 24px -4px rgba(52,168,83,.5)}
.ai-card:hover .ic-yellow{box-shadow:0 0 24px -4px rgba(251,188,5,.5)}
.ai-card:hover .ic-red{box-shadow:0 0 24px -4px rgba(234,67,53,.5)}
.ai-card h3{font-size:19px; margin-bottom:9px}
.ai-card p{font-size:14.5px; color:var(--muted); line-height:1.6}

/* =========================================================
   FEATURE SECTIONS
   ========================================================= */
.feature{padding:100px 0; background:#fff}
.feature.alt{background:linear-gradient(180deg,var(--soft),#fff)}
.feature-in{display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center}
.feature-in.reverse .feature-copy{order:2}
.feature-copy .sec-lead{margin-bottom:26px}
.feat-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin-bottom:30px}
.feat-list li{display:flex; align-items:center; gap:9px; font-size:14.5px; color:#3d4a60}
.feat-list li::before{content:""; width:16px; height:16px; border-radius:5px; background:rgba(66,133,244,.12); background-image:linear-gradient(135deg,rgba(66,133,244,.2),rgba(52,168,83,.2)); flex:0 0 auto}
.feature-visual{position:relative; display:grid; gap:18px}
.photo-panel{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/10}
.photo-panel.small{aspect-ratio:24/10}
.photo-panel svg{width:100%; height:100%}
.photo-tag{position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:999px; background:rgba(255,255,255,.14); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.2); color:#eaf1fb; font-size:12px; font-weight:600}
.photo-tag .dot{position:static}

.feat-dash{padding:20px; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow)}
.fd-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.fd-head b{font-family:var(--display); font-size:15px}
.chip{font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px}
.chip-green{background:rgba(52,168,83,.12); color:#1f7a3c}
.chip-blue{background:rgba(66,133,244,.12); color:#1b5fc4}
.fd-metrics{display:grid; grid-template-columns:repeat(5,1fr); gap:9px}
.fd-metrics span{display:flex; flex-direction:column; gap:2px; padding:12px 10px; border-radius:13px; background:var(--soft); border:1px solid var(--line); font-size:11.5px; color:var(--muted)}
.fd-metrics b{font-family:var(--display); font-size:17px; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.fd-bars{display:grid; grid-template-columns:repeat(12,1fr); gap:6px; align-items:end; height:74px; margin-top:16px}
.fd-bars i{display:block; height:var(--h); border-radius:5px 5px 3px 3px; background:linear-gradient(180deg,var(--green),rgba(52,168,83,.28)); animation:growBar .9s var(--ease) backwards}
.fd-bars i:nth-child(2n){background:linear-gradient(180deg,var(--blue),rgba(66,133,244,.25))}
.fd-note{margin-top:16px; padding:13px 15px; border-radius:13px; background:linear-gradient(100deg,rgba(66,133,244,.07),rgba(52,168,83,.07)); border:1px solid rgba(66,133,244,.16); font-size:13.5px; color:#37455e; display:flex; gap:9px; flex-wrap:wrap; align-items:baseline}
.fd-note.strong{display:block; line-height:1.6}
.fd-note b{color:var(--text)}

.pipeline{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; height:210px}
.pl-col{display:grid; grid-template-rows:auto auto 1fr; gap:5px; text-align:center; align-items:end}
.pl-h{font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--muted)}
.pl-col b{font-family:var(--display); font-size:22px; font-variant-numeric:tabular-nums}
.pl-bar{display:block; height:var(--h); min-height:26px; align-self:end; border-radius:10px 10px 5px 5px; background:linear-gradient(180deg,var(--c),transparent 190%); opacity:.9; animation:growBar 1s var(--ease) backwards}
.fd-note .spark{margin-right:6px}

/* =========================================================
   BRIDGE
   ========================================================= */
.bridge{padding:104px 0}
.bridge-grid{display:grid; grid-template-columns:1fr .8fr 1fr; gap:26px; align-items:center}
.bs-title{display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:13px; letter-spacing:.14em; color:#b9cbe4; margin-bottom:18px}
.chain{display:grid; gap:8px}
.chain li{
  position:relative; padding:14px 18px; border-radius:13px; font-size:14.5px; font-weight:600; color:#dbe7f6;
  background:rgba(255,255,255,.05); border:1px solid var(--line-inv);
}
.chain li:not(:last-child)::after{content:"↓"; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); font-size:11px; color:#5d739a}
.chain li:not(:last-child)::after{color:#5d739a}
.bridge-core{position:relative; display:grid; place-items:center; min-height:240px}
.bridge-core::before,.bridge-core::after{
  content:""; position:absolute; top:50%; width:110px; height:1px;
  background:linear-gradient(90deg, rgba(138,180,248,0), rgba(138,180,248,.6));
}
.bridge-core::before{left:-52px}
.bridge-core::after{right:-52px; transform:scaleX(-1)}
.core-ring{position:absolute; inset:0; display:grid; place-items:center}
.core-ring span{position:absolute; border-radius:50%; border:1px solid rgba(138,180,248,.22)}
.core-ring span:nth-child(1){width:150px; height:150px; animation:pulseRing 4s ease-out infinite}
.core-ring span:nth-child(2){width:210px; height:210px; animation:pulseRing 4s ease-out infinite .9s}
.core-ring span:nth-child(3){width:270px; height:270px; animation:pulseRing 4s ease-out infinite 1.8s}
@keyframes pulseRing{0%{opacity:.05; transform:scale(.8)}40%{opacity:.55}100%{opacity:0; transform:scale(1.18)}}
.core-badge{
  position:relative; z-index:2; display:grid; justify-items:center; gap:3px; padding:22px 24px; border-radius:20px;
  background:rgba(9,20,36,.94); text-align:center;
}
.core-badge .spark{font-size:20px}
.core-badge b{font-family:var(--display); font-size:13px; letter-spacing:.12em; color:#fff}
.core-badge i{font-style:normal; font-size:11.5px; color:var(--muted-inv)}

/* =========================================================
   MODULE CLOUD
   ========================================================= */
.modules{padding:104px 0; background:linear-gradient(180deg,#fff,var(--soft))}
.cloud{position:relative; border-radius:var(--radius-lg); padding:44px 34px 34px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); overflow:hidden}
.cloud::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 260px at 50% 22%, rgba(66,133,244,.06), transparent 70%),
             radial-gradient(420px 240px at 82% 78%, rgba(52,168,83,.05), transparent 70%);
}
.cloud-links{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.cloud-links line{stroke:#dde6f3; stroke-width:1; opacity:.9; transition:opacity .3s}
.cloud-links.focused #clBase line{opacity:.28}
.cloud-links line.hot{stroke:url(#clg); stroke-width:1.9; opacity:1}
.cloud-items{position:relative; display:flex; flex-wrap:wrap; gap:14px 12px; justify-content:center; align-items:center; z-index:2; max-width:1000px; margin-inline:auto}
.mod:nth-child(3n){margin-top:26px}
.mod:nth-child(4n){margin-top:-16px}
.mod:nth-child(7n){margin-top:14px}
.mod{
  padding:13px 20px; border-radius:14px; font-size:14.5px; font-weight:600; color:#3d4a60;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); cursor:default;
  transition:transform .3s var(--ease), box-shadow .3s, color .25s, border-color .25s, background .25s;
}
.mod:hover, .mod.active{transform:translateY(-4px); color:var(--text); border-color:transparent; box-shadow:0 14px 30px -14px rgba(66,133,244,.55)}
.mod.active{background:linear-gradient(100deg,rgba(66,133,244,.1),rgba(52,168,83,.1))}
.mod.rel{border-color:rgba(66,133,244,.45); color:var(--blue); background:rgba(66,133,244,.05)}
.mod.dim{opacity:.42}
.mod.ai-mod{background:linear-gradient(100deg,rgba(66,133,244,.09),rgba(251,188,5,.09)); border-color:rgba(66,133,244,.28)}
.cloud-info{
  position:relative; z-index:2; margin:30px auto 0; max-width:640px; text-align:center; min-height:62px;
  padding:16px 20px; border-radius:16px; background:var(--soft); border:1px solid var(--line);
}
.cloud-info b{display:block; font-family:var(--display); font-size:15px; margin-bottom:4px}
.cloud-info span{font-size:14px; color:var(--muted)}
.cloud-info .flow{display:inline-flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:8px}
.cloud-info .flow i{font-style:normal; font-size:12px; font-weight:600; color:var(--blue); background:rgba(66,133,244,.1); padding:4px 10px; border-radius:999px}

/* =========================================================
   COMMAND CENTER
   ========================================================= */
.command{padding:104px 0}
.chat{max-width:880px; margin-inline:auto; border-radius:var(--radius-lg); background:linear-gradient(160deg,rgba(12,22,40,.94),rgba(7,17,31,.92)); backdrop-filter:blur(20px); box-shadow:0 50px 100px -50px rgba(0,0,0,.9); overflow:hidden}
.chat-top{display:flex; align-items:center; gap:11px; padding:18px 22px; border-bottom:1px solid var(--line-inv)}
.chat-ic{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--green)); color:#fff}
.chat-top b{display:block; font-family:var(--display); font-size:14px; color:#fff}
.chat-top i{display:block; font-style:normal; font-size:11.5px; color:var(--muted-inv)}
.chat-body{padding:24px 22px; display:grid; gap:16px; min-height:340px; max-height:400px; overflow-y:auto; align-content:start; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent}
.chat-body::-webkit-scrollbar{width:6px}
.chat-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:4px}
.bubble{max-width:78%; padding:14px 17px; border-radius:16px; font-size:14.5px; line-height:1.6; animation:bubbleIn .5s var(--ease) backwards}
@keyframes bubbleIn{from{opacity:0; transform:translateY(12px)}}
.bubble.user{margin-left:auto; background:linear-gradient(100deg,rgba(66,133,244,.9),rgba(47,111,224,.9)); color:#fff; border-bottom-right-radius:5px}
.bubble.ai{background:rgba(255,255,255,.06); border:1px solid var(--line-inv); color:#cfdcee; border-bottom-left-radius:5px}
.bubble.ai b{color:#fff}
.bubble.ai .src{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.bubble.ai .src i{font-style:normal; font-size:10.5px; font-weight:600; color:#8ab4f8; background:rgba(66,133,244,.12); padding:3px 9px; border-radius:999px}
.bubble.typing-b{display:flex; gap:5px; padding:16px 18px; width:fit-content}
.bubble.typing-b i{width:6px; height:6px; border-radius:50%; background:#6b86a8; animation:blink 1.3s infinite}
.bubble.typing-b i:nth-child(2){animation-delay:.18s} .bubble.typing-b i:nth-child(3){animation-delay:.36s}
.chat-input{display:flex; align-items:center; gap:11px; padding:15px 18px; border-top:1px solid var(--line-inv); background:rgba(255,255,255,.03)}
.ci-spark{color:var(--yellow)}
.ci-text{flex:1; font-size:14px; color:#7b90ad; position:relative}
.ci-text::after{content:""; display:inline-block; width:2px; height:15px; background:#8ab4f8; margin-left:3px; vertical-align:-3px; animation:caret 1.05s steps(2) infinite}
@keyframes caret{50%{opacity:0}}

/* =========================================================
   PULSE
   ========================================================= */
.pulse{padding:104px 0; background:#fff}
.pulse-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.pulse-card{padding:22px 20px 18px; border-radius:var(--radius-sm); background:#fff; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s}
.pulse-card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.pc-l{display:block; font-size:12px; color:var(--muted); font-weight:500}
.pulse-card b{display:block; font-family:var(--display); font-size:24px; letter-spacing:-.035em; margin:6px 0 12px; font-variant-numeric:tabular-nums}
.spark-line{
  display:block; height:26px; border-radius:6px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 62%, transparent), color-mix(in srgb, var(--c) 8%, transparent));
  opacity:.9;
  clip-path:polygon(0 78%,9% 62%,18% 70%,27% 44%,36% 55%,45% 32%,54% 46%,63% 26%,72% 38%,81% 18%,90% 30%,100% 8%,100% 100%,0 100%);
  animation:pulseLine 5s ease-in-out infinite;
}
@keyframes pulseLine{0%,100%{opacity:.65}50%{opacity:1}}

/* =========================================================
   PRODUCT CARDS
   ========================================================= */
.products{padding:104px 0; background:linear-gradient(180deg,var(--soft),#fff)}
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.prod-card{padding:26px 22px 24px; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s}
.prod-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.prod-card.wide{grid-column:span 4; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px; background:linear-gradient(100deg,#fff, #f7fbff)}
.prod-card.wide h3{margin:0 0 6px}
.prod-card.wide p{max-width:78ch; margin-bottom:0}
.prod-card.wide .link-arrow{white-space:nowrap}
.pc-ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:13px; font-weight:800; font-family:var(--display); margin-bottom:16px; transition:transform .35s var(--ease), box-shadow .35s}
.prod-card:hover .pc-ic{transform:scale(1.08)}
.prod-card.wide .pc-ic{margin:0; font-size:20px}
.ic-ai{background:linear-gradient(135deg,rgba(66,133,244,.16),rgba(251,188,5,.16)); color:var(--blue)}
.prod-card h3{font-size:18.5px; margin-bottom:8px}
.prod-card p{font-size:14.5px; color:var(--muted); line-height:1.6; margin-bottom:14px}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{padding:34px 0 104px; background:#fff}
.cta-box{
  position:relative; overflow:hidden; padding:66px 40px; border-radius:var(--radius-lg); text-align:center;
  background:linear-gradient(150deg,#0d1a2e,var(--navy) 60%); color:var(--ink-inv);
  box-shadow:0 50px 100px -55px rgba(7,17,31,.9);
}
.cta-box .sec-title{color:#fff}
.cta-box .sec-lead{color:var(--muted-inv); max-width:56ch; margin-inline:auto}
.cta-orbs span{position:absolute; border-radius:50%; filter:blur(70px); opacity:.4}
.cta-orbs span:nth-child(1){width:340px; height:340px; background:rgba(66,133,244,.55); top:-120px; left:8%; animation:drift1 20s ease-in-out infinite}
.cta-orbs span:nth-child(2){width:300px; height:300px; background:rgba(52,168,83,.45); bottom:-130px; right:14%; animation:drift2 24s ease-in-out infinite}
.cta-orbs span:nth-child(3){width:240px; height:240px; background:rgba(234,67,53,.3); top:20%; right:4%; animation:drift3 26s ease-in-out infinite}
.cta-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; position:relative; z-index:2}
.cta-box .sec-title, .cta-box .sec-lead, .cta-box .cta-btns{position:relative; z-index:2}

/* =========================================================
   PRICING
   ========================================================= */
.pricing{padding:20px 0 104px; background:#fff}
.toggle{display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:var(--soft); border:1px solid var(--line); margin-top:26px}
.tg{padding:9px 20px; border-radius:999px; font-size:14px; font-weight:600; color:var(--muted); transition:all .25s var(--ease); display:inline-flex; align-items:center; gap:8px}
.tg.is-on{background:#fff; color:var(--text); box-shadow:var(--shadow-sm)}
.save{font-size:10.5px; font-weight:700; color:#1f7a3c; background:rgba(52,168,83,.14); padding:3px 8px; border-radius:999px}
.price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch}
.price-card{position:relative; display:flex; flex-direction:column; padding:28px 24px 26px; border-radius:var(--radius); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s}
.price-card .pc-list{flex:1}
.price-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.price-card.featured{border-color:transparent; padding-top:34px; box-shadow:var(--shadow)}
.badge-pop{position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:800; letter-spacing:.12em; padding:6px 13px; border-radius:999px; color:#fff; background:linear-gradient(100deg,var(--blue),var(--green)); box-shadow:0 8px 18px -10px rgba(66,133,244,.9); white-space:nowrap}
.price-card h3{font-size:19px}
.pc-sub{font-size:13.5px; color:var(--muted); margin-top:6px; min-height:40px}
.price{display:flex; align-items:baseline; gap:2px; margin:12px 0 20px; font-family:var(--display)}
.price .cur{font-size:20px; font-weight:600; color:var(--muted); align-self:flex-start; padding-top:7px}
.price .amt, .price .amt-txt{font-size:36px; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.price i{font-style:normal; font-size:13px; color:var(--muted); margin-left:5px; font-family:var(--font)}
.pc-list{display:grid; gap:9px; margin-bottom:24px}
.pc-list li{display:flex; gap:9px; font-size:14px; color:#41506a; line-height:1.5}
.pc-list li::before{content:"✓"; color:var(--green); font-weight:700; font-size:13px}

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding:0 0 104px; background:#fff}
.faq-in{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start}
.faq .sec-head{margin-bottom:0}
.faq-list{display:grid; gap:10px}
.faq-item{border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; overflow:hidden; transition:box-shadow .3s, border-color .3s}
.faq-item[open]{box-shadow:var(--shadow-sm); border-color:rgba(66,133,244,.35)}
.faq-item summary{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; font-size:15.5px; font-weight:600; cursor:pointer; list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.fi{position:relative; width:16px; height:16px; flex:0 0 auto}
.fi::before,.fi::after{content:""; position:absolute; background:var(--blue); border-radius:2px; transition:transform .3s var(--ease)}
.fi::before{inset:7px 0 7px 0; height:2px}
.fi::after{inset:0 7px 0 7px; width:2px}
.faq-item[open] .fi::after{transform:scaleY(0)}
.faq-item p{padding:0 20px 20px; font-size:14.5px; color:var(--muted); line-height:1.65}

/* =========================================================
   FINAL
   ========================================================= */
.final{padding:120px 0; text-align:center}
.final-in{position:relative; z-index:3; display:grid; justify-items:center}
.final-h{font-family:var(--display); font-weight:800; font-size:clamp(36px,4.6vw,64px); line-height:1.08; letter-spacing:-.035em; margin:22px 0 0; color:#fff}
.final-sub{margin-top:20px; font-size:clamp(15.5px,1.2vw,18.5px); color:var(--muted-inv); max-width:46ch}
.neural-2{opacity:.6}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--dark); color:var(--muted-inv); padding:70px 0 30px; border-top:1px solid var(--line-inv)}
.foot-in{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px}
.footer .brand{color:#fff}
.foot-tag{margin-top:14px; font-size:14px; max-width:34ch; line-height:1.6}
.socials{display:flex; gap:10px; margin-top:20px}
.socials a{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.05); border:1px solid var(--line-inv); color:#b9cbe4; transition:all .25s var(--ease)}
.socials a:hover{color:#fff; background:rgba(66,133,244,.2); transform:translateY(-2px)}
.foot-h{font-family:var(--display); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:#fff; margin-bottom:14px}
.foot-col{display:grid; align-content:start; gap:9px; font-size:14px}
.foot-col a{transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-base{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:52px; padding-top:22px; border-top:1px solid var(--line-inv); font-size:13px}
.foot-links{display:flex; gap:18px}
.foot-links a:hover{color:#fff}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* keep the hanging hero cards inside the viewport on narrower desktops */
@media (max-width:1420px){
  .mini-crm{right:-14px; top:-66px}
  .ai-panel{right:-14px}
  .mini-gym{left:-108px}
}
@media (max-width:1300px){
  .mini-crm{right:0}
  .ai-panel{right:0}
  .mini-gym{left:-72px}
}

@media (max-width:1180px){
  .hero-in{grid-template-columns:1fr; gap:70px}
  .hero-copy{max-width:720px}
  .hero-visual{min-height:auto; margin-top:10px}
  .ai-panel{position:relative; inset:auto; width:auto; margin-top:18px}
  .mini{position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto;
        display:flex; flex-direction:column}
  .mini-bar,.mini-rows{margin-top:auto}
  .hero-visual{display:grid; gap:16px; grid-template-columns:1fr 1fr}
  .dash{grid-column:span 2}
  .switcher{grid-column:span 2}
  .floats{display:none}
  .ai-panel{grid-column:span 2}
  .switcher{margin-top:26px}
  .mod{cursor:pointer}
  .ai-cards{grid-template-columns:1fr 1fr}
  .prod-grid{grid-template-columns:1fr 1fr}
  .prod-card.wide{grid-column:span 2; grid-template-columns:1fr; text-align:left}
  .price-grid{grid-template-columns:1fr 1fr}
  .pulse-grid{grid-template-columns:repeat(3,1fr)}
  .tf-grid{grid-template-columns:1fr}
  .tf-pipe{
    padding:26px 0; min-width:0; width:100%; justify-items:stretch;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
    mask-image:linear-gradient(90deg,#000 86%,transparent);
  }
  .pipe-beam{display:none}
  .pipe-steps{
    grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:max-content;
    gap:24px; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain;
    padding:0 18px 10px 2px; scrollbar-width:none;
  }
  .pipe-steps::-webkit-scrollbar{display:none}
  .pipe-steps li:not(:last-child)::after{content:"→"; position:absolute; right:-14px; top:50%; transform:translateY(-50%)}
  .feature-in{grid-template-columns:1fr; gap:40px}
  .feature-in.reverse .feature-copy{order:0}
  .faq-in{grid-template-columns:1fr; gap:34px}
  .foot-in{grid-template-columns:1fr 1fr}
}
/* ---------- tablet ---------- */
@media (max-width:900px){
  .nav-links{display:none}
  .btn-ghost{display:none}
  .burger{display:flex}
  .nav-in{height:66px; gap:12px}
  .nav-cta{gap:6px}
  .brand-name{font-size:18px}
  .btn-sm{padding:9px 15px; font-size:13.5px}
  .mobile-menu{inset:66px 0 0 0}

  .hero{min-height:auto; padding:112px 0 70px}
  .prob-flow{grid-template-columns:1fr}
  .prob-mid{min-height:150px}
  .mid-rays{inset:-20px 14%}
  .bridge-grid{grid-template-columns:1fr}
  .bridge-core{min-height:200px}
  .bridge-core::before,.bridge-core::after{display:none}
  .fd-metrics{grid-template-columns:repeat(3,1fr)}
  .dash-metrics{grid-template-columns:1fr 1fr}
  .scroll-ind{display:none}

  /* comfortable tap targets */
  .foot-col a{padding:5px 0}
  .foot-links a{padding:8px 0}
  .brand{padding:5px 0}
  .link-arrow{padding:6px 0}
  .socials a{width:42px; height:42px}
  .faq-item summary{padding:18px 16px}
}

/* ---------- large phone / small tablet ---------- */
@media (max-width:680px){
  .wrap{width:min(100% - 32px, var(--wrap))}
  .hero{padding:100px 0 60px}
  .hero-visual{grid-template-columns:1fr}
  .dash, .switcher, .ai-panel{grid-column:span 1}
  .dash{padding:15px}
  .m-value{font-size:19px}
  .ai-cards, .prod-grid, .price-grid{grid-template-columns:1fr}
  .prod-card.wide{grid-column:span 1}
  .pulse-grid{grid-template-columns:1fr 1fr}
  .feat-list{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr; gap:32px}
  .cta-box{padding:48px 22px}
  .fd-metrics{grid-template-columns:repeat(2,1fr)}
  .sec-head{margin-bottom:34px}
  .ai-card,.prod-card,.price-card{padding:22px 18px}

  /* vertical rhythm */
  .trust{padding:60px 0 52px}
  .problem,.transform,.platform,.feature,.bridge,.modules,.command,.pulse,.products{padding:70px 0}
  .cta-band{padding:24px 0 70px}
  .pricing{padding:12px 0 70px}
  .faq{padding:0 0 70px}
  .final{padding:84px 0}
  .footer{padding:52px 0 24px}

  /* CRM funnel becomes a horizontal bar list */
  .pipeline{grid-template-columns:1fr; height:auto; gap:11px}
  .pl-col{grid-template-columns:96px auto minmax(0,1fr); grid-template-rows:auto; align-items:center; text-align:left; gap:10px}
  .pl-col b{font-size:19px}
  .pl-bar{height:12px; min-height:0; width:var(--h); align-self:center;
          border-radius:8px; background:linear-gradient(90deg,var(--c),transparent 210%)}

  /* command centre */
  .chat-body{padding:18px 14px; min-height:260px; max-height:340px}
  .bubble{max-width:92%; font-size:14px}
  .chat-top{padding:15px 16px}
  .chat-input{flex-wrap:wrap; gap:10px; padding:14px}
  .ci-text{flex:1 0 calc(100% - 26px); font-size:13px}
  .chat-input .btn{width:100%}

  /* module cloud */
  .cloud{padding:26px 16px 22px}
  .mod{font-size:13.5px; padding:11px 15px}
  .mod:nth-child(3n),.mod:nth-child(4n),.mod:nth-child(7n){margin-top:0}
  .cloud-info{padding:14px 16px}
}

/* ---------- phone ---------- */
@media (max-width:520px){
  .nav-cta .btn-primary{display:none}   /* Free Trial lives in the mobile menu */
  .badge{font-size:10px; letter-spacing:.1em; padding:7px 12px}
  .hero-title{font-size:clamp(30px,8.8vw,42px)}
  .hero-lead{font-size:16px}
  .sec-title{font-size:clamp(25px,7.4vw,34px)}
  .final-h{font-size:clamp(28px,8.6vw,42px)}
  .trust-h{font-size:20px}
  .hero-btns .btn,.cta-btns .btn{width:100%}
  .toggle{flex-wrap:wrap; justify-content:center}
  .tg{padding:9px 16px; font-size:13.5px}
  .pulse-grid{grid-template-columns:1fr 1fr; gap:11px}
  .foot-base{flex-direction:column; align-items:flex-start; gap:10px}
  .trust-tags li{font-size:12.5px; padding:7px 13px}
  .pl-col{grid-template-columns:84px auto minmax(0,1fr)}
  .price .amt,.price .amt-txt{font-size:32px}
}

/* ---------- very small phone ---------- */
@media (max-width:380px){
  .wrap{width:min(100% - 24px, var(--wrap))}
  .dash{padding:13px}
  .dash-metrics{gap:8px}
  .metric{padding:11px 10px}
  .sw{padding:7px 13px; font-size:12.5px}
  .pulse-grid{grid-template-columns:1fr}
  .fd-metrics{grid-template-columns:1fr 1fr}
}

/* =========================================================
   MOTION PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .seq,.reveal{opacity:1 !important; transform:none !important; filter:none !important}
  .neural{display:none}
  .floats{display:none}
}