:root{
  --bg-navy:#07162f;
  --bg-blue:#0b5ed7;
  --bg-cyan:#1fb6ff;
  --card:#ffffff;
  --text:#0b1220;
  --muted:rgba(11,18,32,.68);
  --ring:rgba(255,255,255,.22);
}

/* ===== GLOBAL ===== */
html,body{ height:100%; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
}

/* ===== PROFESSIONAL ANIMATED BACKGROUND (no JS) =====
   - Subtle moving gradient + floating blurred blobs
*/
.bg-soft{
  min-height:100vh;
  position: relative;
  overflow-x:hidden;

  /* animated gradient base */
  background: linear-gradient(120deg, var(--bg-navy), #08306b, var(--bg-blue), #0a3ea8);
  background-size: 280% 280%;
  animation: bgShift 18s ease-in-out infinite;
}

/* Put content above the background layers */
.bg-soft > *{ position: relative; z-index: 1; }

/* Blobs */
.bg-soft::before,
.bg-soft::after{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:0;
  pointer-events:none;
  filter: blur(50px);
  opacity:.55;
  transform: translate3d(0,0,0);
}

.bg-soft::before{
  background:
    radial-gradient(520px 420px at 25% 30%, rgba(31,182,255,.55), transparent 60%),
    radial-gradient(520px 420px at 70% 20%, rgba(90,115,255,.55), transparent 60%),
    radial-gradient(520px 420px at 70% 75%, rgba(0,220,170,.40), transparent 60%);
  animation: floatA 16s ease-in-out infinite;
}

.bg-soft::after{
  background:
    radial-gradient(520px 420px at 20% 75%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(520px 420px at 85% 55%, rgba(31,182,255,.35), transparent 60%);
  opacity:.45;
  animation: floatB 22s ease-in-out infinite;
}

/* Subtle grid overlay for "pro" feel */
.bg-grid{
  position: absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.10;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(60% 55% at 50% 25%, black 45%, transparent 75%);
}

/* Keyframes */
@keyframes bgShift{
  0%{ background-position: 0% 40%; }
  50%{ background-position: 100% 60%; }
  100%{ background-position: 0% 40%; }
}
@keyframes floatA{
  0%{ transform: translate(-2%, -2%) scale(1); }
  50%{ transform: translate(3%, 2%) scale(1.03); }
  100%{ transform: translate(-2%, -2%) scale(1); }
}
@keyframes floatB{
  0%{ transform: translate(2%, 1%) scale(1); }
  50%{ transform: translate(-2%, -1%) scale(1.04); }
  100%{ transform: translate(2%, 1%) scale(1); }
}

/* ===== TOP PILL NAV ===== */
.topbar-wrap{
  display:flex;
  justify-content:center;
  padding-top:18px;
}
.topbar-glass{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 18px;
  padding: 10px 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
}
.topbar-logos{
  display:flex;
  align-items:center;
  gap:20px;
}
.topbar-logos img{
  height: 30px;
  width: auto;
  object-fit: contain;
}

/* ===== LAYOUT ===== */
.container{ max-width: 1120px; }

.hero{
  padding: 56px 0 26px;
}
.hero h1{
  color:#fff;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.12;
}
.hero .lead{
  color: rgba(255,255,255,.86);
  font-size: 1.05rem;
  line-height: 1.7;
}
.text-gradient{
  background: linear-gradient(90deg, #cfe9ff, #ffffff);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Hero badge */
.badge.text-bg-dark{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(0, 0, 0, 0.92) !important;
}

/* ===== CARD ===== */
.card{
  border: 0;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.card-body{ padding: 30px; }

.form-label{ font-weight: 600; }
.form-text{ color: rgba(11,18,32,.60) !important; }

.form-control, .input-group-text{
  border-radius: 14px !important;
  border: 1px solid rgba(11,18,32,.10);
}
.form-control:focus{
  box-shadow: 0 0 0 .25rem rgba(31,182,255,.18) !important;
  border-color: rgba(31,182,255,.45) !important;
}

.btn{
  border-radius: 14px !important;
  font-weight: 700;
}
.btn-primary{
  background: linear-gradient(135deg, #0b5ed7, #1fb6ff);
  border: none;
  box-shadow: 0 14px 30px rgba(11,94,215,.25);
}
.btn-primary:hover{
  transform: translateY(-1px);
}

/* ===== FEATURES ===== */
.feature{
  border-radius: 18px !important;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
}
.icon-bubble{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(31,182,255,.14);
}

/* ===== FOOTER ===== */
.site-footer{ padding: 22px 0 34px; }
.footer-card{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 18px;
  padding: 16px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.footer-brand{ display:flex; align-items:center; gap:12px; }
.brand-dot{
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #cfe9ff, #1fb6ff);
  box-shadow: 0 0 0 4px rgba(31,182,255,.18);
  display:inline-block;
}
@media (max-width: 576px){
  .footer-card{ flex-direction: column; align-items:flex-start; }
  .footer-right{ text-align:left !important; }
}


/* ===== Admin readability tweaks ===== */
.admin-hero{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.admin-title{
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #0b1220;
}

.admin-subtitle{
  color: rgba(11,18,32,.70);
}

.admin-metrics .badge{
  font-weight: 600;
}

.admin-cta{
  border-radius: 14px;
  font-weight: 700;
}

.admin-note{
  color: rgba(255,255,255,.88);
}

/* Improve table readability on dark backgrounds */
.table{
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  overflow: hidden;
}

.table thead{
  background: rgba(255,255,255,.98) !important;
}

.table td, .table th{
  vertical-align: middle;
}