/* LogiTrack — Royal Blue & Gold Theme (Bootstrap-friendly)
   Drop-in theme for frontend preview pages
*/
:root{
  --royal:#0b3a82;
  --royal2:#0e4aa8;
  --gold:#d4af37;
  --gold2:#f3d26a;
  --ink:#0b1220;
  --muted:#6b7280;
  --card:#ffffff;
}

html, body { height: 100%; }
body{
  background: radial-gradient(1200px 700px at 10% 0%, rgba(11,58,130,.15), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(212,175,55,.18), transparent 55%),
              linear-gradient(135deg,#eef3fb,#e8edf7,#f7f9ff);
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

a { text-decoration: none; }
.container-narrow{ max-width: 1100px; }

.portal-header{
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15,23,42,0.06);
  position: sticky;
  top: 0;
  z-index: 999;
}

.brand-logo{
  width:44px; height:44px;
  border-radius:16px;
  background: linear-gradient(135deg,var(--royal),var(--royal2));
  display:grid; place-items:center;
  color:#fff;
  box-shadow:0 12px 28px rgba(11,58,130,.35);
  font-size:1.2rem;
}

.brand-name{
  font-weight:900;
  color:var(--royal);
  letter-spacing:.3px;
  line-height:1.1;
}
.brand-name small{
  display:block;
  font-size:.70rem;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(11,58,130,.6);
}

.nav-link{ color: var(--ink) !important; font-weight: 650; }
.nav-link:hover{ color: var(--royal) !important; }

.btn-royal{
  background: linear-gradient(45deg,var(--royal),var(--royal2));
  border:none !important;
  color:#fff !important;
  font-weight:800;
  border-radius:999px;
  box-shadow:0 10px 22px rgba(11,58,130,.25);
}
.btn-royal:hover{ transform: translateY(-1px); box-shadow:0 18px 30px rgba(11,58,130,.32); }

.btn-gold{
  background: linear-gradient(45deg,var(--gold),var(--gold2));
  border:none !important;
  color:#1b1b1b !important;
  font-weight:900;
  border-radius:999px;
  box-shadow:0 10px 22px rgba(212,175,55,.30);
}
.btn-gold:hover{ transform: translateY(-1px); box-shadow:0 16px 26px rgba(212,175,55,.35); }

.badge-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:.85rem;
  background: rgba(11,58,130,.07);
  color: var(--royal);
  border:1px solid rgba(11,58,130,.10);
}

.hero-card{
  background: rgba(255,255,255,0.76);
  border:1px solid rgba(15,23,42,0.08);
  border-radius:28px;
  padding:34px;
  box-shadow:0 22px 60px rgba(15,23,42,.10);
  position:relative;
  overflow:hidden;
}
.hero-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(500px 220px at 15% 0%, rgba(11,58,130,.22), transparent 70%),
              radial-gradient(480px 220px at 85% 10%, rgba(212,175,55,.26), transparent 70%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; }
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(11,58,130,.07);
  border:1px solid rgba(11,58,130,.10);
  color:var(--royal);
  font-weight:900;
  font-size:.85rem;
}

.section-title{ font-weight:950; letter-spacing:-.3px; color: var(--ink); }
.section-title span{ color: var(--royal); }

.feature-card{
  background: var(--card);
  border-radius:22px;
  padding:24px;
  border:1px solid rgba(15,23,42,0.08);
  box-shadow:0 16px 34px rgba(15,23,42,0.08);
  transition:.28s;
  height:100%;
}
.feature-card:hover{
  transform: translateY(-6px);
  box-shadow:0 22px 44px rgba(15,23,42,0.14);
}
.icon-wrap{
  width:52px;height:52px;border-radius:18px;
  display:grid; place-items:center;
  background: rgba(11,58,130,.08);
  color: var(--royal);
  border:1px solid rgba(11,58,130,.10);
}

.panel{
  background:#fff;
  border-radius:24px;
  border:1px solid rgba(15,23,42,0.07);
  box-shadow:0 26px 70px rgba(15,23,42,.10);
}

.metric{
  background: linear-gradient(145deg,#ffffff,#f4f7ff);
  border:1px solid rgba(15,23,42,0.07);
  border-radius:22px;
  padding:22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 14px 34px rgba(15,23,42,0.08);
  transition:.25s;
  height:100%;
}
.metric:hover{ transform: translateY(-3px); box-shadow:0 18px 44px rgba(15,23,42,0.12); }
.metric .label{ color:rgba(15,23,42,.65); font-weight:800; }
.metric .value{ font-size:1.7rem; font-weight:950; }
.metric .accent{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  background: rgba(212,175,55,.18);
  color:#8a6b00;
  border:1px solid rgba(212,175,55,.25);
}

.load-item{
  background:#fbfcff;
  border:1px solid rgba(15,23,42,0.07);
  border-radius:20px;
  padding:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 10px 26px rgba(15,23,42,0.06);
  transition:.25s;
  position:relative;
  overflow:hidden;
}
.load-item:before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  background: linear-gradient(180deg,var(--royal),var(--gold));
}
.load-item:hover{ transform: translateX(4px); box-shadow:0 16px 36px rgba(15,23,42,0.10); background:#fff; }

.portal-footer{
  background: linear-gradient(180deg,#0b1220,#070d17);
  color:#d1d5db;
}
.footer-logo{
  width:40px;height:40px;border-radius:14px;
  background: linear-gradient(135deg,var(--gold),var(--gold2));
  display:grid;place-items:center;
  color:#1b1b1b;
}
.footer-title{ color: var(--gold2); font-weight:900; margin-bottom:12px; }
.footer-text{ font-size:.95rem; color:#cbd5e1; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:8px; }
.footer-links a{ color:#cbd5e1; transition:.25s; }
.footer-links a:hover{ color: var(--gold2); }
.footer-divider{ border-color:rgba(255,255,255,0.08); }
.footer-badges span{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.08);
  padding:6px 12px;
  border-radius:999px;
  margin-left:6px;
  font-size:.8rem;
}
.brand-text{
  color: #c1121f; /* rich corporate red */
  font-weight: 900;
}

.brand-text small{
  color: rgba(193, 18, 31, 0.75); /* softer red for subtitle */
}