:root{
  --bg: #0b0f14;
  --panel: #0f1620;
  --muted: rgba(255,255,255,.7);
  --muted2: rgba(255,255,255,.55);
  --accent: #ffc107; /* bootstrap warning */
  --border: rgba(255,255,255,.10);
}

html, body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #000;
  color: #fff;
}

.bg-black{ background: #000 !important; }
.py-lg-6{ padding-top: 5rem; padding-bottom: 5rem; }

.text-accent{ color: var(--accent); }

.brand-mark{
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,193,7,.15);
  border: 1px solid rgba(255,193,7,.25);
  color: var(--accent);
  font-weight: 800;
}

.hero-section{
  background:
    radial-gradient(1000px 500px at 20% 20%, rgba(255,193,7,.14), transparent 60%),
    radial-gradient(800px 400px at 80% 10%, rgba(13,110,253,.12), transparent 60%),
    linear-gradient(180deg, #0b0f14 0%, #000 70%);
}

.hero-media{
  position: relative;
}

.hero-float-card{
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: min(340px, calc(100% - 32px));
  background: rgba(15, 22, 32, .85);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 14px 12px 14px;
  backdrop-filter: blur(10px);
}

.pill{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,193,7,.15);
  border: 1px solid rgba(255,193,7,.25);
  color: var(--accent);
  font-weight: 700;
}

.stat-card{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 10px 12px;
}
.stat-num{ font-weight: 800; font-size: 18px; }
.stat-text{ color: var(--muted2); font-size: 12px; }

.service-card{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.service-card .card-body{ padding: 18px; }
.icon-badge{
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  font-size: 18px;
}

.step-card{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  height: 100%;
}
.step-num{
  font-weight: 900;
  color: rgba(255,255,255,.25);
  font-size: 22px;
  margin-bottom: 6px;
}

.callout{
  border-radius: 18px;
  background: rgba(255,193,7,.10);
  border: 1px solid rgba(255,193,7,.20);
  padding: 14px;
}

.mini-proof{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  padding: 14px;
}

.chip{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-size: 12px;
}

.portfolio-card{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.portfolio-card img{
  aspect-ratio: 4/3;
  object-fit: cover;
}

.contact-card{
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  padding: 22px;
}

.form-card{
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  padding: 22px;
}

.form-label{ color: rgba(255,255,255,.85); }
.form-control{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: 14px;
  padding: 12px 12px;
}
.form-control:focus{
  border-color: rgba(255,193,7,.55);
  box-shadow: 0 0 0 .25rem rgba(255,193,7,.15);
  background: rgba(0,0,0,.35);
  color: #fff;
}

.accordion-dark .accordion-item{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 10px;
}
.accordion-dark .accordion-button{
  background: rgba(255,255,255,.02);
  color: #fff;
  font-weight: 600;
}
.accordion-dark .accordion-button:not(.collapsed){
  background: rgba(255,193,7,.10);
}
.accordion-dark .accordion-body{
  background: rgba(0,0,0,.25);
}