:root{
  --srl-bg: #0b1020;
  --srl-bg-2: #070a14;
  --srl-card: rgba(255,255,255,.06);
  --srl-border: rgba(255,255,255,.12);
  --srl-text: rgba(255,255,255,.92);
  --srl-muted: rgba(255,255,255,.70);
}

* { box-sizing: border-box; }

.srl-body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--srl-text);
  background:
    radial-gradient(1100px 700px at 10% 10%, rgba(99, 102, 241, .28), transparent 60%),
    radial-gradient(900px 600px at 90% 30%, rgba(34, 211, 238, .18), transparent 55%),
    linear-gradient(180deg, var(--srl-bg), var(--srl-bg-2));
  min-height: 100vh;
}

header, footer{
  background: rgba(0,0,0,.10);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

footer{
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 0;
}

.srl-brand{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--srl-text);
}

.srl-brand-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 800;
  letter-spacing: .04em;
}

.srl-brand-name{
  font-weight: 700;
  letter-spacing: .01em;
}

.srl-badge{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08) !important;
  color: var(--srl-text) !important;
}

.srl-hero{
  padding: 4rem 0 3rem 0;
}

.srl-card{
  border-radius: 22px;
  background: var(--srl-card);
  border: 1px solid var(--srl-border);
  box-shadow: 0 10px 35px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
}

.srl-btn{
  border-radius: 14px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.srl-pill{
  border-radius: 999px;
  padding: .55rem .8rem;
  letter-spacing: .02em;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14);
}

.srl-visual{
  position: relative;
  overflow: hidden;
}

.srl-visual::before{
  content: "";
  position: absolute;
  inset: -60px -60px auto auto;
  width: 220px;
  height: 220px;
  background: rgba(99, 102, 241, .28);
  filter: blur(24px);
  border-radius: 50%;
}

.srl-visual::after{
  content: "";
  position: absolute;
  inset: auto auto -80px -80px;
  width: 260px;
  height: 260px;
  background: rgba(34, 211, 238, .18);
  filter: blur(28px);
  border-radius: 50%;
}

.srl-kpis{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  position: relative;
  z-index: 1;
}

.srl-kpi{
  padding: .85rem .9rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
}

.srl-kpi-value{
  font-weight: 700;
}

.srl-kpi-label{
  font-size: .85rem;
  color: var(--srl-muted);
}

.srl-list{
  position: relative;
  z-index: 1;
  color: var(--srl-muted);
}

.srl-dot{
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  margin-right: .6rem;
}

.srl-link{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,.35);
}

.srl-link:hover{
  border-bottom-style: solid;
}

.srl-footer{
  color: rgba(255,255,255,.70);
}