body{
  overflow:auto !important;
  background:
    radial-gradient(1200px 760px at 16% 18%, rgba(76,201,255,.10), transparent 68%),
    radial-gradient(1200px 760px at 84% 20%, rgba(124,92,255,.12), transparent 70%),
    radial-gradient(1200px 900px at 50% 90%, rgba(34,255,199,.06), transparent 72%),
    #070A12;
}
#scrollWrap, #scroll{ position:static !important; height:auto !important; }
.bb-wrap{ width:min(var(--max), calc(100% - 56px)); margin: 0 auto; padding: 64px 0 72px; position:relative; z-index:5; }

.bb-hero{
  position:relative;
  margin-bottom: 22px;
  overflow:visible;
}
.bb-hero .surface{
  position:relative;
  overflow:visible;
  padding: clamp(28px, 4vw, 60px);
  border-radius: clamp(30px, 3vw, 60px);
  background: linear-gradient(180deg, rgba(18,28,48,.9), rgba(10,18,34,.92));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 50px 180px rgba(0,0,0,.55);
}
.bb-hero .surface::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1200px 700px at 10% 10%, rgba(76,201,255,.12), transparent 70%),
              radial-gradient(1200px 700px at 90% 20%, rgba(124,92,255,.12), transparent 70%);
  opacity:.85;
  pointer-events:none;
}
.bb-hero .surface::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 30%, transparent 70%, rgba(255,255,255,.06));
  opacity:.35;
  pointer-events:none;
}
.bb-hero::before{
  content:"";
  position:absolute;
  inset:-30% -10% auto -10%;
  height: 60%;
  background:
    radial-gradient(800px 520px at 20% 40%, rgba(76,201,255,.20), transparent 70%),
    radial-gradient(760px 520px at 80% 20%, rgba(124,92,255,.18), transparent 70%);
  filter: blur(10px);
  opacity:.95;
  pointer-events:none;
}
.bb-hero-grid{
  display:grid;
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 36px);
  align-items:center;
}
@media (max-width: 860px){
  .bb-hero-grid{ grid-template-columns: 1fr; }
}
.bb-logo-orb{
  width: clamp(220px, 22vw, 300px);
  height: clamp(220px, 22vw, 300px);
  border-radius: 36px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(200px 160px at 20% 20%, rgba(76,201,255,.18), transparent 72%),
    radial-gradient(220px 180px at 80% 80%, rgba(124,92,255,.16), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  display:grid;
  place-items:center;
  box-shadow: 0 30px 120px rgba(0,0,0,.45);
}
.bb-logo-orb img{ width: 62%; height:auto; filter: drop-shadow(0 14px 30px rgba(76,201,255,.22)); }
.bb-kicker{
  margin:0 0 8px 0;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color: rgba(246,247,255,.7);
}
.bb-title{
  font-size: clamp(40px, 5.6vw, 82px);
  margin:0 0 10px 0;
  font-weight:700;
  color:#EAF0FF;
  text-shadow: 0 12px 60px rgba(76,201,255,.10);
}
.bb-chip-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.bb-chip{
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.bb-divider{
  margin-top: clamp(18px, 3vw, 28px);
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  opacity:.6;
}
.bb-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.bb-card{ grid-column: span 12; }
@media (min-width: 960px){
  .bb-card.half{ grid-column: span 6; }
  .bb-card.third{ grid-column: span 4; }
}
.bb-card .surface{
  position:relative;
  padding: 24px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(20,32,54,.82), rgba(12,22,40,.86));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 120px rgba(0,0,0,.4);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.bb-card .surface::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 28%, transparent 70%, rgba(255,255,255,.05));
  opacity:.35;
  pointer-events:none;
}
.bb-h{ font-size: 18px; margin:0; font-weight:700; }
.bb-p{ margin:0; color: var(--muted); line-height: 1.7; }

.swatches{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.colorBtn{
  width:100%;
  padding:14px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.colorBtn[data-color="#05060B"]{ background:#05060B; }
.colorBtn[data-color="#4CC9FF"]{ background:#4CC9FF; }
.colorBtn[data-color="#7C5CFF"]{ background:#7C5CFF; }
.colorBtn[data-color="#22FFC7"]{ background:#22FFC7; }

.dl{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.dl a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  font-weight: 800;
  transition: .18s var(--ease2);
}
.dl a:hover{
  transform: translateY(-1px);
  border-color: rgba(76,201,255,.18);
  box-shadow: 0 40px 160px rgba(0,0,0,.40), 0 60px 260px rgba(76,201,255,.10);
}
.bb-footer{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.logo-preview{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:16px;
  align-items:center;
}
@media (max-width: 640px){
  .logo-preview{ display:none; }
}
.logoBox{
  width: 180px;
  height: 120px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  display:grid;
  place-items:center;
  box-shadow: 0 24px 90px rgba(0,0,0,.35);
  overflow:hidden;
}
.logoBox img{ max-width: 70%; height:auto; opacity:.95; }
.logoBox.is-glow img{ filter: drop-shadow(0 20px 50px rgba(76,201,255,.20)); }

.type-samples{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.type-line{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px 16px;
}
.type-line.is-italic{ font-style: italic; }
.type-line .t1{ font-size: 26px; font-weight: 700; }
.type-line .t2{ margin-top:6px; color: var(--muted); }
.ui-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}
.bb-p.bb-p-spaced{ margin-top:14px; }
@media (max-width: 700px){
  .tool-title::before{ display:none; }
  .tool-title{ gap:0; }
}
.bb-toast{
  position:fixed;
  right:24px;
  bottom:24px;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(12,18,34,.85);
  color:#f6f7ff;
  box-shadow: 0 18px 80px rgba(0,0,0,.5);
  opacity:0;
  transform: translateY(10px);
  transition: opacity .18s var(--ease2), transform .18s var(--ease2);
  pointer-events:none;
  z-index:200;
  font-size:13px;
  letter-spacing:.02em;
}
.bb-toast.show{
  opacity:1;
  transform: translateY(0);
}