:root{
  --blue:#0B5ED7;
  --blue2:#0a4fb5;
  --black:#0B0F19;
  --ink:#E5E7EB;
  --muted:#9CA3AF;
  --border: rgba(255,255,255,.10);
}

body{
  background:
    radial-gradient(1000px 500px at 15% 0%, rgba(11,94,215,.18), transparent 60%),
    radial-gradient(800px 400px at 85% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #070a12 0%, #0b0f19 100%);
  color: var(--ink);
}

/* NAV */
.navbar{
  background: rgba(9,12,20,.65);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.navbar .nav-link{ color: rgba(229,231,235,.85); }
.navbar .nav-link:hover{ color:#fff; }
.navbar-brand{ color:#fff; }
.brand-dot{ color: var(--blue); }

.btn-brand{
  background: var(--blue);
  border-color: var(--blue);
  color:#fff;
  box-shadow: 0 10px 25px rgba(11,94,215,.25);
}
.btn-brand:hover{ background: var(--blue2); border-color: var(--blue2); }
.btn-darkish{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color:#fff;
}
.btn-darkish:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color:#fff;
}

.badge-soft{
  background: rgba(11,94,215,.14);
  color: #cfe2ff;
  border: 1px solid rgba(11,94,215,.25);
}
.text-muted2{ color: var(--muted); }

/* Sections */
.section{ padding: 78px 0; }
.section.alt{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
section{ scroll-margin-top: 80px; }

/* 3D dark cards */
.card-3d{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1.2rem;
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
  position: relative;
  overflow: hidden;
  color: var(--ink);
}
.card-3d::before{
  content:"";
  position:absolute;
  inset:-40% -40% auto auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 30% 30%, rgba(11,94,215,.22), transparent 60%);
  transform: rotate(20deg);
  pointer-events:none;
}

.icon{
  width:72px;
  height:72px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,94,215,.14);
  border: 1px solid rgba(11,94,215,.28);
  color: #cfe2ff;
  flex:0 0 auto;
  font-size: 30px;
  box-shadow: 0 14px 35px rgba(11,94,215,.22);
}

.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size:.9rem;
  color: rgba(229,231,235,.92);
}

/* HERO */
.hero{ padding: 44px 0 40px; }
.hero-title{ color:#fff; }

/* Banner directly under menu */
.banner{ padding: 22px 0 10px; }
.banner img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.2rem;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 25px 70px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.06) inset;
  background: rgba(255,255,255,.04);
}

/* Chat ticker */
.chat-box{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1rem;
  padding: 14px;
}
.chat-ticker{
  height: 190px;
  overflow: hidden;
  position: relative;
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  will-change: transform;
}
.chat-line{
  padding: 10px 12px;
  border-radius: 12px;
  margin: 8px 0;
  border: 1px solid rgba(255,255,255,.10);
  font-size: 0.95rem;
  color: rgba(229,231,235,.92);
  background: rgba(255,255,255,.05);
}
.chat-line.bot{
  background: rgba(11,94,215,.22);
  border-color: rgba(11,94,215,.30);
}
#typingDot{
  color: rgba(11,94,215,.9);
  animation: pulseDot 1.2s infinite ease-in-out;
  display: inline-block;
  margin-right: 6px;
}
@keyframes pulseDot{
  0%, 100%{ transform: scale(1); opacity: .6; }
  50%{ transform: scale(1.25); opacity: 1; }
}

/* Pricing */
.plan.featured{
  border: 2px solid rgba(11,94,215,.35);
  box-shadow: 0 25px 70px rgba(11,94,215,.12), 0 1px 0 rgba(255,255,255,.06) inset;
  position: relative;
}
.ribbon{
  position:absolute; top:14px; right:14px;
  font-size:.75rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(11,94,215,.16);
  color: #cfe2ff;
  border: 1px solid rgba(11,94,215,.35);
}

/* Accordion */
.accordion-item{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1rem;
  overflow:hidden;
  margin-bottom: 12px;
}
.accordion-button{
  background: rgba(255,255,255,.03);
  color: rgba(229,231,235,.92);
}
.accordion-button:not(.collapsed){
  background: rgba(11,94,215,.10);
  color:#fff;
  box-shadow: none;
}
.accordion-body{ color: rgba(229,231,235,.85); }

/* Footer */
footer{
  background: rgba(0,0,0,.35);
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(229,231,235,.82);
}
footer a{ color: rgba(229,231,235,.82); text-decoration:none; }
footer a:hover{ color:#fff; text-decoration:underline; }