:root{
  --brand: #0d6efd;
  --soft: rgba(13,110,253,.06);
}

* { box-sizing: border-box; }

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0f172a;
  background: #ffffff;
}

.brand-logo{
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.brand-logo--sm{ width: 28px; height: 28px; }

.hero{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(13,110,253,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 30%, rgba(25,135,84,.10), transparent 55%);
}

.bg-soft{ background: var(--soft); }

.section-head{ max-width: 720px; margin: 0 auto; }

.icon-bubble{
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--soft);
  border: 1px solid rgba(15, 23, 42, .08);
  display: grid;
  place-items: center;
}
.icon-bubble--sm{ width: 46px; height: 46px; border-radius: 16px; }

/* Rozmiar ikon w kartach (jak w wersji początkowej) */
.icon-svg{
  width: 22px; height: 22px;
  color: #0f172a;
}

.mini-card{
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  padding: 14px;
  height: 100%;
  background: #fff;
}

.step-badge{
  width: 34px; height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #0f172a;
  background: var(--soft);
  border: 1px solid rgba(15, 23, 42, .08);
}

.icons-pack-preview{
  width: 160px;
  max-width: 40vw;
}

.hp-field{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

code{ font-size: .9em; }