/* ===== NUX-T Brand Theme ===== */
:root{
  --nx-purple:#6b2bd8;
  --nx-purple-2:#4e20b8;
  --nx-lavender:#b99fe2;
  --nx-dark:#0b0f14;
  --nx-white:#ffffff;
  --glass-light:rgba(255,255,255,.55);
  --border-lite:rgba(0,0,0,.1);
  --muted:#677085;
  --text-color:#0b0f14;
}

html[data-bs-theme="dark"]{
  --glass-light:rgba(30,32,40,.65);
  --border-lite:rgba(255,255,255,.08);
  --text-color:#e6ebf2;
  --muted:#a5afc1;
}

/* ===== Hero ===== */
.nx-about-hero{position:relative;overflow:hidden;isolation:isolate;}
.nx-about-hero .brand-mark{height:44px;opacity:.95;}
.nx-about-hero .hero-title{
  font-weight:900;line-height:1.1;font-size:clamp(1.8rem,4vw,2.6rem);
  background:linear-gradient(90deg,var(--nx-white),var(--nx-lavender));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.nx-about-hero .grid-bg{
  position:absolute;inset:-10% -10% -30% -10%;
  background:radial-gradient(800px 300px at 50% -10%,rgba(107,43,216,.18),transparent 60%),
             radial-gradient(900px 360px at 10% 120%,rgba(107,43,216,.10),transparent 60%);
  z-index:-1;
}
.arc-glow{
  position:absolute;left:50%;bottom:-40px;width:1100px;height:140px;
  background:radial-gradient(52% 100% at 50% 50%,rgba(107,43,216,.4),transparent 70%);
  transform:translateX(-50%);filter:blur(26px);z-index:-1;
}

/* Floating badges */
.floating-badges .b{
  position:absolute;padding:.45rem .8rem;border-radius:999px;color:#fff;
  backdrop-filter:blur(6px) saturate(120%);
  border:1px solid rgba(255,255,255,.25);font-weight:800;
}
.badge-blue{right:8%;top:18%;background:rgba(107,43,216,.2);}
.badge-pink{left:12%;top:34%;background:rgba(185,159,226,.25);}
.badge-lime{left:22%;bottom:18%;background:rgba(107,43,216,.15);}

/* ===== Timeline ===== */
.timeline{position:relative;display:grid;gap:3.5rem;max-width:720px;margin-inline:auto;}
.timeline-line{
  position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:linear-gradient(var(--nx-purple-2),var(--nx-purple));
  transform:translateX(-50%);opacity:.4;z-index:0;
}
.timeline-item{position:relative;display:flex;align-items:flex-start;gap:1.4rem;z-index:1;}
.timeline-item:nth-child(even){flex-direction:row-reverse;text-align:end;}
.timeline-item .dot{
  flex:0 0 48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--nx-purple-2),var(--nx-purple));
  color:#fff;font-weight:900;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px rgba(255,255,255,.2),0 0 24px rgba(107,43,216,.35);
}
.timeline-item .content{
  background:var(--glass-light);border:1px solid var(--border-lite);
  border-radius:18px;padding:1rem 1.4rem;box-shadow:0 18px 36px rgba(0,0,0,.1);max-width:320px;
}
.timeline-item .content h5{font-weight:800;color:var(--text-color);margin-bottom:.25rem;}
.timeline-item .content p{color:var(--muted);margin:0;font-size:.97rem;}

/* RTL reverse */
:root[dir="rtl"] .timeline-line{right:50%;left:auto;transform:translateX(50%);}
:root[dir="rtl"] .timeline-item{flex-direction:row-reverse;text-align:start;}
:root[dir="rtl"] .timeline-item:nth-child(even){flex-direction:row;text-align:end;}

/* ===== Panels ===== */
.panel-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.glass{
  position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,var(--glass-light),rgba(255,255,255,.35));
  border:1px solid var(--border-lite);box-shadow:0 22px 48px rgba(0,0,0,.12);
}
.glass::before{content:"";position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:center;opacity:.25;z-index:-1;}
.glass .eyebrow{font-weight:900;color:var(--nx-white);}
.panel{padding:18px;}

/* ===== Counters ===== */
.nx-counters .counter{text-align:center;padding:20px;border-radius:20px;background:var(--glass-light);border:1px solid var(--border-lite);}
.nx-counters .counter .num{
  font-weight:900;font-size:clamp(1.6rem,3.6vw,2.6rem);
  background:linear-gradient(90deg,var(--nx-white),var(--nx-lavender));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.nx-counters .label{color:var(--muted);}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s;}
.reveal.in-view{opacity:1;transform:none;}
/* ==== NUX-T Stats (Circular Style) ==== */
.nx-stats .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  justify-items: center;
}

.nx-stats .stat {
  text-align: center;
  max-width: 260px;
  transition: transform .35s ease, box-shadow .35s ease;
}

.nx-stats .stat:hover {
  transform: translateY(-6px);
}

.nx-stats .circle {
  width: 120px;
  height: 120px;
  margin-inline: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(107,43,216,.9), rgba(185,159,226,.25));
  border: 1px solid rgba(255,255,255,.2);
  box-shadow:
    inset 0 0 25px rgba(255,255,255,.25),
    0 0 25px rgba(107,43,216,.35);
  backdrop-filter: blur(8px) saturate(140%);
  transition: transform .4s ease, box-shadow .4s ease;
}

.nx-stats .circle:hover {
  transform: scale(1.07);
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.3),
    0 0 40px rgba(107,43,216,.5);
}

.nx-stats .circle i {
  font-size: 2.2rem;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,.3);
}

.nx-stats h5 {
  font-weight: 800;
  color: var(--text-color);
  margin-top: 1rem;
}

.nx-stats p {
  color: var(--muted);
  font-size: .92rem;
  margin: .3rem auto 0;
  line-height: 1.5;
  max-width: 240px;
}

/* Reveal Animation */
.reveal.up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, 0ms);
}
.reveal.in-view.up {
  opacity: 1;
  transform: none;
}

/* Dark Mode adjustments */
html[data-bs-theme="dark"] .nx-stats .circle {
  background: radial-gradient(circle at 30% 30%, rgba(107,43,216,.65), rgba(30,30,40,.85));
  border-color: rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 20px rgba(107,43,216,.3),
    0 0 30px rgba(107,43,216,.4);
}