/* DOT8 - Fire UI additions (drop-in) */

:root{
  --d8-accent:#00C2A8;
  --d8-dark:#0B1220;
  --d8-slate:#0F172A;
  --d8-soft:#F6F8FB;
}

.d8-hero{
  position:relative;
  overflow:hidden;
  background: radial-gradient(1200px 600px at 10% 20%, rgba(0,194,168,.20), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(37,99,235,.18), transparent 55%),
              linear-gradient(180deg, rgba(11,18,32,1) 0%, rgba(15,23,42,1) 60%, rgba(11,18,32,1) 100%);
}
.d8-hero:before{
  content:"";
  position:absolute;
  inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity:.18;
  pointer-events:none;
  transform:skewY(-2deg);
}
.d8-glow{
  position:absolute;
  width:520px;height:520px;
  border-radius:999px;
  filter: blur(60px);
  opacity:.22;
  background: var(--d8-accent);
  top:-120px; left:-140px;
  pointer-events:none;
}
.d8-glow.right{
  background:#2563EB;
  top:-180px; left:auto; right:-180px;
  opacity:.18;
}

.d8-pill{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .75rem;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color:#E8EEF9;
  font-size:.85rem;
}

.d8-btn{
  border-radius:999px !important;
  padding:.85rem 1.25rem !important;
  font-weight:600 !important;
  letter-spacing:.2px;
}
.d8-btn-primary{
  background: var(--d8-accent) !important;
  border-color: var(--d8-accent) !important;
  color: #05131A !important;
}
.d8-btn-primary:hover{
  filter: brightness(1.06);
}
.d8-btn-ghost{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
  color:#fff !important;
}
.d8-btn-ghost:hover{ background: rgba(255,255,255,.10) !important; }

.d8-card{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  box-shadow: 0 18px 50px rgba(2,6,23,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.d8-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(2,6,23,.10);
  border-color: rgba(0,194,168,.35);
}
.d8-card.dark{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}
.d8-card.dark:hover{
  border-color: rgba(0,194,168,.45);
  background: rgba(255,255,255,.075);
}

.d8-kicker{
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-size:.78rem;
  color: rgba(255,255,255,.75);
}

.d8-section{
  padding: 90px 0;
}
@media (max-width: 991px){
  .d8-section{ padding: 70px 0; }
}

.d8-sticky-cta{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
}
.d8-sticky-cta a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.85rem 1rem;
  border-radius:999px;
  background: var(--d8-accent);
  color:#05131A;
  font-weight:700;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.d8-sticky-cta a:hover{ filter: brightness(1.06); }

.d8-badge{
  display:inline-block;
  padding:.35rem .65rem;
  border-radius:10px;
  background: rgba(0,194,168,.12);
  color: #075A52;
  font-weight:700;
  font-size:.85rem;
}