/* =========================================================
   SNTRAX — Premium UI + Motion layer  (enhance.css)
   Loaded AFTER style.css. Pure additive; original layout kept.
   ========================================================= */

:root{
  --nx-lime:#d7ff65;
  --nx-lime-soft:#e9ffab;
  --nx-glow:0 0 0 1px rgba(215,255,101,.25), 0 8px 40px -8px rgba(215,255,101,.35);
  --nx-ease:cubic-bezier(.22,1,.36,1);
  --nx-ease-2:cubic-bezier(.65,0,.35,1);
}

/* ---------- global canvas ---------- */
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(215,255,101,.10), transparent 60%),
    radial-gradient(1100px 700px at 100% 0%, rgba(120,180,255,.07), transparent 55%),
    #080a0b;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* animated aurora behind everything */
body::before{
  content:"";
  position:fixed;inset:-20% -20%;
  z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 38% at 20% 25%, rgba(215,255,101,.16), transparent 62%),
    radial-gradient(34% 34% at 78% 18%, rgba(110,170,255,.14), transparent 60%),
    radial-gradient(40% 40% at 62% 82%, rgba(180,120,255,.10), transparent 62%);
  filter:blur(70px) saturate(125%);
  animation:nx-aurora 22s var(--nx-ease-2) infinite alternate;
  opacity:.85;
}
/* fine grid + vignette */
body::after{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  opacity:.6;
}
@keyframes nx-aurora{
  0%  {transform:translate3d(-3%,-2%,0) scale(1)}
  50% {transform:translate3d(2%,3%,0)  scale(1.08)}
  100%{transform:translate3d(-2%,2%,0)  scale(1.03)}
}
/* keep app content above the canvas */
.app{position:relative;z-index:1}

/* cursor-follow spotlight (driven by enhance.js) */
#nx-spot{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(300px 300px at var(--mx,50%) var(--my,20%),
             rgba(215,255,101,.07), transparent 65%);
  transition:opacity .4s ease;opacity:0;
}
body.nx-ready #nx-spot{opacity:1}

/* ---------- sidebar ---------- */
.sidebar{
  background:linear-gradient(180deg, rgba(15,19,20,.92), rgba(9,12,13,.92));
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-right:1px solid rgba(215,255,101,.10);
}
.brand img{
  border-radius:12px;
  object-fit:contain;
  background:transparent;
  box-shadow:0 6px 22px -6px rgba(215,255,101,.5), inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .5s var(--nx-ease), box-shadow .5s var(--nx-ease);
}
.brand:hover img{transform:rotate(-6deg) scale(1.06)}
.brand strong{
  background:linear-gradient(100deg,#ffffff 0%,#e9ffab 55%,#ffffff 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:nx-sheen 6s linear infinite;
}
@keyframes nx-sheen{to{background-position:-200% 0}}

.nav-link{
  position:relative;overflow:hidden;
  border:1px solid transparent;
  transition:transform .35s var(--nx-ease), background .3s, color .3s, border-color .3s;
}
.nav-link::before{           /* sliding active rail */
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:3px;height:0;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--nx-lime),#9fd93a);
  box-shadow:0 0 14px rgba(215,255,101,.7);
  transition:height .35s var(--nx-ease);
}
.nav-link.active::before{height:62%}
.nav-link .nav-icon{transition:transform .4s var(--nx-ease), color .3s;color:#8f9997}
.nav-link.active .nav-icon{color:var(--nx-lime);filter:drop-shadow(0 0 8px rgba(215,255,101,.6))}
.nav-link:hover{transform:translateX(4px);background:rgba(215,255,101,.06);border-color:rgba(215,255,101,.14)}
.nav-link:hover .nav-icon{transform:scale(1.12) rotate(-4deg);color:var(--nx-lime)}
.nav-link.active{background:linear-gradient(90deg, rgba(215,255,101,.14), rgba(215,255,101,.04))}

.pulse{animation:nx-pulse 2s infinite}
@keyframes nx-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(215,255,101,.55),0 0 12px rgba(215,255,101,.6);transform:scale(1)}
  50%{box-shadow:0 0 0 7px rgba(215,255,101,0),0 0 20px rgba(215,255,101,.85);transform:scale(1.15)}
}
.social{transition:transform .35s var(--nx-ease), border-color .3s, box-shadow .3s, color .3s;position:relative;overflow:hidden}
.social:hover{transform:translateY(-2px);border-color:var(--nx-lime);color:var(--nx-lime);box-shadow:0 8px 26px -10px rgba(215,255,101,.6)}

