:root{ --atp-primary:#0a7cff; --atp-dark:#071a2c; --atp-accent:#21c16b; }
body{ background:#f7f9fc; color:#1c2636; }
/* Top Bar Styling */
.top-bar {
  background: linear-gradient(90deg, #0a7cff, #0066ff);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 6px 0;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.top-bar a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.top-bar a:hover {
  opacity: 0.8;
}

.top-bar .icon {
  font-size: 1rem;
  margin-right: 4px;
}
.navbar{ background:#0b1f38 !important; }
.navbar .nav-link, .navbar .navbar-brand, .navbar .form-control::placeholder{ color:#e8f0ff !important; }
.navbar .navbar-brand{ font-weight:800; letter-spacing:.2px; }
.state-pill{ background:#0e2a4d; border:1px solid #1d3f6b; color:#e8f0ff }
.search-wrap{ border-radius:14px; overflow:hidden }
.section-title{ font-weight:700 }

/* Trending horizontal cards */
.hscroll{ white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch }
.hscroll::-webkit-scrollbar{ height:8px }
.hscroll::-webkit-scrollbar-thumb{ background:#e1e7f2; border-radius:8px }
.trend-card{ display:inline-block; min-width:260px; max-width:320px; background:#fff; border:1px solid #e7edf6; border-radius:16px; padding:14px 16px; margin-right:12px }
.trend-card .icon{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#edf4ff }
.trend-card.active{ border-color:#0a7cff; box-shadow:0 8px 18px rgba(10,124,255,.12) }

/* Documents grid */
.doc-card{ background:#fff; border:1px solid #e7edf6; border-radius:14px; padding:14px; transition:transform .15s ease, box-shadow .15s ease }
.doc-card:hover{ transform:translateY(-2px); box-shadow:0 10px 18px rgba(15,40,80,.08) }
.doc-card .icon{ width:44px; height:44px; border-radius:12px; background:#f3f7ff; display:flex; align-items:center; justify-content:center }

/* Footer */
.atp-footer{ background:#0b1f38; color:#cfe2ff }
.rounded-12{ border-radius:12px }
.mobile-tabbar{ position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #e8eef7; z-index:1030 }
.mobile-tabbar .nav-link{ color:#7b8aa2 }
.mobile-tabbar .nav-link.active{ color:#0a7cff }
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.top-bar .bi-telephone-fill {
  animation: pulse 1.5s infinite;
}
/* ===== HERO ===== */
.atp-hero{
  background: radial-gradient(1200px 480px at 50% -200px, #dfe9ff 0%, #f5f8ff 35%, #f7f9fc 70%);
  padding: 24px 0 16px;
}
.atp-hero-card{
  background:#1f1f1f;
  color:#fff;
  border-radius:20px;
  padding:32px 28px;
  box-shadow:0 24px 48px rgba(7,26,44,.18);
}
@media (min-width: 992px){
  .atp-hero-card{ padding:40px 44px; }
}
.atp-hero-title{
  font-weight:800;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  letter-spacing:.2px;
  margin:0 0 18px;
  text-align:center;
}
.atp-hero-controls{
  display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap;
}
.atp-pill{
  background:#fff; color:#0b1f38; border:1px solid #e6ebf5;
  border-radius:12px; padding:.55rem .9rem; font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.atp-hero-search{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #e6ebf5; border-radius:12px;
  padding:.35rem .45rem .35rem .6rem; width: min(560px, 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.atp-hero-search i{ color:#7c8aa6; font-size:1.05rem; }
.atp-hero-search .form-control{
  border:0; box-shadow:none; background:transparent; color:#12263a;
}
.atp-hero-search .btn{ border-radius:10px; padding:.45rem .8rem; }

.atp-hero-trending{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:16px 0 10px; justify-content:center;
}
.atp-hero-trending .label{
  color:#b7c2d4; font-size:.9rem; margin-right:4px;
}
.chip{
  border:1px solid #2a2a2a; background:#2a2a2a; color:#e7ecf5;
  border-radius:999px; padding:.35rem .7rem; font-weight:600; font-size:.9rem;
}
.chip-active{ border-color:#3c7bff; box-shadow:0 0 0 2px rgba(60,123,255,.2) inset; }

.atp-hero-stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  margin-top:18px; padding-top:16px; border-top:1px solid #2b2b2b;
}
@media (min-width: 768px){ .atp-hero-stats{ grid-template-columns:repeat(4,1fr); } }
.atp-hero-stats .stat{text-align:center}
.atp-hero-stats .value{font-weight:800; font-size:1.15rem}
.atp-hero-stats .hint{color:#b7c2d4; font-size:.85rem}
/* OTP step boxes */
#otpGroup .otp-box{
  width: 52px; height: 56px;
  font-size: 1.6rem; line-height: 1;
  border-radius: 12px;
}
@media (min-width: 768px){
  #otpGroup .otp-box{ width: 56px; height: 60px; font-size: 1.8rem; }
}
#otpGroup .otp-box:focus{
  border-color: #0a7cff;
  box-shadow: 0 0 0 .2rem rgba(10,124,255,.2);
}
/* Sidebar */
.atp-sidebar{
  background: linear-gradient(180deg, #0b1f38 0%, #0e2748 100%);
  color:#e8f0ff;
  overflow:hidden;
}
.atp-sidebar .nav-link{
  color:#cfe2ff;
  padding:.7rem 1rem;
  border-left:3px solid transparent;
  font-weight:600;
}
.atp-sidebar .nav-link:hover{
  background:rgba(255,255,255,0.06);
  color:#fff;
}
.atp-sidebar .nav-link.active{
  color:#fff;
  background:rgba(10,124,255,.12);
  border-left-color:#0a7cff;
}

/* Cards polish */
.card.rounded-4{ border-radius:1rem; }
.card .badge{ border-radius:.5rem; }

/* Offcanvas width */
@media (max-width: 991.98px){
  #sidebarCanvas{ width: 280px; }
}
/* soft inputs like your screenshot */
.form-control-soft,
.form-select.form-control-soft{
  background:#f6f6f6;
  border:1px solid #e5e5e5;
  padding:.9rem 1rem;
  font-size:1rem;
  box-shadow: 0 2px 0 rgba(0,0,0,.02) inset;
}

/* sticky bottom actions */
.sticky-actions{
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: .75rem 0;
  z-index: 1030;
}

/* floating action buttons (call/whatsapp) */
.fab-call, .fab-wa{
  position: fixed;
  right: 18px;
  width: 52px; height: 52px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:22px; text-decoration:none;
}
.fab-call{ bottom: 116px; background:#0078ff; }
.fab-wa{   bottom: 56px;  background:#25d366; }

/* spacing helper to keep content above sticky bar */
.pb-6{ padding-bottom: 6rem !important; }