viber-what{display:block}
viber-what,
viber-what *{box-sizing:border-box}

viber-what{
  --ink:#0b1220;
  --muted:#5b6472;
  --primary:#7c5cff;
  --accent:#12a6a5;
  --glass:rgba(255,255,255,.88);
  --glass-edge:rgba(12,18,30,.10);
  --radius:16px;

  color:var(--ink);
  font:400 15.5px/1.65 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  max-width:100%;
  overflow-x:clip;

  /* offscreen rendering win */
  content-visibility:auto;
  contain-intrinsic-size:900px;
}

viber-what .vw-wrap{
  position:relative;
  isolation:isolate;
  padding:clamp(28px,6vw,68px) 0;

  background:
    radial-gradient(80% 60% at 50% -10%, rgba(124,92,255,.08), transparent 60%),
    linear-gradient(180deg,#f7f9ff 0%, #f2f5fb 100%);

  overflow-x:clip;
}

viber-what .vw-wrap::before{
  content:"";
  position:absolute;
  inset:-120px -15% auto -15%;
  height:320px;
  pointer-events:none;
  background:
    radial-gradient(35% 60% at 10% 40%, rgba(124,92,255,.15), transparent 60%),
    radial-gradient(35% 60% at 90% 20%, rgba(18,166,165,.12), transparent 60%);
  filter:blur(28px);
  animation:vw-mist 14s ease-in-out infinite alternate;
}

@keyframes vw-mist{
  from{transform:translateY(0)}
  to{transform:translateY(18px)}
}

viber-what .vw-container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 clamp(16px,4vw,24px);
}

viber-what .vw-head{
  display:flex;
  gap:10px;
  align-items:center;
  margin:0 0 18px;
}

viber-what .vw-title{
  margin:0;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.2px;
  font-size:clamp(24px,4.4vw,40px);
  background:linear-gradient(90deg,var(--ink) 20%, var(--primary) 70%, var(--accent) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

viber-what .vw-q{
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#fff,#f1edff);
  box-shadow:0 6px 14px rgba(124,92,255,.18);
  border:1px solid rgba(12,18,30,.08);
  font-weight:900;
  color:var(--primary);
}

viber-what .vw-card,
viber-what .vw-panel{
  background:var(--glass);
  border:1px solid var(--glass-edge);
  border-radius:var(--radius);
  box-shadow:0 14px 30px rgba(10,16,28,.10), 0 1px 0 rgba(255,255,255,.75) inset;
  padding:clamp(16px,3vw,20px);
  backdrop-filter:none;
  contain:layout paint;
}

viber-what .vw-card{margin-bottom:14px}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  @media (min-width:1025px){
    viber-what .vw-card,
    viber-what .vw-panel{
      -webkit-backdrop-filter:saturate(1.1) blur(6px);
      backdrop-filter:saturate(1.1) blur(6px);
    }
  }
}

viber-what .vw-lead{margin:0 0 10px;color:var(--ink)}
viber-what .vw-list{margin:0;padding-left:18px}
viber-what .vw-list li{margin:6px 0}

viber-what .vw-note{
  display:inline-block;
  margin-top:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.88rem;
  color:var(--ink);
  background:linear-gradient(90deg,#eaf0ff,#f9eaff);
  border:1px solid rgba(12,18,30,.08);
}

viber-what .vw-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media (max-width:820px){
  viber-what .vw-grid{grid-template-columns:1fr}
}

viber-what .vw-panel h3{
  margin:0 0 8px;
  font-size:1.02rem;
  font-weight:900;
  color:#0f1c44;
  display:flex;
  align-items:center;
  gap:8px;
}

viber-what .vw-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:conic-gradient(from 120deg,var(--primary),var(--accent),var(--primary));
  box-shadow:0 0 0 3px rgba(124,92,255,.12);
}

viber-what .vw-bullets{list-style:none;padding:0;margin:0}
viber-what .vw-bullets li{
  position:relative;
  padding-left:22px;
  margin:8px 0;
  color:#2a3140;
}
viber-what .vw-bullets li::before{
  content:"◆";
  position:absolute;
  left:0;
  top:0;
  color:var(--primary);
  font-size:.8rem;
}

@media (prefers-reduced-motion:reduce){
  viber-what .vw-wrap::before{animation:none !important}
}