/* ---------- topbar ---------- */
.topbar{
  background:linear-gradient(90deg, rgba(11,14,15,.72), rgba(11,14,15,.45)) !important;
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgba(215,255,101,.10);
  position:sticky;top:0;z-index:9;
}
.prototype-badge{
  border:1px solid rgba(215,255,101,.28);
  border-radius:100px;padding:7px 12px;
  background:rgba(215,255,101,.06);
}
.top-social{
  border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:8px 14px;
  transition:all .3s var(--nx-ease);
}
.top-social:hover{border-color:var(--nx-lime);color:var(--nx-lime);box-shadow:var(--nx-glow);transform:translateY(-1px)}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;
  border:1px solid rgba(215,255,101,.16);
  box-shadow:0 40px 120px -50px rgba(215,255,101,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  animation:nx-rise 1s var(--nx-ease) both;
}
.hero::before{      /* animated gradient rim */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:2;
  background:linear-gradient(120deg, rgba(215,255,101,.7), transparent 30%, transparent 70%, rgba(140,190,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  background-size:300% 300%;
  animation:nx-rim 8s linear infinite;pointer-events:none;opacity:.75;
}
@keyframes nx-rim{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.hero img,.hero picture img{transition:transform 12s ease-out}

.pill{
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-color:rgba(215,255,101,.35) !important;
  box-shadow:0 0 30px -12px rgba(215,255,101,.6);
  animation:nx-rise .8s var(--nx-ease) .05s both;
}
.hero h1{
  animation:nx-rise 1s var(--nx-ease) .12s both;
  text-shadow:0 30px 80px rgba(0,0,0,.6);
}
.hero h1 em{
  background:linear-gradient(100deg,var(--nx-lime) 0%,#f2ffcb 40%,var(--nx-lime) 90%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:nx-sheen 5s linear infinite;
  filter:drop-shadow(0 0 26px rgba(215,255,101,.45));
}
.hero-copy>p{animation:nx-rise 1s var(--nx-ease) .22s both}
.actions{animation:nx-rise 1s var(--nx-ease) .32s both}
.hero-foot{animation:nx-fade 1.4s var(--nx-ease) .5s both}

/* ---------- buttons ---------- */
.button{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--nx-ease), box-shadow .35s var(--nx-ease), border-color .3s, color .3s;
}
.button::after{      /* shine sweep */
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .7s var(--nx-ease);z-index:-1;
}
.button:hover::after{left:130%}
.button:hover{transform:translateY(-3px)}
.button.primary{
  background:linear-gradient(100deg,var(--nx-lime),#c4f04a 60%,var(--nx-lime));
  background-size:200% 100%;
  box-shadow:0 10px 34px -12px rgba(215,255,101,.75);
}
.button.primary:hover{box-shadow:0 18px 46px -12px rgba(215,255,101,.9);animation:nx-sheen 2.5s linear infinite}
.button.ghost{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.button.ghost:hover{box-shadow:var(--nx-glow)}

/* ---------- section intro / features ---------- */
.section-intro h2,.page-title h1{
  background:linear-gradient(180deg,#ffffff,#c9d2cf);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.feature{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(150deg, rgba(26,32,33,.9), rgba(14,17,18,.9));
  transition:transform .45s var(--nx-ease), border-color .4s, box-shadow .45s;
}
.feature::before{   /* hover spotlight */
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;
  background:radial-gradient(360px 240px at 22% 0%, rgba(215,255,101,.16), transparent 62%);
}
.feature::after{    /* gradient top hairline */
  content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(215,255,101,.6),transparent);
  opacity:.5;transition:opacity .4s;
}
.feature:hover{transform:translateY(-6px);border-color:rgba(215,255,101,.42);box-shadow:0 30px 70px -35px rgba(215,255,101,.7)}
.feature:hover::before{opacity:1}
.feature:hover::after{opacity:1}
.feature-icon{display:inline-block;transition:transform .5s var(--nx-ease);filter:drop-shadow(0 0 14px rgba(215,255,101,.5))}
.feature:hover .feature-icon{transform:translateY(-3px) scale(1.14) rotate(-6deg)}
.feature-link{transition:gap .3s,color .3s,transform .3s var(--nx-ease);display:inline-flex;align-items:center;gap:6px}
.feature:hover .feature-link{color:var(--nx-lime);transform:translateX(4px)}

.notice{
  position:relative;overflow:hidden;
  border:1px solid rgba(215,255,101,.22);
  background:linear-gradient(120deg, rgba(215,255,101,.07), rgba(18,25,20,.9));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* ---------- generic panels / cards ---------- */
.panel,.chat-shell,.feature,.agent-card{
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
}
.agent-card{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(150deg, rgba(26,32,33,.9), rgba(14,17,18,.92)) !important;
  transition:transform .45s var(--nx-ease), border-color .4s, box-shadow .45s;
}
.agent-card:hover{transform:translateY(-6px);border-color:rgba(215,255,101,.4) !important;box-shadow:0 30px 70px -35px rgba(215,255,101,.6)}
.agent-mark{transition:transform .5s var(--nx-ease)}
.agent-card:hover .agent-mark{transform:rotate(-8deg) scale(1.12)}

.message{animation:nx-msg .5s var(--nx-ease) both}
@keyframes nx-msg{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- mobile nav ---------- */
.mobile-nav{
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  background:linear-gradient(180deg,rgba(11,14,15,.86),rgba(9,12,13,.96)) !important;
  border-top:1px solid rgba(215,255,101,.14);
}
.mobile-nav a{transition:color .3s,transform .3s var(--nx-ease)}
.mobile-nav a.active{color:var(--nx-lime)}
.mobile-nav a.active>span{filter:drop-shadow(0 0 10px rgba(215,255,101,.75))}

/* ---------- scroll reveal ---------- */
.nx-reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--nx-ease),transform .9s var(--nx-ease);transition-delay:var(--nx-d,0ms)}
.nx-reveal.nx-in{opacity:1;transform:none}

@keyframes nx-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes nx-fade{from{opacity:0}to{opacity:1}}

/* ---------- page enter transition ---------- */
@keyframes nx-pagein{from{opacity:0}to{opacity:1}}
.main{animation:nx-pagein .6s var(--nx-ease) both}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .nx-reveal{opacity:1;transform:none}
}

/* ---------- mobile tuning ---------- */
@media (max-width:760px){
  body::after{background-size:34px 34px;opacity:.45}
  .hero{box-shadow:0 30px 80px -40px rgba(215,255,101,.4)}
}

/* ---------- chat typing indicator ---------- */
@keyframes nx-dot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.message.typing span[class^="dot-"]{display:inline-block;margin-right:3px;font-size:11px;color:var(--nx-lime);animation:nx-dot 1.1s infinite}
.message.typing .dot-2{animation-delay:.18s}
.message.typing .dot-3{animation-delay:.36s}

/* ---------- chat bubbles v2 — compact & refined ---------- */
.messages{gap:13px}
.message{
  max-width:74%;
  padding:11px 14px;
  border-radius:16px;
  font-size:13.5px;
  line-height:1.6;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 22px -18px #000;
}
.message.bot{
  background:linear-gradient(160deg,#1d2525,#161c1d);
  border-color:#2c3636;
  border-bottom-left-radius:6px;
}
.message.user{
  background:linear-gradient(160deg,#33441f,#28331c);
  border-color:#41552c;
  color:#eef6e0;
  border-bottom-right-radius:6px;
}
.message-label{
  font-size:9px;
  letter-spacing:.13em;
  margin-bottom:5px;
  opacity:.8;
}
.message.bot .message-label{color:#a9bf7c}
.message.user .message-label{color:#c3d79a}

@media (max-width:760px){
  .messages{padding:13px 12px;gap:10px}
  .message{
    max-width:84%;
    padding:9px 12px;
    border-radius:15px;
    font-size:13px;
    line-height:1.55;
  }
  .message.bot{border-bottom-left-radius:5px}
  .message.user{border-bottom-right-radius:5px}
  .message-label{font-size:8.5px;letter-spacing:.12em;margin-bottom:4px}
}
@media (max-width:430px){
  .message{max-width:88%;font-size:12.8px;padding:9px 11px}
}