/* BLOCK 04 V4 — real HTML/CSS structure matching the approved reference */

.bp-how-v4{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(600px,.92fr) minmax(620px,1.08fr);
  min-height:760px;
  background:
    linear-gradient(90deg,#020b13 0%,#020b13 34%,rgba(2,11,19,.92) 47%,rgba(2,11,19,.20) 65%,rgba(2,11,19,.04) 100%),
    linear-gradient(180deg,#03111d,#03111d);
  border-top:1px solid rgba(76,232,249,.12);
  border-bottom:1px solid rgba(76,232,249,.12);
}

.bp-how-v4::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 79% 26%,rgba(65,225,255,.18),transparent 18%),
    radial-gradient(circle at 89% 68%,rgba(255,90,220,.14),transparent 18%),
    linear-gradient(rgba(92,233,250,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(92,233,250,.025) 1px,transparent 1px);
  background-size:auto,auto,72px 72px,72px 72px;
  mask-image:linear-gradient(90deg,#000 0%,#000 56%,transparent 78%);
  opacity:.8;
}

.bp-how-v4-left,
.bp-how-v4-scene{
  position:relative;
  z-index:1;
}

.bp-how-v4-left{
  padding:72px 36px 62px max(4.5vw,72px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.bp-how-v4-head{
  max-width:590px;
}
.bp-how-v4-head .bp-kicker{
  margin:0 0 18px;
}
.bp-how-v4-head h2{
  margin:0;
  font-size:clamp(46px,4.15vw,74px);
  line-height:.98;
  letter-spacing:-.038em;
  text-transform:none;
  color:#f4f8fc;
  text-shadow:0 18px 40px rgba(0,0,0,.25);
}
.bp-how-v4-head h2 span{
  color:#50e6f4;
}
.bp-how-v4-head>p:last-child{
  margin:22px 0 28px;
  max-width:560px;
  color:rgba(226,239,248,.82);
  font-size:17px;
  line-height:1.48;
}

.bp-how-v4-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 22px;
  max-width:650px;
}

.bp-how-v4-item{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:14px;
  align-items:center;
  min-height:92px;
}

.bp-how-v4-icon{
  width:68px;
  height:68px;
  border-radius:15px;
  border:1px solid rgba(112,225,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(82,77,203,.35),rgba(29,54,110,.45));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 26px rgba(0,0,0,.18),
    0 0 24px rgba(86,188,255,.08);
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,filter .2s ease;
}
.bp-how-v4-icon svg{
  width:38px;
  height:38px;
  fill:none;
  stroke:#bff9ff;
  stroke-width:2.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(92,232,255,.45));
}
.bp-how-v4-icon:hover,
.bp-how-v4-icon:focus-visible{
  transform:translateY(-3px) scale(1.03);
  border-color:rgba(128,242,255,.56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 34px rgba(0,0,0,.22),
    0 0 32px rgba(77,227,255,.18);
  outline:none;
}

.bp-icon-game{background:linear-gradient(180deg,rgba(20,176,210,.35),rgba(8,68,105,.48))}
.bp-icon-star{background:linear-gradient(180deg,rgba(235,144,59,.28),rgba(98,58,26,.50))}
.bp-icon-star svg{stroke:#ffb25f;filter:drop-shadow(0 0 8px rgba(255,158,67,.50))}
.bp-icon-idea{background:linear-gradient(180deg,rgba(226,72,190,.28),rgba(91,35,94,.50))}
.bp-icon-idea svg{stroke:#ff8ce5;filter:drop-shadow(0 0 8px rgba(255,92,214,.45))}
.bp-icon-safe{background:linear-gradient(180deg,rgba(28,201,119,.28),rgba(20,82,64,.48))}
.bp-icon-safe svg{stroke:#73ffc4;filter:drop-shadow(0 0 8px rgba(80,255,178,.42))}
.bp-icon-cake{background:linear-gradient(180deg,rgba(103,82,248,.30),rgba(44,46,120,.48))}
.bp-icon-cake svg{stroke:#b5a7ff;filter:drop-shadow(0 0 8px rgba(143,126,255,.46))}

.bp-how-v4-item h3{
  margin:0 0 5px;
  color:#fff;
  font-size:17px;
  line-height:1.15;
}
.bp-how-v4-item p{
  margin:0;
  color:rgba(223,236,247,.72);
  font-size:13px;
  line-height:1.35;
}

.bp-how-v4-scene{
  min-height:760px;
  background:
    linear-gradient(90deg,rgba(2,11,19,.95) 0%,rgba(2,11,19,.65) 14%,rgba(2,11,19,.10) 34%,rgba(2,11,19,0) 52%),
    linear-gradient(180deg,rgba(2,11,19,.02),transparent 64%,rgba(2,11,19,.14)),
    url("assets/birthday-illustrations/block04-vr-scene-v5-clean.webp") center/cover no-repeat;
}

.bp-how-v4-scene-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 42% 42%,rgba(76,226,255,.18),transparent 18%),
    radial-gradient(circle at 70% 69%,rgba(255,74,220,.12),transparent 21%),
    linear-gradient(180deg,transparent 0%,rgba(2,11,19,.02) 60%,rgba(2,11,19,.12) 100%);
}

@media(max-width:1200px){
  .bp-how-v4{
    grid-template-columns:1fr;
  }
  .bp-how-v4-left{
    padding:58px 30px 34px;
  }
  .bp-how-v4-head,
  .bp-how-v4-grid{
    max-width:820px;
  }
  .bp-how-v4-scene{
    min-height:520px;
    background-position:center 42%;
  }
}

@media(max-width:760px){
  .bp-how-v4-left{
    padding:42px 18px 26px;
  }
  .bp-how-v4-head h2{
    font-size:40px;
  }
  .bp-how-v4-head>p:last-child{
    font-size:15px;
    margin:18px 0 22px;
  }
  .bp-how-v4-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .bp-how-v4-item{
    grid-template-columns:58px 1fr;
    min-height:74px;
  }
  .bp-how-v4-icon{
    width:56px;
    height:56px;
    border-radius:13px;
  }
  .bp-how-v4-icon svg{
    width:31px;
    height:31px;
  }
  .bp-how-v4-item h3{font-size:16px}
  .bp-how-v4-item p{font-size:12px}
  .bp-how-v4-scene{
    min-height:360px;
    background-position:58% center;
  }
}