/* Feature bento grid + shared card styles */
.bento {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
  margin-top:56px
}

.card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px;
  backdrop-filter:blur(6px)
}

.card h3 {
  font-size:22px;
  margin-bottom:10px;
  color:#f1f5ff
}

.card p {
  color:var(--mut);
  font-size:15px
}

.ic {
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  color:var(--cy);
  margin-bottom:22px;
  background:#0c1b2a
}

.ic svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

.b1 {
  grid-column:span 4;
  grid-row:span 2;
  min-height:400px;
  background-image:radial-gradient(circle,#00e1ff44 1.2px,transparent 1.6px),var(--card);
  background-size:16px 16px,auto
}

.b1 p {
  max-width:340px
}

.b2,.b3 {
  grid-column:span 2
}

.b4,.b5,.b6 {
  grid-column:span 2
}

.card {
  position:relative;
  overflow:hidden;
  transition:transform .35s,border-color .35s,box-shadow .35s
}

.card::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),#00e1ff22,transparent 60%)
}

.card:hover {
  transform:translateY(-5px);
  border-color:#00e1ff66;
  box-shadow:0 18px 50px #00000055
}

.card:hover::before {
  opacity:1
}